Facebook Conversion API for Unbounce - Stape

Facebook Conversion API for Unbounce

Accurate tracking and personalization are the keys to the success of paid campaigns . Many marketers create different angles for each target audience and use landing page builders, like Unbounce, to set up a custom landing page. 

Accurate tracking is getting more problematic because of privacy restrictions. With Apple’s iOS 14 update, users will be asked to opt out of or opt in for tracking on iOS devices. Studies show that around 90% of users will choose to opt out of tracking. It means that tracking pixels won’t work for 90% of iOS users.

This article will describe how to set up the Facebook Conversions API for Unbounce so that Facebook and Instagram tracking still work accurately.

What is Facebook Conversion API?

Facebook Conversions API, otherwise known as Facebook Server-Side API, is a new way of tracking from Facebook that allows sending data about user behavior on the site using a cloud server.

FB CAPI has the same abilities as the well-known Facebook pixel. But it has utterly different technology behind it. Facebook pixel uses JS code placed on the website to send data about events on the site. Conversion API sends data from the server.  

These two ways of tracking (client-side and server-side) can work individually and in parallel. Facebook recommends choosing a parallel option and setting up web and server tracking to make event data more reliable. 

Facebook conversion API has become especially relevant now when the ability to track users has been tightened. All advertisers who use Facebook ads have already been notified about the Apple iOS restriction of user tracking.

All apps installed on iOS 14 will be forced to ask user permission to track their interaction with the app. Assuming that most people choose to block tracking, they will become ghosts for platforms like Facebook and Instagram.

It means that you won’t see accurate conversion numbers for your FB or IG campaigns, and custom audiences won’t collect complete data.

How can Facebook conversion API help track Unbounce events?

Facebook is a great way to advertise your product using Unbounce landing pages. The best part about combining Facebook ads and Unbounce is creating customized campaigns for each customer while measuring results as it happens. 

One can use different images and headlines tailored toward certain demographics to target specific audiences based on previous behavior within the Facebook platform.

Most Unbounce users have a Facebook pixel installed directly into the landing page code. Others might use a web Google Tag Manager container to manage all tracking scripts. Both methods of implementing FB pixel will work.

Facebook suggests using both browser and server tracking. When Facebook receives a server event, it checks if there is also a corresponding browser event that happened at that exact moment. Let’s say that the Facebook pixel event didn’t trigger because Apple blocked the ability for browsers to track users on their computers. It means that Facebook can use the server event as an alternative source of data instead. However, when it detects similar events in the browser and server, it will deduplicate server events.

facebook purchase event deduplication

To set up Facebook conversion API for Unbounce, you will need:

    1. Facebook pixel installed to your Unbounce pages. Either in using javascript or in the Google Tag Manager web container.
    2. Google Tag Manager server container. 

How to set up the Facebook conversion API for Unbounce?

Here I will describe the easy method. You will need to create and set up web and server Google Tag Manager containers. And then, import the GTM setup. 

This method configures PageView and lead event tracking using Facebook pixel and Facebook conversion API. We will send the user email, first name, last name, and phone number together with the server lead event. This way, the events match quality will increase.

    1. Set up a Google Tag Manager server container. 
    2. Add Google Tag Manager Web container to Unbounce pages.
    3. Import Web Google Tag Manager container. Click Admin -> Import Container

      !Note: you need to merge this container with your existing setup. 

       

      Add your values to these variables and trigger:
      • Trigger: Unbounce landing page – this trigger is set up to fire the FB PageView event. It should trigger on the Unbounce page URL.  
      • Variable: Server URL – you can find it in your stape account under tagging URL. Highly recommend using a custom subdomain. It will help set up cookies properly. 

tagging server URL

        • Variable: FB Pixel
        • Variable: Preview header. This variable is required to see the data you send from the web container inside the server container. To find Preview Header, open the preview mode of the server container -> Click on the three dots at the top right corner -> Click Send requests manually -> Copy X-Gtm-Server-Preview HTTP header. 

4. Import Server Google Tag Manager container

Add your values to these variables:

        • Facebook Access Token. To generate an access token, open Facebook events manager -> click Settings -> click Generate access token.

facebook access token

        • Pixel ID
        • Facebook Test ID 

5. Open the preview mode of the Web and Server container and test the setup. Do not forget to update Facebook test ID (server container) and Preview Header (web container). 

I hope everything worked. If you have any issues, check the how-to below that explains all steps of setting CAPI for Unbounce in more detail. 

 

test unbounce fb conversion api

How to set up the Unbounce FB CAPI manually

Here I will describe how to set up Facebook conversion for Unbounce step-by-step, including setting up FB browser tracking and sending data from web Google Tag Manager container to server. Also, how to get user data inside the web container. And finally, how to set up a server container. 

    1. Set up a Google Tag Manager server container. 
    2. Add Google Tag Manager Web container to Unbounce pages.
    3. Set up a Facebook page view event in the Web container. Create a new Custom HTML tag with Facebook base code that will trigger on your Unbounce landing pages. My Unbounce pages are located in the subdomain try.stape.io 

      The Facebook tag should include the event_id variable. It is required to set up FB CAPI event deduplication. Add event_id from the GTM community gallery and enable this variable inside the variables tab. 

facebook pixel event pageview unbounce

4. Set up Data Tag that will transfer the pageview event to the server container. Download Data Tag from GitHub and import it to the Web container. To import tag, open the template tab -> Сlick new in the Tag Templates section -> Click three dots in the top right corner and import.

Create a new tag -> Tag type Data Tag -> Event name pageview -> Add server URL ( you can find it in your stape account under tagging URL. We recommend using a custom subdomain, it will help set up cookies properly) -> Add preview header. This variable is required to see the data you send from the web container inside the server container. 

To find Preview Header, open the preview mode of the server container and click on the three dots at the top right corner. And then, click Send requests manually, copy X-Gtm-Server-Preview HTTP header -> Enable checkbox Send common data -> Add eventID. This tag should use the same trigger as a Facebook base tag. 

data tag pageview unbounce

5. To increase the match quality of the Facebook server events, we will need to send user parameters. Initially, you do not know any user parameters on the PageView events. But when a user submits a form, there should be parameters to help FB match users. 

Web container template includes variables for the pre-defined Unbounce fields. To get these variables from Unbounce, we will need to create custom JavaScript variables. If you want to create new variables, just copy the variable and update it with the Field Name and ID section in Unbounce. 

 

unbounce datalayer variebles
unbounce datalayer variables

6. Set up a Facebook tag for the Lead event. This tag should trigger on a custom event gtm.formSubmit. Do not forget to add event_id.

Facebook lead event unbounce

7. Set up a Data Tag that will send lead information to the server container. Do not forget to add event_id and user data (that we’ve created in step 5). This tag should trigger on a custom event gtm.formSubmit. 

unbounce send data from web to server

8. Download Data Client for GitHub and import it to the Server container. This client will listen to Data Tag and process its information from the web container inside the server container. Publish server container. 

 

9. Open the preview mode of the web and server container and check if you see data inside the server preview mode. If you don’t see anything, check if the preview header is correct and the server container is published. 

10. Inside the server container, set up variables that will get user data and event id from the event data. Create a new variable -> Type event data -> Add Key Path

server variables
server variable unbounce

11. Import Facebook conventions API tag from GitHub and add it to the Server container. When done, create a new tag -> Tag type Facebook conversion API -> Event name Pageview -> Add API access token (Set to your Facebook API Access Token. See here for more information) -> Add Pixel ID -> Add Facebook test ID -> Add event ID and User Data. This tag should trigger on a page_view event.

unbounce fb capi pageview trigger

12. Set up a Lead event in the server container using the Facebook conversion API tag.

unbounce lead facebook conversion api

14. Open the preview mode of the web and server container. Open the Facebook event testing tool and test the setup. If everything is set up correctly, you should see this: 

 

14. Open the preview mode of the web and server container. Open the Facebook event testing tool and test the setup. If everything is set up correctly, you should see this:
test facebook capi unbounce

If you do not see server events, check that Server Container is published, preview header, and Facebook test ID are correct. 

Conclusion: 

This guide showed how to set up the Facebook conversion API for Unbounce using the Google Tag Manager server container. It tracks PageView and lead events from web and server and sends user information together with the lead event. You can use this method for setting up other events in Unbounce or any other site that allows adding Google Tag Manager code on the site. 

If you have any questions, feel free to ask in the comment section below or use the community