1. Introduction.
In this tutorial, we'll show you how to set up a tracking pixel in your campaign so it only activates when the user consents to cookies in Cool Tabs' cookie manager. This configuration allows tracking pixels to comply with privacy regulations and respects the user's choice.
2. Step by step.
Please note that Cool Tabs' cookie manager does not allow <script> tags, so you'll need to modify the pixel code to load using JavaScript. Some providers offer a compatible format already, but if not, here’s how to adapt the code.
2.1 Convert the pixel code to dynamic JavaScript.
To ensure the tracking pixel activates only after the user accepts the cookie banner, we’ll replace the <script> tags provided by the vendor with a dynamic JavaScript script.
Let’s see how with an example.
Example: Teads tracking pixel
Here’s an example of a typical Teads HTML tracking pixel:
<!-- This code should be placed in the <head> tag -->
<script type="text/javascript" src="https://p.teads.tv/teads-fellow.js" async="true"></script>
<script>
window.teads_e = window.teads_e || [];
window.teads_buyer_pixel_id = 12084;
</script>
To make this pixel execute only with user consent, replace the <acript> tags with a dynamic JavaScript code.
Here’s the new JavaScript code, compatible with the Cool Tabs cookie manager:
// Dynamically create a new script element
var script = document.createElement('script');
// Set the script URL and enable async loading
script.src = "https://p.teads.tv/teads-fellow.js";
script.async = true;
// Add the script to the document's <head> tag
document.head.appendChild(script);
// Set the tracking pixel variables
window.teads_e = window.teads_e || [];
window.teads_buyer_pixel_id = 12084;
2.2 Adapting other tracking pixels.
If you have a tracking pixel code already compatible with this format, you only need to remove the <script> tags and paste it directly into the cookie manager.
Let’s look at an example with a TikTok tracking pixel code:
Example: TikTok tracking code
Here’s the original HTML code for a TikTok tracking pixel:
To make this compatible with the Cool Tabs cookie manager, simply remove the <script> tags, keeping the rest of the code as is.
The code would look like this:
!function (w, d, t) {
w.TiktokAnalyticsObject=t;
var ttq=w[t]=w[t]||[];
ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"],
ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};
for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);
ttq.instance=function(t){
for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);
return e;
};
ttq.load=function(e,n){
var i="https://analytics.tiktok.com/i18n/pixel/events.js";
ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,
ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};
var o=document.createElement("script");
o.type="text/javascript";
o.async=true;
o.src=i+"?sdkid="+e+"&lib="+t;
var a=document.getElementsByTagName("script")[0];
a.parentNode.insertBefore(o,a);
};
// Activate the pixel and log a page view
ttq.load('CNU4MCJC77UBM7J9NJHG');
ttq.page();
}(window, document, 'ttq');
Following these steps, tracking pixels will activate only after the user consents to cookies on the website.
3. Other specifications
You should add this code in Cool Tabs' cookie consent manager, and it will only execute once the user has provided consent.
If you have any questions, contact us at help@cool-tabs.com.
4. Related content.
How to add a cookie and tracking consent popup to your campaign.
Comments
0 comments
Please sign in to leave a comment.