Facebook conversion API for Shopify - Stape

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, you’ve likely already heard about Facebook conversion API and why it’s essential to implement it to make your tracking more accurate because of iOS 14, AdBlockers, and ITP. So 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 setting up server-side tracking using GTM web, server container, and GA4 or Data Tags to send data from web to server. The main benefit of this method is that it works for the customized websites or non-standard events where the Native Facebook app is not helpful. 

Why should you implement Facebook CAPI for Shopify?

A year ago, Apple announced that after the update the  apps would have to seek user agreement to track their behavior t. And now, in April 2021, they finally released this feature. All apps need to ask users to opt in for or opt out of sharing this information.  

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 a great  example of the next tool created by  Facebook that can help advertisers improve the accuracy of user data, measure customer actions effectively, and share data with the platform in a more efficient way.

Here are some numbers that will tell why it is necessary 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 were planning to phase out 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 explain why it is crucial to implement SS tracking. 

How can Facebook Conversion API improve tracking?

Shopify is one of the largest eCommerce platforms, and most 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 (inside the user browser), and FB CAPI works on the 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 can prevent misinformation or information gaps. Facebook recommends using both browser and server tracking. It means that if your Facebook browser pixel is blocked, Facebook will still track user data using the server. 

How can you implement Facebook conversion API on Shopify?

Update August 2021:  The Facebook app for Shopify was updated in Summer 2021. The new version with enabled maximum data sharing sends all e-commerce events from both browser and server. It means that if you want to implement only Facebook conversion API for the standard events, enable maximum data sharing and check FB events manager in a couple of days. You should see all e-commerce events sent from both browser and server. 

You can use the method described below for setting up server-side GA4 for Shopify or set up FB CAPI for non-standard events. 

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 PageViews, AddToCart events, or product views when browser tracking is blocked. If you implement the default method, you will see this picture inside the events manager. Only Purchase events will show a match score and will be tracked through the browser and server. 

facebook app for shopify testing tool

In this guide, I will show you 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 the following:

    • 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. 

Want us to implement Facebook CAPI on your site?
Find out how much it'll cost!

Conclusion: 

This guide describes how to set up Facebook conversion API for your Shopify store. It was created using the Basic Shopify plan. This plan does not allow users to insert the Google Tag Manager code to the checkout to set up server-side tracking for PageView, ViewContent, and AddToCart events. I will also create a guide for the Shopify Plus store, allowing users to add GTM to the checkout. I hope this post helped you implement FB CAPI for Shopify. If you have any questions, feel free to ask them in the comment section 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!