It is advisable to implement both the Teads Universal Pixel and its conversion events using the Teads Advertiser Pixel Template within Google Tag Manager (GTM).
For more information, refer to our guides below for:
The information and examples provided below are meant for users who choose to implement conversion events directly into the HTML of their website through hard coding.
Triggering the event code tag only when the conversion action takes place
To ensure accurate tracking of conversion events in Teads Ad Manager, it is crucial that the event is triggered only when the intended action occurs on the website. The following examples demonstrate how to achieve this for two common use cases:
Triggering the event on a specific element click (e.g., when a user clicks the "Add to Cart" button).
Activating the event when a website element becomes visible (e.g., when a user scrolls down to a form on the page).
Implementation examples:
Example: Triggering an event after clicking on the “Add To Cart” button
Example: Triggering an event after clicking on the “Add To Cart” button
Start by identifying the element of the website that you want to link with the click action trigger. For an "Add to Cart" button, you can achieve this by navigating to the page containing the button using your web browser. Right-click on the button and choose "Inspect" from the options menu.
The browser console will open, highlighting the portion of the website's code that corresponds with the chosen element.
Find the ID attribute of the element (e.g., the "Add to Cart" button). This value is unique to the element, and no other buttons or HTML tags should share this identifier:
Copy the value of the ID (in this case, the button ID), which, for example, is ProductSubmitButton-template. In this example, the secondary portion of the ID is unique for each product page, while the initial part remains consistent across the entire site. For the purpose of configuring the event code to function on all product pages, exclude the secondary portion of the value (e.g., 16410742522035). Ensure that the chosen ID value aligns with the intended event use and your website's configuration.
Using the ID of your website's clickable element (as identified in the previous steps), insert the javascript code provided below in your website's html code, just after the code of “Add To Cart” button. Note that you must use the value of the ID you identified in the previous steps to replace all instances of ProductSubmitButton-template in the script:
<script>
const button = document.querySelector('[id*="ProductSubmitButton-template"]');
button.addEventListener('click', () => {
const script = document.createElement('script');
script.innerHTML = `
window.teads_e.push({
conversionType: "AddToCart",
name: "Navy Blue Shirt",
price: 59.90,
currency: "USD"
});
`;
document.body.appendChild(script);
});
</script>Note that the first line of the script:
const button = document.querySelector('[id*="ProductSubmitButton-template"]');uses a query to find IDs that contain the provided value (e.g. the various add to cart buttons across different product pages). For event implementations that are intended to be triggered by a unique element, the line should be replaced with:
const button = document.getElementById('ProductSubmitButton-template');which will require an exact match for the ID value provided for the trigger.
Important: For implementations using metadata values (e.g. name, price, currency), these values must be dynamically replaced by the appropriate values from your website's data layer. Refer to this documentation for instructions on how to create a data layer for your site.
Example: Triggering an event after an element becomes visible
Example: Triggering an event after an element becomes visible
Start by identifying the element of the website that you wish to associate with the visibility trigger. This element will be used to trigger your conversion event when it becomes visible on the user's display. Common choices for this purpose include contact forms, images, videos, and specific HTML tags. In this example, we will use a subscribe button located at the bottom of a page to trigger a ViewContent event.
Navigate to the page containing the element using your web browser. Right-click on the desired element, and from the options menu, select "Inspect."
The browser console will then open, highlighting the section of the website's code that corresponds to the selected element.
Identify the ID attribute of the element (in this example, ContactFooter). This value is unique to the element, and no other buttons or HTML tags should share this identifier.
Using the ID of the element (as identified in the previous steps), insert the javascript code provided below in your website's html code, just after the code of the relevant website element. Note that you must use the value of the ID you identified in the previous steps to replace all instances of ContactFooter in the script:
<script>
const heading = document.getElementById('ContactFooter');
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const script = document.createElement('script');
script.innerHTML = `
window.teads_e.push({
conversionType: "ViewContent",
name: "Display Newsletter Form",
price: 5.00,
currency: "USD"
});
`;
document.body.appendChild(script);
}
});
}, {
rootMargin: '0px 0px 300px 0px'
});
observer.observe(heading);
</script>
Important: For implementations using metadata values (e.g. name, price, currency), it is essential to dynamically replace these values with the appropriate data from your website's data layer. Refer to this documentation for instructions on how to create a data layer for your site.
Testing events prior to implementation
Refer to the steps below to test a conversion event code before implementation and ensure that the JavaScript functions as intended without modifying the website's code:
Ensure that the Teads Pixel Helper is installed in your browser.
Open the page where the event will take place, and right click on the element of the website that you wish to associate with the trigger action.
Select "Inspect" from the options menu, and go to the Console tab.
Paste the javascript code for the event you wish to test (as per the instructions in the examples above), without including the <script> and </script> tags. For implementations using metadata values (e.g. name, price, currency), these values must be dynamically replaced by the appropriate values from your website's data layer. Refer to this documentation for instructions on how to create a data layer for your site
Press ENTER. The console should display as "undefined".
Without refreshing the page, complete the action that is intended to trigger the conversion event, and open the Teads Pixel Helper to verify that the event has been triggered:
