If you are using Shopify to manage your online store and want to track conversions across your site, this guide will walk you through how to install the Teads Pixel site wide.
A two-step implementation process is recommended:
Add the Teads Pixel code to your store in Shopify using a custom code .
Configure Shopify's Customer Privacy Settings using the Customer Privacy API. This ensures that the Teads Pixel respects users' privacy choices when the code is triggered on the page.
1. Add the Teads Conversion Pixel code to your store
Shopify offers a secure sandbox environment where shop owners can implement custom pixels like the Teads Pixel. A sandbox is an isolated environment that allows scripts to run without affecting the rest of your online store, and it allows Shopify to provide an additional layer of protection for the private data of your business and its customers.
Follow the steps below to implement the Teads pixel with a custom code directly in in the Shopify pixel manager:
Go to Settings (located at the bottom-left corner of the sidebar).
Select Customer Events from the left-hand menu.
Click Add Custom Pixel.
Enter a name for your Pixel.
Expand the Permissions and Data Sale sections to configure your settings.
Under Permissions, select Marketing and Analytics, as the pixel collects data for these purposes.
In the Data Sale section, indicate that the collected data qualifies as a data sale.
Paste the snippet below into the code section, replacing `YOUR_PIXEL_ID` in the code with with the ID value of your pixel, as displayed in TAM Events Manager.
// Teads Universal Pixel - Shopify Custom Pixel Implementation
(function(w, d, s, id) {
if (w.teads_p) return;
var js, tjs = d.getElementsByTagName(s)[0];
js = d.createElement(s); js.id = 'teads-pixel-' + id;
js.async = true;
// CHANGE: Use the 'id' variable here instead of 'YOUR_PIXEL_ID'
js.src = 'https://a.teads.tv/page/' + id + '/tag';
tjs.parentNode.insertBefore(js, tjs);
w.teads_p = true;
})(window, document, 'script', 'YOUR_PIXEL_ID'); // <--- Replace this with your TAM Buyer Pixel ID
// Initialize event queue
window.teads_e = window.teads_e || [];
// Page View tracking
analytics.subscribe("page_viewed", event => {
console.log("Teads: Page viewed");
});
// Purchase tracking
analytics.subscribe("checkout_completed", event => {
var checkoutData = event.data.checkout;
// Send Purchase event to Teads with metadata
window.teads_e.push({
conversionType: "Purchase",
name: checkoutData.order.id || "Order",
price: parseFloat(checkoutData.totalPrice.amount), // Critical: parsing string to float
currency: checkoutData.currencyCode || "USD"
});
console.log("Teads Purchase event fired for order:", checkoutData.order.id);
});Click Save and Connect to complete the setup.
2. Configure Shopify Customer Privacy Settings
If you are running campaigns that use Shopify store pages as landing pages and are targeting users in the EU or UK, it’s crucial to ensure your store complies with current data privacy regulations, including the GDPR and the ePrivacy Directive. These regulations require that explicit user consent be obtained before setting any cookies beyond those strictly necessary or using third-party tracking tools, such as the Teads Pixel.
To use the Teads Pixel in the EU or UK, your Shopify store must display a cookie banner and collect user consent for conversion tracking.
If you are using a third-party or custom cookie banner, please refer to this article from Shopify for guidance on configuring it.
Note: The third-party banner must support integration with Shopify’s Customer Privacy API, as you will need to map the consent purposes it collects (Marketing, Analytics, and Data Sale) to the permissions passed through the Pixel’s custom code. These permissions are required for the pixel to track conversions in the EU and UK.
If you would like to use Shopify’s built-in cookie banner solution, follow the steps below:
Go to the Customer Privacy section in the left-hand navigation panel.
Click Cookie Banner.
Select Set up cookie banner.
Configure the banner settings according to your preferences.
In the Regions section, make sure to select Europe so the banner will be shown to users from the EU and UK, where consent is required for tracking.
Click Save to apply the settings.
Note:
Shopify offers a standard set of events that can be configured in the code for tracking purposes.
Teads has not yet tested compatibility with these default Shopify events.
This setup is only applicable for Shopify users who have upgraded to Checkout Extensibility.