1. Introducción.
En este tutorial, te mostramos cómo configurar una huella de seguimiento, en la edición de tu campaña, para que solo se active cuando el usuario acepta la política de cookies en el gestor de cookies de Cool Tabs. Esto permite que las huellas cumplan con las normativas de privacidad y respeten la decisión del usuario.
2. Paso a paso.
Debes tener en cuenta que 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.
Algunos proveedores ya ofrecen un formato compatible, pero en caso contrario, aquí explicamos cómo adaptar el código para este entorno.
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, debemos reemplazar las etiquetas <scritp> proporcionadas por el proveedor con un script de carga dinámica en JavaScript.
Lo vemos con un ejemplo.
Ejemplo: Huella de Teads
Un ejemplo de código HMTL 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 hacer que esta huella se ejecute solo con la aceptación del usuario, hay que reemplazar las etiquetas <script> con un código JavaScript dinámico.
Así quedaría el nuevo código JavaScript, 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 tienes un código de huella que ya es compatible con este formato, solo será necesario eliminar las etiquetas <script> y copiarlo en el gestor de cookies.
Lo vemos con un ejemplo con un código 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 eliminamos las etiquetas <scritp>, 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 en el sitio web.
3. Otras especificaciones.
Este código debes agregarlo en el gestor de consentimiento cookies de Cool Tabs, y solo se ejecutará cuando el usuario dé su consentimiento.
Si tienes dudas, puedes contactarnos en el email 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.