Guía Implementación Consent Mode V2 con Cookiebot

0. ANTES DE EMPEZAR…

Antes de empezar, recordemos que para la implementación del Consent Mode v2 con Cookiebot no se requiere ningún tipo de plug-in ya que lo podemos hacer todo por Google tag manager a base de etiquetas y activadores.

Todas las capturas de pantalla de esta guía se sacarán de  la implementación hecha a MeMudo.

1. CREAR CUENTA EN COOKIEBOT

Nos creamos una cuenta en CookieBot con la cuenta individual del proyecto: mktmemudo@labiznagadigital.es

En el apartado Domains & Aliases, añadimos nuestro dominio correspondiente: www.memudo.net

El apartado Configuration sirve para configurar nuestro banner de cookies. Es muy importante seleccionar la legislación europea GDPR:

Luego, nos sale la pantalla de configuración del banner viendo detenidamente cada opción que se nos plantea. Esta pantalla se nos divide en 3 apartados: Diseño, Contenido y Privacidad.

En contenido tenemos que seleccionar el idioma, por defecto viene el inglés. Así que, añadimos el español.

Podemos dejar el Auto-detect language para que al usuario le aparezca en el idioma que tiene por defecto en su navegador. 

En este caso inglés o español ya que no hemos seleccionado más idiomas.

Después de esto, pasamos al siguiente paso y ya hemos terminado con la configuración de nuestro banner.

En el apartado Implementation, tenemos el ID de CookieBot que nos será importante en el siguiente paso:

¡Ya has terminado por aquí! Nos vamos a Tag Manager. Nos quedan unas cuantas etiquetas jeje…

2. GOOGLE TAG MANAGER

¡IMPORTANTE! → Antes de empezar con las etiquetas en Tag Manager…

Administrador → Configuración del contenedor → Habilitar resumen del consentimiento → Guardar

Ahora empezamos con las etiquetas

i. Etiqueta + Activador CookieBot

Creamos una etiqueta y en “tipos de etiqueta” seleccionamos:

y buscamos esta otorgándole los 4 permisos que pide:

Ya sólo nos queda añadir el ID de CookieBot y ✓ Enable Consent Mode.

Pasamos al activador:

¡¡y CookieBot Configurado!! Enhorabuena, cumples con la ley en el ecosistema Google

Pero… quedan las etiquetas que no pertenecen al ecosistema Google como son las del píxel de Facebook, LinkedIn. etc. o de herramientas como Hotjar, por ejemplo.

ii. Activador Evento Personalizado

Este es un activador que se debe aplicar a todas las etiquetas externas al ecosistema google para que no se activen sin que el usuario haya dado consentimiento.

Es un activador que se añade a los que o al que tenía la etiqueta, no sustituye.

Con este activador, ya hacemos que los píxeles y herramientas externas a Google respeten las preferencias del usuario. Sin embargo, es necesario todavía crear una etiqueta más para que estos píxeles y herramientas funcionen correctamente:

iii. HTML para activación de etiquetas externas

Etiqueta HTML a la cual le ponemos este código:

 

<script>

// Define datalayer and the gtag function.

window.dataLayer = window.dataLayer || [];

function gtag(){dataLayer.push(arguments);}

 

// Set default consent to ‘denied’ as a placeholder

// Determine actual values based on your own requirements

gtag(‘consent’, ‘default’, {

‘ad_storage’: ‘granted’,

‘ad_user_data’: ‘granted’,

‘ad_personalization’: ‘granted’,

‘analytics_storage’: ‘granted’

});

 

 

dataLayer.push({‘event’: ‘updated_cookies’});

 

</script>

 

Activadores de la etiqueta:

 

Hacemos 3 activadores, que son iguales pero cambia el “es igual a”:

Éstos son para cada botón del banner de cookies, entonces a cada uno le añadimos el Click ID correspondiente. Quedaría tal que así:

• • Clic Aceptar Cookies: CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll

• • Clic Permitir la Selección: CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection

• • Clic Rechazar Cookies: CybotCookiebotDialogBodyButtonDecline

Vista de la etiqueta:

Bueno, un paso más cerca de terminar… pero todavía te queda un poco más

iv. ETIQUETA GA4 SNIPPET

¿Para qué sirve la última etiqueta de todas? 

Esta es para que si un usuario rechaza las cookies, aun así Google Analytics pueda hacer un modelado y limite la pérdida de datos..

Vale, vamos a crearla:

Tipo de etiqueta → Google Analytics → Etiqueta de Google

Ahora, vamos a “ID de etiqueta” → clicamos el botón (la pieza de lego)

y nos queda así:

Activador: All Pages

Vale, ya solo nos queda un último paso para terminar. 

3. ÚLTIMO PASO – ¡MUY IMPORTANTE!

Al principio de la guía, en la configuración del contenedor habilitamos esto:

Esto nos sirve para que, nos salga una nueva opción en el apartado «etiquetas»:

Pulsamos, y nos sale que es para configurar el consentimiento en cada etiqueta.

Sí, lo tenemos que hacer con todas las etiquetas, no solo con las nuevas que hemos creado.

Para las etiquetas que tienen el “Consentimiento integrado” (ecosistema Google), le damos a:

A no ser, que consideremos o sepamos que necesite algún consentimiento adicional.

Para las que no lo tienen (no pertenecen el ecosistema Google), sí le tenemos que añadir un consentimiento adicional. 

Por ejemplo, a Hotjar le he añadido analytics_storage ya que es una herramienta para medir el comportamiento del usuario.

Sin embargo, al píxel de Facebook le añadiría ad_storage.

Este paso lo he dejado para el final porque no hace falta hacerlo etiqueta por etiqueta ya que se puede hacer a la vez (siempre que los consentimientos sean los mismos).

De esta manera:

¡¡¡GUÍA TERMINADA!!!

¡¡Felicidades!! Ahora lo mismo con el siguiente cliente jeje