Facebook Conversion API for Unbounce

Accurate tracking and personalization are the keys to paid campaigns’ success. 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, iPhone users will be asked to opt-out or opt-in of tracking for each app they are using on the mobile device. 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 iPhone users.

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

What is Facebook Conversion API?

Facebook Conversions API (formerly called 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 that is 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 Apple iOS’s restriction of user tracking. 

All apps installed on iOS14 will be forced to ask user permission to track their interaction with the app. Assuming that most people will 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. 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 user persona while measuring results as it happens. 

One can use different images and headlines tailored toward certain demographics, target specific audiences based on previous behavior within facebook’s platform.

Most Unbounce users have a Facebook pixel installed directly to 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 if you want to combine browser tracking and conversion API.

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. If the Facebook pixel event didn’t trigger – say because Apple blocked the ability for browsers to track users on their computers – then Facebook can use the server event as an alternative source of data instead. However, when they see similar events in the browser and server, they 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 just need to create and set up web and server Google Tag Manager containers. Then import GTM set up. 

Thi 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. It will help to increase events match quality. 

    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 and add your vales to:
        • Trigger: Unbounce landing page – this trigger is set up to fire the FB pageview event on Unbounce pages. It should trigger on the Unbounce page URL. For example in my case Unbounce lansing pages are located on the subdomain try., so I will use trigger where page URL container try. 
        • 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 and publish server container.

        • 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), these values are dynamic, usually, it changes a couple of times a day. If you do not see server requests, please check that the server container is published. 

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, sending data from web Google Tag Manager container to server, how to get user data inside the web container. And finally, setting 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. 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 DataTag that will send 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 -> click 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. Highly 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, click on the three dots at the top right corner, click Send requests manually, copy X-Gtm-Server-Preview HTTP header -> enable checkbox Send common data -> add event ID. 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. 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. Copy the variable form the web container template 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 that the preview header is correct and that the server container was 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. Once 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 below or using the community