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

But it is becoming more problematic to get precise analytics for Facebook due to privacy restrictions, such as reducing the lifetime of cookies to 7 days or even 24 hours for Safari users. As a result, you will receive less accurate conversion attribution, which makes it challenging to estimate the campaign’s performance.

However, there is an option that helps prolong cookies’ time and, hence, bypass these restrictions - switching to server-side tracking instead of client-side. In this article, we will describe how to set up the Facebook Conversions API for Unbounce so that tracking still works accurately.

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.

Facebook 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 Safari Intelligent Tracking Prevention (ITP).

How does it work? Whenever an ITP detects that the IP address of a URL attempting to set cookies differs from your website’s domain, it reduces the cookies' lifetime to 7 days. 

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 Facebook 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 wasn’t triggered because of the ad blocker. This means that Facebook can use the server event as an alternative data source. However, when it detects similar events in the browser and server, it will deduplicate server events if proper deduplication keys are provided.

Before you start the setup, here’s what you get by using Stape’s pre-built solution:

• Pre-built templates for both the GTM web and server containers
• Automatic sending of user data for server-side events
• Easy Facebook event deduplication setup

These features help you skip the manual configuration and get more accurate tracking with less effort.

We will describe how to set up a server container and get user data inside the web container. Then we will configure Facebook browser tracking and send data from the web Google Tag Manager container to the server. And finally, how to set up Facebook conversion tracking for Unbounce.

1. Set up a Google Tag Manager server container. 

2. Log in to your Stape account and select your sGTM container from the dashboard.

3. Go to Power-ups and click Use next to the Custom Loader panel.

4. Toggle the Custom Loader switch to enable it.

5. If you want to encode tracking requests sent from the browser to your sGTM container, toggle the Enhanced ad blocker protection. By masking recognizable URL patterns and tracking signatures, it prevents ad blockers from identifying and intercepting those requests.

6. Click Save changes.

7. In the Code & Setup information section, choose the Platform and select Other to receive a JS snippet in case you’re using another platform or a custom website.

8. Configure the following settings:

• Web GTM ID – enter your web Google Tag Manager ID.
• Same Origin Path – if you use the same-origin approach, enter the path here so both GTM and gtag.js load through it.

9. You can also configure Advanced settings:

• Generate with Cookie Keeper – includes Cookie Keeper functionality in the generated code.
• User identifier type – appears together with Generate with Cookie Keeper. Choose how to identify users, Cookie is recommended. When selected, enter the Cookie name of the first-party cookie to use as the identifier. For more information, read How to choose user identifier type in Cookie Keeper.

10. Click Generate and add the provided code to your website.

11. Log in to the Unbounce Conversion Intelligence™ Platform. 

On the left-hand side menu, click "Settings".

From the drop-down menu, select "Script Manager".

At the top-right-hand corner, click the blue button titled "Add a Script".

Select “Custom Script” from the drop-down menu:

12. Choose the placement for the script “Head” and set the “Include” value to “All.”

13. Add the script you generated in step 2.2 to the dialog box. In the “Script Usage” tab, select your domain. Click “Save and Publish Script.”

The integration via Script Manager will automatically place the GTM code on your selected domain and corresponding landing page(s).

Be sure to Publish or Republish your landing page(s) connected to the Google Tag Manager script for the changes to take effect.

14. Set up a Facebook page view event in the Web container. It’s important to add unique_event_ID to this tag to enable deduplication.

15. Set up a Data Tag that will transfer the pageview event to the server container. 

Create a new tag → Tag type Data Tag → Event name pageview → Add server URL. In the Event Data add unique_event_ID (the same variable that you’ve added to Facebook tag in previous step). Add a trigger. The trigger type is “Page View - DOM Ready”.

16. Send user parameters to increase the match quality of the Facebook server events. 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 Facebook match users. 

Web container template includes variables for the pre-defined Unbounce fields. To get these variables from Unbounce, you 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.

17. Set up a Facebook tag for the Lead event. 

Lead tags should trigger on a form submission event or the “Thank you” page after the form has been submitted. Do not forget to add the unique_event_id; it is required for deduplication and the user data for better event matching.

If you trigger a lead event on the “Thank you” page, then first, you need to save users’ data locally using either a custom JavaScript or the Data Tag so that it would be available on the “Thank you” page. 

To get stored user data from the local storage, you may use either custom JavaScript or the Data Variable available in the gallery.

Event ID and user data will need to be sent via both Facebook pixel and Data Tag to Facebook CAPI tag on sGTM.

18. 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 fire on the same trigger you use for the FB pixel tag; thus, event_id will be identical, and events will be deduplicated.

19. 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. To import Data Client, open sGTM container templates, click New and then Import Data client that you’ve downloaded from GitHub. Publish server container.

20. Create a new client with the type Data Client.

21. Open the preview mode of the web GTM and check that pageview and lead events of Data Tag and Facebook pixel were triggered correctly.

22. Add Facebook CAPI tag to your sGTM container and configure Facebook CAPI pageview event.

When done, Create a new tag → Tag type Facebook conversion API → Event name Pageview → Add API access token → Add Pixel ID → Add Facebook test ID → Add event ID and User Data.

This tag should trigger on a page_view event.

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

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

If you do not see server events, please make sure that the FB Test ID is correct, as it changes from time to time.

This is how you 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 reach out to our community.