Implement Meta Conversions API Program via ATS for Web
You can integrate an ATS for Web configuration with the Meta Conversions API Program to collect online event data and send them to the Meta systems. You can use the event data to perform campaign measurement or ad targeting optimization for Facebook ads.
In this article, you will learn how to configure the events you want to send to the Meta CAPI. The event data can be collected via CSS selectors, URL, or data layer detection. A data layer is a JavaScript object that is used to pass information from your website to your tag management solutions.
Make sure you have fulfilled the requirements for setting up Meta CAPI before you get started. To learn more about the requirements, see "Meta Conversions API".
Set Up ATS for Web to Send Event Data
The procedure below is a direct continuation of the steps from "Set Up Meta Conversions API Program Integration in Console".
Under “Event information”, select if you want to “Signify the event as a test”. When you enable this option, you can enter a code generated from Meta’s test event tools that can be used to distinguish the test event from other events. To learn more, see Meta's article "Test Events Tools".
Select if you want to “Use IAB U.S. Privacy String”. When enabled, ATS will send an opt out signal to Meta and exclude the event for ads delivery optimization.
Next, you must specify the events you want to send. Under ‘Events List’, click
.Enter an Event Name and select the Event Type.
(Optional) If the predefined standard events aren't suitable for your needs, you can select Custom Event as the event type. When selected, you must enter the name of the custom event in the Custom Event field.
(Optional) If your website is leveraging data layer run by Google Tag Manager or Adobe Analytics, you can enable Data Layer Detection. If you enable this option, all parameters in this event will be obtained through data layer detection by default.
Note
The data layer detection functionality currently supports data layer run Google Tag Manager and Adobe Analytics. To learn more, see Google's article "The data layer" or Adobe's article "Create a data layer".
After enabling this feature, call the
ats.detectDataLayerEvents()
function when you know the event data have been stored on data layer. Make sure to call the function on every single page where you want ATS.js to detect the event.Enable event deduplication to eliminate duplicate events sent to Meta. Check Add Event ID and select how the Event ID should be obtained, and for which identifier. In the example below, we are using the Order Number as the Event ID.
Note
CSS selector allows you to obtain the parameter by targeting a specific HTML element in your page. We recommend using only ID selector to limit errors. For example; #product-value, #ItemValue
Alternatively, you can provide a URL parameter which is added at the end of a URL after the ‘?’ symbol. For example; currency, product-currency
If you selected the Purchase Event type, you must provide additional parameters under Required Custom Data for the ‘Currency’ and ‘Value’ and choose how to obtain them. Select URL or CSS Selector for each parameter and provide the required data.
(Optional) Select Add Customer information to include additional parameters based on customer’s information. Click the plus button to add another parameter or select the minus button to remove.
(Optional) You can add standard parameters defined by Meta in the Standard Data Parameters section which include order ID, content type, content name, and others. For example, you can configure a purchase event that's only fired when a particular product is purchased from your website. The more parameters you add, the more accurate the data Meta will receive.
You can also add your own Custom Properties, which can be used for both custom events or standard events, to further define custom audiences. When this option is enabled you can define your desired property and, if using the CSS selector method, configure the value of the property.
Set up the Trigger event to decide when the events should be sent. Select Automatically to have it sent every time the event happens, or Manually by creating an API call when all event data are available on the page.
Automatically (recommended): Events are automatically sent at the end of each user session. This can be either when the user closes the page or switches tabs.
Manually: You trigger the JavaScript function when you know all information is obtained. This can be done by calling
ats.sendFbEvents(['name_of_event'])
, where'name_of_event'
should be replaced with the event name you provided in step 4.
Note
For non-purchase events such as 'Add to Cart', Account 'Creation', and others, we recommend setting up a trigger event only on some pages to make sure they are not fired on every page load.
Specify to have the trigger added to all pages by selecting Always, or in specific pages by selecting On Some Pages. If you choose the latter, you need to provide the page URL and a domain identifier to specify when the module should start detection to obtain all conversion data from the page. Click the plus button to add multiple pages.
Click
.If you enabled Data Layer Detection (see step 6), in the Events List, click the three-dotted icon corresponding to the event you've just created and click Get Snippet. Copy the JavaScript code displayed to obtain the data layer specifications needed to push the event.
Once you are done with setting up the events, you may want to verify if your setup is working correctly in Meta Events Manager. After you start sending events, you should be able to verify them within 20 minutes.
To see an overview of event data delivered to Meta, log in to Events Manager and click the Data Sources tab.