Make a selection

Facebook Pixel & Checkout Integration

Laurel
Laurel
  • Updated

Bold Checkout integrates with Facebook Pixel to track how your customers interact with your store. You can use this data to plan ad campaigns, acquire new customers, and more.

 


 

Functionality

If your commercetool's store and Bold Checkout use the same pixel, your customer's journey can be tracked throughout the store to the checkout. If Facebook pixel is set up for Bold Checkout only, events and page views will only be tracked for Bold Checkout.

The data that Facebook Pixel tracks via page views differs between the three page and one page checkout flows.

Note: To customize the number of pages in your checkout flow, please visit Customize your Bold-Hosted Checkout Flow.

The one page checkout flow tracks the following page views:

  • Landed on the Checkout Page
  • Thank You Page

The three page checkout flow tracks the following page views:

  • Customer Information page
  • Shipping page
  • Payment page

Bold Checkout also tracks the following events:

  • InitiateCheckout - This is tracked once the checkout loads after a customer clicks Checkout from the cart page.
  • AddPaymentInfo - This is tracked once the customer enters their payment information.
  • Purchase - This is tracked once the Complete button is clicked, and the transaction is successful - this event is triggered. 

Events are also tracked every time a button to move to the next step in the checkout is selected.

 


 

Requirements

 


 

Setup

  1. Within Checkout, navigate to Settings > Analytics.
  2. Enter your Facebook Pixel ID.
  3. Click Save.

 


 

Facebook Pixel Tracking Scripts

Facebook Pixel tracking scripts allow you to track additional information.

  1. Within Checkout, navigate to Settings  > Analytics.
  2. In the Facebook Pixel and tracking scripts section, enable the Custom Tracking Scripts for Successful Purchases setting by moving the toggle to the right.
  3. Enter your custom script.
  4. Click Save.

Bold Checkout uses scripts to send both page views and events to Facebook Pixel. The default script that Bold Checkout sends for Facebook Pixel is as follows:


FacebookAnalytics.sendFacebookEvent('Purchase', { 'value': BOLD.order.total / 100, 'currency': BOLD.order.currency, 'contents': BOLD.order.line_items, 'content_type': 'product', 'content_ids': BOLD.order.line_items .filter(line_item => line_item.platform_variant_id) // not undefined and not null .map(line_item => line_item.platform_variant_id), });

 


 

Troubleshooting

This section outlines some possible causes for inaccurate tracking or errors.

  • It's important to double check the formatting of your Facebook Pixel ID to ensure its accuracy.

    The Facebook Pixel ID is an extremely specific set of numbers that's connected to your account within the Facebook Ads Manager and should not contain any spaces or additional characters before, within, or after the ID.

    Errors in formatting can make it appear as though all your customers are abandoning the checkout.

  • If Custom Tracking Scripts are enabled but nothing is appearing in the field, Bold Checkout's default script will be overwritten.
  • Custom tracking scripts cannot contain <script> tags, or links to external JavaScript.

    It's important to ensure that your Facebook Pixel ID in Checkout matches the ID that's set up in your platform's store if you wish to track the full customer journey. Correcting this ensures that your events display properly going forward.