Facebook conversion API for Shopify

Facebook spent a lot of effort pushing marketers and site owners to implement FB Conversion API. If you run advertising on Facebook, most likely, you’ve already heard about Facebook conversion API and how it’s essential to implement it to make your tracking more accurate because of the iOS 14, AdBlockers, and ITP. But how can you implement it? 

In this guide, I want to show you how to set up a Facebook conversion API for Shopify using the Google Tag Manager Server container. This method allows tracking not only purchase event (it can be done using native FB app for Shopify). It will also help you move other events to the server-side tracking (pageview, add to cart, view content). I’m using Shopify Basic store for this how-to. 

Why should you implement Facebook CAPI for Shopify?

A year ago, Apple announced that they would restrict the ability for iOS applications to track user behavior without the user’s agreement. And now, in April 2021, they released this feature. All apps need to ask users to opt-in or opt-out from tracking. 

According to recent studies, 80% of users will opt out of tracking. That’s why Facebook is pushing advertisers to move tracking to the server-side. FB CAPI is the example of the next trick from companies that earn from advertising against privacy regulations policies. 

Here are some numbers that will tell how necessary it’s to implement server-side tracking. 

    • Around 27% of US internet users have AdBlockers.
    • Safari, Firefox, and Mozilla have intelligent tracking prevention algorithms that decrease cookie lifetime and block 3rd party cookies.
    • Less then 20% of iOS users will opt-in for tracking. 

We already know that Safari, Firefox, and Mozilla implemented ITP that blocks third-party cookies. Other browsers also announced that they would phase out of 3-rd party cookies. With the server-side tagging and a custom subdomain, you can send tracking requests from your subdomain and make it 1st party. 

All these changes in user tracking are the main reason why you should implement SS tracking. 

How is Facebook Conversion API can improve tracking?

Shopify is one of the largest eCommerce platforms, and huge percentage of the Shopify stores run ads on Facebook. 

Facebook conversion API has the same purpose as Facebook pixel but works in a completely different way. Facebook browser tracking works on the client-side (in the user’s browser), and FB CAPI works through the cloud server. 

FB CAPI allows to:

    • Track events on your site
    • Collect users’ data (first name, last name, etc.)
    • Create audiences and segments based on the collected data

With server-side tracking, you will prevent misinformation or lack of information. Facebook recommends using both browser and server tracking. It means that if your Facebook browser pixel is blocked, Facebook will still track users’ using the server.  

How can you implement Facebook conversion API on Shopify?

The easiest way to implement Facebook conversion API is to use the native Facebook App for Shopify. All you need to do is add Facebook App, connect it to your Facebook Business Manager and enable Maximum tracking level. 

facebook app for shopify

But the main disadvantage of this method is that FB will track only Purchase events from both browser and server. All other events will work only from the browser. It means that you won’t track page views, add to cart, product views when browser tracking is blocked. If you implement the default method, you will see this picture inside the events manager. Only the Purchase event will show a match score and be tracked through the browser and server. 

facebook app for shopify testing tool

In this guide, I will show how to set up all other events through the server. We will use the native Facebook app, Google Tag manager web, and server container to set up FB Conversion API. The Facebook native app will create a unique event ID for all browser events. I will use the Google Tag Manager container to capture event ID, product data, and user data. Data Tag for the web container will pass this data to the server container.

I created this guide using the Basic Shopify store. Shopify doesn’t allow Basic plan users to add Google Tag Manager to the checkout pages. It means that for Shopify Basic store you can set up FB conversion API for events before checkout + purchase event. 

If you have a Shopify Plus plan, you will have access to the checkout and will be able to set up Facebook conversion API for all events, including checkout events. 

To set up all events for Facebook conversion, we will need

    • Google Tag Manager Web container
    • Google Tag Manager Server container
    • Facebook App for Shopify with enabled Maximum tracking level

How to set up Facebook Conversion API for Shopify.

1. Set up Google Tag Manager web container. 

2. Set up Google Tag Manager server container using this guide. 

3. Set up a custom subdomain for the server container. Using a custom subdomain is highly recommended because it allows setting first-party cookies. 

4. Install Facebook App for Shopify and enable Maximum tracking.

5. Copy this script. You need to add it inside the Additional Google Analytics JavaScript. Open Shopify Admin -> Online Store -> Preferences -> Copy paste script inside the Additional Google Analytics JavaScript.

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: Server URL, Preview Header

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

If you want to send user data to Facebook conversion API, add a script from step 24. 

9. Open the preview mode of Web and Server container, and Facebook event testing tool. You should see Facebook page view, view content, add to cart and purchase event triggered inside the server container and event testing tool. 

test facebook conversion API for shopify event testing tool
test facebook conversion API for shopify

How to set up Facebook conversion API for Shopify manually

In the next steps, I want to show how to set up Facebook CAPI manually, without uploading Google Tag Manager containers from steps 6 and 7. You should add a script from step 5, do not import containers. Go to step 10. I will show how to set up Facebook conversion API for Shopify manually using Google Tag Manager Web and Server containers.

10. Open Google Tag Manager preview mode inside the Web container. Check that Tag Manager sees events and parameters inside the DataLayer. 

datalayer for shopify debug

11. Inside the Web container, create data layer variables with all parameters you want to send to Facebook conversion API. Go to the Variables section in the Web container -> Click Create New -> Variable type “Data Layer Variable” -> add “Data Layer Variable Name” -> Click Save. 

Event_id variable in the data layer captures the Facebook event ID that the FB App for Shopify is sending to the browser. This parameter is essential since we will use it to set up event duplication.

datalayer variables for shopify event
datalayer variables for shopify

12. Download and add Data Tag into the Web Google Tag Manager container. We will use this tag to send data to the server container. Open this link -> Click on the green button Code -> Download Zip file -> Go to the templates tag in the Google Tag Manager Web container -> On the Tag Templates click New -> Import -> Click Save.

data tag github
import tag template tag manager

13. Add Data Client inside the Google Tag Manager Server container. This Client will listen to Data Tag and process all information it sends into events data inside the server container. Open this link -> Click on the green button Code -> Download Zip file -> Go to the templates tag in the Google Tag Manager Server container -> On the Client Templates click New -> Import -> Click Save. 

 

14. Since Facebook App for Shopify is sending all necessary parameters to the FB browser pixel, we will only need to set up server-side tracking for Facebook. We will use a Data Tag to deliver data from the Web container to the Server container. In this step, I will show you how to set up a server-side pageview event.

Open Web container -> Create new tag -> Tag type “Data Tag” -> Event name “pageview” -> add your GTM Server Side URL (you’ve created it on step 3) -> add GTM Server Preview HTTP header (you will find the preview header in the preview mode of the server container by clicking three dots and send request manually) -> add Facebook event ID -> this tag should trigger on all pageviews.

pageview event shopify conversion api
preview header

15. In this step, we will configure Data Tag for the view content event. Create New Data Tag -> Event name View Item -> Add server URL and Preview Header -> Under Events Data add all product information you want to use inside the server container and facebook event ID -> this tag should trigger a custom event view_item.

facebook conversion api shopify view content
facebook conversion api shopify view content trigger

16. Open Server Container -> open Client  tab ->  Click New -> Choose Data Client -> Click Save.

data client server container

17. Import Facebook Tag to the Server container. Open this link -> Download Zip file -> and Import Tag on the Templates Tab. Publish your Server container. It’s essential to publish server container. 

facebook conversion API tag
import facebook conversion API tag

18. Let’s test that the Server container sees data that you send using Data Tag. Open the preview mode of both Web and Server containers. Click through your site. You should see page_view and view_item events and parameters in the Server container. If you don’t see any events make sure you’ve published the Server container and check that the Preview header is correct. 

server pageview facebook conversion API
server view content facebook conversion API

19. Create variables inside the Server container that will capture the request_data that you’ve sent from the Web container. Go to the variables tab inside the Server container -> Create new variable -> Variable type event data -> Add Key Path

server parameters facebook conversion api
server product parameters facebook conversion api

20. Create a new tag inside the Server container. Tag type -> Event Data to FB Conversion API -> Event Name Setup Method “Override” -> Event name “Pageview -> Add Facebook API Access Token (you can find it inside the events manager on FB) -> Add Facebook pixel ID -> Add Facebook test ID if you want to see events inside the FB testing tool -> open Server Event Data Override -> Select event ID and add event Facebook ID variable -> this tag should trigger on the pageview event.

facebook conversion API pageview
facebook conversion API pageview trigger

21. In this step we will set up a View Content event. Create a new tag inside the Server container -> Tag type “Event Data to FB Conversion API” -> Event Name Setup Method “Override” -> Event name “View Content” -> Add Facebook API Access Token -> Add Facebook pixel ID -> Add Facebook test ID if you want to see events inside the FB testing tool -> open Server Event Data Override -> Select event ID and add Facebook event ID variable -> Add event data inside “Custom Data” -> this tag should trigger on the view_content event.

facebook conversion api view content Shopify
facebook conversion api view content trigger Shopify

22. Open Web and Server preview mode and check that page_view and view_content event works correctly. You can test these events inside the Facebook testing tool as well. 

test facebook conversion API for shopify
test facebook conversion API for shopify event testing tool

23. Once you’ve verified that everything works correctly, set up the Add to cart event similarly to view content.

How to send user parameters to Facebook conversion API from Shopify.

FB requires sending user parameters for each event you are sending from the server. With the help of user parameters, FB can match your site visitors to users in their database. The more parameters you send to FB, the better match quality FB will show inside the events manager. 

You can send some user data in a raw format, and personal user information (like email, first, last name, phone number, etc.) should be hashed.  

event match score shopify conversion api

To send user data to the Facebook conversion API, we will need to see this data to the dataLayer of the web container. Shopify doesn’t send this data by default. We will need to edit theme.liquid file. 

24. Open Shopify Admin -> Online Store -> Themes -> Click on Actions and select Edit Code -> Click on theme.liquid -> copy this script -> add it inside the theme.liquid before the Google Tag Manager code. This script will push user data to the data layer of the GTM web container. 

facebook conversion api shopify script
facebook conversion api shopify script add

25. Open the Web container preview mode and check that you see user data inside the data layer. If you do, create data layer variables that will capture user parameters. 

user data facebook conversion API shopify
datalayer user data facebook conversion API shopify

26. Add user data to the Data Tag inside the web container. Open data tag -> add user parameters to the user data -> do it for all Data Tags -> once done, open Web and Server preview modes and check that server container sees user parameters. 

user data pageview tag

27. Create variables inside the Server container that will capture user data -> add these variables to the Facebook tags -> Open the preview mode of the server container and FB event testing tool and check that FB sees user parameters. 

user data variable facebook capi shopify
test user data facebook capi shopify

28. Once you’ve verified that everything is working, do the same setup for the add-to-cart event and publish your container. 

Conclusion: 

This guide described how to set up Facebook conversion API for the Shopify sire. It was made for the store that is on the Basic Shopify plan. Basic plan users can’t insert Google Tag Manager code to the checkout, so you can only set up server-side tracking for pageview, view content, add to cart and purchase events. Hope this post helped you implement FB CAPI for Shopify. If you have any questions feel free to ask in the comment below or visit our community

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!