Facebook Conversion API for Bigcommerce - Stape

Facebook Conversion API for Bigcommerce

Browser tracking is becoming less reliable because of ad blockers, decreased cookie lifetime, and intelligent tracking prevention. The iOS 14 update made everything even more complicated.  For these reasons, Facebook started encouraging all advertisers to move their tracking to the server-side and implement Facebook conversion API. With the Facebook CAPI, you can 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 pre-built solution and had to design everything from scratch. 

To set up Facebook conversion CAPI on BigCommerce, you’ll need to do the following:

    1. Set up Google Tag Manager Web container.
    2. Send events and parameters to the data layer.
    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 the 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 eventID 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 the page speed of your site. 

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 doesn’t work (for example, a pixel will be blocked by the ad blocker), the second one will pick up blocked data.  

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

That 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 FB events, including standard and custom. But bear in mind that you should send events data and user data together with server events. Event data include such variables 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, or IP address. . Facebook also recommends sending _fbp and _fbc parameters.

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

You can integrate the Facebook conversion API into your BigCommerce store using the Google Tag Manager Server container. Check this blog post describing 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 to 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 in the headers 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. This script will send data layer 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 if you see data layer 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 into your BigCommerce store is giving Facebook more reliable information about site visitors. It will help FB attribute conversions to your campaigns more accurately and create high-quality custom and lookalike audiences. 

If you need any help implementing FB CAPI into your BigCommerce store, let us know what kind of help you need and submit this form.

If you want to test what the GTM server is and how it works, please register an account.

If you need help setting up a GTM server account on your website, contact us right away!