Facebook Conversion API for Bigcommerce

Browser tracking is becoming less reliable because of ad blockers, decreased cookie lifetime, and Intelligent tracking prevention. The iOS14 update made everything even more complicated. Because of all these reasons, Facebook started to push all advertisers to move their tracking to the server-side and implement Facebook conversion API. With the Facebook CAPI, you can either run tracking on the server-side or combine browser and server methods. If you decide to integrate Facebook Pixel and Facebook conversion API, these two methods will work together and make your tracking more accurate. 

In this article, I want to show you how to set up a Facebook conversion API on BigCommerce. This method works for the Stencil theme and optimized one-page checkout. Recently one of our clients asked to move all his Facebook events to the server-side. We were not able to find a prebuilt solution and had to design everything from scratch. 

To set up Facebook conversion CAPI on Bigcommerce, you’ll need:

  1. Set up Google Tag Manager Web container
  2. Send events and parameters to the dataLayer
  3. Move Facebook pixel from Bigcommerce to Google Tag Manager Web container.  
  4. Set up Google Tag Manager Server Container 
  5. Set up Facebook conversion API inside the Server Container. 

How does Facebook conversion API work with your BigCommerce pixel?

Facebook recommends having both browser tracking and server tracking implemented. To prevent data duplication, you should set up event deduplication using the event ID method. 

But Facebook Conversion API can work as a replacement for your standard pixel tracking. Though Facebook does not recommend using only Server tracking, it may improve your site page speed. 

Facebook recommends using FB pixel in parallel with FB CAPI. In this case, both data sources will send identical information to Facebook, and if one won’t work (for example, a pixel will be blocked by AdBlocker), the second one will still send data. 

To set up proper event deduplication, your events need to send a unique event ID to Facebook. If an event with the same event name and event ID will be sent to Facebook within 5 minutes, these events will be deduplicated. In this case, Facebook will process web events and deduplicate server events. 

This is how event deduplication looks like for one of our clients who uses Bigcommerce. 

facebook conversion API for bigcommerce event deduplication

What events and parameters can you send from your BigCommerce site using Facebook conversion API

Facebook conversion API can support all types of Facebook events, both standard, and custom. You should send events data and user data together with server events. Event data include such things as content_id, purchase value, etc. Facebook uses user data to match users from your site to users in their database. 

Here’s an example of user parameters and a difference between server and browser events:

facebook conversion API for bigcommerce event difference

All Facebook events that you send from the server will have an event match quality score. You can get a maximum of 10 points, and the score you get depends on the number of user parameters you send to Facebook. It is required to send at least one customer parameter (like email, browser & IP address, etc.). Facebook also recommends sending fbp and fbc parameters.

How can you set up a Facebook conversion API on your BigCommerce site?

You can integrate Facebook conversion API on your Bigcommerce store using the Google Tag Manager Server container. Check this blog post about what a server container is and how it can benefit your site

If you are already using Facebook pixel on your Bigcommerce store, most likely, you are using native Bigcommerce and Facebook integrations. It means that FB pixel ID is added inside Bigcommerce. 

Set up Google Tag Manager Web Container.

The first step would be to move Facebook tracking to the Google Tag Manager Web container. To set up Facebook browser tracking properly inside the web container, you need to use a data layer. It will pass events and parameters to a Facebook pixel. We will use Bigcommerce scripts for that. 

 

1. Create a Google Tag Manager Web container and add GTM code using Bigcommerce script manager. Create a new script and add the script inside the header on all pages. 

facebook conversion API for bigcommerce add gtm script
facebook conversion API for bigcommerce add google tag manager

2. Open the script manager inside the storefront -> create a new script -> this script should be added in header on all pages. Copy this script, paste into the script manager and click save. It will send DataLayer events in the Google Tag Manager Web container.

3. Add this code inside the affiliate tracking. Advanced Settings -> Web Analytics -> Affiliate Conversion Tracking.

<script>
dataLayer.push({ 'client_email': '%%ORDER_EMAIL%%', });
</script>

4. Once you’ve added these scripts, open the preview mode of the Google Tag Manager Web container and check that you see dataLayer events.

Import Google Tag Manager Containers.

5. Create and set up Google Tag Manager Server container. Follow this guide on setting up a server container

6. Import this container setup inside the Web container. 

7. Import this settings setup inside the Server Container. 

8. Once done, add your values inside these variables:

Web container: Facebook pixel, Server URL, Preview Header, Web GTM ID

Server Container: API Access Token, Facebook Pixel ID, Facebook Test ID

9. Go to the Web and Server containers preview mode and check that you see all events and parameters. Also, you can add Facebook test ID and check if event deduplication works correctly. Follow this guide on how to test Facebook conversion API. 

facebook conversion API for bigcommerce events

Conclusion:

The great thing about implementing Facebook conversion API on your Bigcommerce store is that you will give Facebook more reliable information about site visitors. It will help FB attribute conversion to your campaigns more accurately and create higher quality custom and lookalike audiences. 

I hope this blog post helped you to integrate Facebook conversion API on Bigcommerce successfully. If you need any help implementing FB CAPI on Bigcommerce, submit this form to discuss your specific needs and how we can help integrate it. Or send us an email support@gtm-server.com