Stape

Facebook conversion API for Shopify

Author
Stape
Published
May 09, 2021

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?Copy link to this section

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?Copy link to this section

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?Copy link to this section

!

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. 

enable maximum level of tracking 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. 

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.Copy link to this section

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.

add Shopify script to send data layer events 

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. 

Facebook event deduplication

How to set up Facebook conversion API for Shopify manuallyCopy link to this section

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. 

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.

event data variable s GTM

12. Add Data Tag from web GTM template gallery. 

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 Facebook event ID -> this tag should trigger on all pageviews.

set up data tag for Shopify

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

set up e-commerce event tag Shopify

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

17. Add Facebook Conversion API tag from the template gallery. .

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. 

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.

create event data in the server google tag manager 

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.

set up Facebook Conversion API pageview tag

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.

set up Facebook CAPI view item tag

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. 

Facebook event deduplication

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.Copy link to this section

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.  

Facebook event match quality score 

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. 

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. 

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.

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.

check user data in the Facebook event testing tool

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

Conclusion:Copy link to this section

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.

Tagged with:FacebookShopify

Host your GTM server at Stape

By signing up you agree to Stape’s Terms of Use and Privacy Notice