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 restriction, 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.
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 Apple iOS restriction of user tracking.
All apps installed on iOS are forced to ask user permission to track their interaction with the app. Users control whether third-party apps have access to information in Contacts, Photos, Calendar, and other apps. Users can also review how apps are using the permissions they grant them.
It means that you won’t see accurate conversion numbers for your Facebook or Instagram campaigns, and custom audiences won’t collect complete data.
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 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.
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.
Here we will describe how to set up Facebook conversion for Unbounce step-by-step, including setting up Facebook 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.
3. 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 Google Tag Manager from the drop-down menu and paste in your Container ID:
4. A new window will appear with two panels: Script Details and Script Usage.
In the Script Usage panel, click which subdomain(s) you'd like to apply the Google Tag Manager integration to:
5. Click Save and Publish Script to save the changes.
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.
6. 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.
7. 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.
8. 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.
function (){
if (document.querySelector('input[name = "name"]')) {
var regex = /[a-z\s]/g;
tmp = (document.querySelector('input[name = "name"]').value.toLowerCase()).match(regex);
tmp = tmp.join("");
return document.querySelector('input[name = "name"]').value = tmp;
}
return "";
}9. Set up a Facebook tag for the Lead event. This tag should trigger on a custom event gtm.formSubmi or on the thank you page of the form submit. Do not forget to add unique_event_id that is required for deduplication and user parameters you extracted using the java script variables, the ones that we showed on a previous step.
10. 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 or on the thank you page of the form submit.
11. 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.
12. Create a new client with the type Data Client.
13. Open the preview mode of the web GTM and check that pageview and lead events of Data Tag and Facebook pixel were triggered correctly.
14. 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.
15. Set up a Lead event in the server container using the Facebook conversion API tag.
16. 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, check that Server Container is published, preview header, and Facebook test ID are correct.
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.
We can help you! Click Need assistance, and we will send you a quote.
