2.1. Convert the pixel code to dynamic JavaScript.
2.2. Adapting other tracking pixels.
1. Introduction.
In this tutorial, we 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, complying with privacy regulations.
2. Step by step.
Cool Tabs' cookie manager does not allow <script> tags, so you'll need to modify the pixel code to load via dynamic JavaScript. Some providers already offer a compatible format. If not, here's how to adapt it.
2.1. Convert the pixel code to dynamic JavaScript.
To ensure the tracking pixel only activates after the user accepts the cookie banner, replace the <script> tags from the provider 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 <script> tags with dynamic JavaScript code. Here's the updated 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 your pixel code already uses dynamic JavaScript internally, 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:
Example: TikTok tracking pixel
Here's the original HTML code for a TikTok tracking pixel:
<script>
!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=!0,o.src=i+"?sdkid="+e+"&lib="+t;
var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)};
ttq.load('CNU4MCJC77UBM7J9NJHG');
ttq.page();
}(window, document, 'ttq');
</script>
To make it compatible with the Cool Tabs cookie manager, simply remove the <script> tags, keeping the rest of the code as is. The result looks 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 only activate once the user consents to cookies.
3. Other specifications.
Add this code in Cool Tabs' cookie consent manager, where it will only execute once the user has given their 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.
How to set up tracking and conversion pixels for a campaign.
Comments
0 comments
Please sign in to leave a comment.