2.1. Convertir la huella de script a JavaScript dinámico.
2.2. Adaptación de otras huellas.
1. Introducción.
En este tutorial te mostramos cómo configurar una huella de seguimiento para que solo se active cuando el usuario acepta la política de cookies en el gestor de cookies de Cool Tabs, cumpliendo así con las normativas de privacidad.
2. Paso a paso.
El gestor de cookies de Cool Tabs no permite el uso de etiquetas <script>, por lo que tendrás que modificar el código de la huella para realizar la carga mediante JavaScript dinámico.
Algunos proveedores ya ofrecen un formato compatible. En caso contrario, a continuación explicamos cómo adaptarlo.
2.1. Convertir la huella de script a JavaScript dinámico.
Para que la huella se active solo cuando el usuario acepta el banner de cookies, hay que reemplazar las etiquetas <script> del proveedor con un script de carga dinámica en JavaScript.
Lo vemos con un ejemplo.
Ejemplo: Huella de Teads
Un ejemplo de código HTML de huella de Teads típico podría verse así:
<!-- Este código debe colocarse en la etiqueta <head> -->
<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>
Para que esta huella se ejecute solo con la aceptación del usuario, hay que reemplazar las etiquetas <script> con código JavaScript dinámico. Así quedaría el nuevo código, compatible con el gestor de cookies de Cool Tabs:
// Crear un nuevo elemento de script de manera dinámica
var script = document.createElement('script');
// Especificar la URL del script y activar la carga asíncrona
script.src = "https://p.teads.tv/teads-fellow.js";
script.async = true;
// Añadir el script a la etiqueta <head> del documento
document.head.appendChild(script);
// Configurar las variables de la huella
window.teads_e = window.teads_e || [];
window.teads_buyer_pixel_id = 12084;
2.2. Adaptación de otras huellas.
Si el código de tu huella ya usa JavaScript dinámico internamente, solo será necesario eliminar las etiquetas <script> y copiarlo en el gestor de cookies.
Lo vemos con un ejemplo de huella de TikTok:
Ejemplo: Huella de TikTok
Código original HTML de TikTok:
<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>
Para hacerlo compatible con el gestor de cookies de Cool Tabs, solo hay que eliminar las etiquetas <script>, manteniendo el resto tal cual. El código quedaría así:
!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)
};
// Activar la huella y registrar una vista de página
ttq.load('CNU4MCJC77UBM7J9NJHG');
ttq.page();
}(window, document, 'ttq');
Siguiendo estos pasos, las huellas solo se activarán cuando el usuario acepte el uso de cookies.
3. Otras especificaciones.
Este código debes añadirlo en el gestor de consentimiento de cookies de Cool Tabs, desde donde se ejecutará únicamente cuando el usuario dé su consentimiento.
Si tienes dudas, contáctanos en help@cool-tabs.com.
4. Contenido relacionado.
Cómo añadir un popup de aceptación de cookies y huellas en tu campaña.
Cómo configurar las huellas de seguimiento y conversión de una campaña.
Comentarios
0 comentarios
Inicie sesión para dejar un comentario.