Select your platform

Facebook Pixel & Checkout Integration

Alexa
Alexa
  • Updated

Bold Checkout uses Facebook Pixel to track how customers interact with your store. Facebook Pixel is able to collect data to help you plan ad campaigns and acquire new customers to your store.

When Facebook Pixel is integrated with Bold Checkout and commercetools, it will track your customer's journey through your storefront all the way to the checkout.

In order for this integration to work, you will need a Facebook ads account. Once this is complete, you will also need to set up the pixel in Facebook Ads Manager.

 


 

Functionality

Tracked page views differ between the Three Page checkout and One Page checkout options.

The One Page checkout tracks both of the landed on checkout page and thank you page page views.

Bold Checkout will trigger a page view for each page of the checkout:

  • The customer information page.
  • The shipping selection page.
  • The payment page.

As well as the following specific events:

  • InitiateCheckout - Will track one a customer has clicked on Checkout (from the cart page) and the checkout page is loaded.
  • AddPaymentInfo - Will trigger once a customer has entered their payment information into the checkout.
  • Purchase - Will trigger once the Complete button is clicked and the customer's transaction is successful.

Events are also tracked every time a button within the checkout is selected.

 


 

Setup

Once your Facebook ads and Facebook Pixel accounts have been successfully created, you will be able to fully integrate Facebook Pixel with Bold Checkout.

To complete this integration, please follow the steps below.

  1. From within Bold Checkout, select Settings > Analytics.
  2. Enter your Facebook Pixel ID.
  3. Select Save.

 


 

Custom Tracking Scripts

In order to track additional information, you will need to create a custom tracking script for your Facebook Pixel. 

To set up a custom tracking script, please follow the steps below.

  1. From within Bold Checkout, select Settings, then Analytics.
  2. Select Enable Custom Tracking Scripts for Successful Purchases.
  3. Enter your custom script.
  4. Select Save.

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


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

If you believe that there are page views and events not being sent, there are several tools available to troubleshoot the issue(s).

Please select an option below to view more information.

The Facebook Pixel ID is a specific set of numbers associated with your account on the Facebook Ads Manager. This ID must be entered correctly and without any additional spaces or characters.

It is highly recommended double checking the formatting of your Facebook Pixel ID to ensure there are no errors.

The Facebook Pixel ID is a specific set of numbers associated with your account on the Facebook Ads Manager. This ID must be entered correctly and without any additional spaces or characters.

It is highly recommended double checking the formatting of your Facebook Pixel ID to ensure there are no errors.

If custom tracking scripts are enabled but there's nothing in the field, the script that Checkout sends by default will be overwritten.

Your custom tracking scripts cannot contain any the following elements:

  • <script> tags.
  • Links to external JavaScript.
  • Liquid code.

It is highly recommended double checking the formatting of your custom tracking scripts to ensure that none of the above elements are within your custom scripts.

It is also important to ensure that your Facebook Pixel ID in the Checkout matches the one that is set up within your commercetools store. Correcting this will ensure that your store's events will display properly going forward.

 


 


Requesting Custom Scripts

If you need to create a custom script, or make adjustments to an existing custom script, please reach out to our partners at StoreTasker to receive a quote.