Implementación custom del Consent Mode

A finales del pasado año, nuestro compañero Vicente Sotés nos explicó cómo implementar Consent Mode a través de la plantilla de Simo Ahava, lo que facilita mucho dicha implementación pero que, por ahora, se limita solo a Google Tag Manager.

En este post os hablaremos de cómo realizar la implementación del Consent Mode de manera custom, lo que os permitirá más flexibilidad y además podrá adaptarse a cualquier tag manager así como inyectarlo directamente en el código de la página.

Antes de nada, comentar que, a pesar de ser algo más complejo porque requiere tirar líneas de código, estas son de lo más sencillo de desarrollar y os explico el funcionamiento a continuación.

Para empezar, tendremos que crear estas dos variables las cuales deberán comprobar en la capa de cookies correspondientes si el usuario aceptó o no las cookies de analítica y advertising.

Recordad que estas variables deberán devolver “granted” o “denied” dependiendo de la decisión del usuario.

{{ad_consent_value}}: variable que devuelve si el usuario aceptó o no las cookies de advertising.

{{analytics_consent_value}}: variable que devuelve si el usuario aceptó o no las cookies de analítica.

Una vez tengamos estas variables configuradas correctamente habrá que meter el siguiente código al inicio de la carga de cada página para controlar el estado de la capa de cookies:

Default tag

<script>

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

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

  gtag('consent', 'default', {

    'ad_storage': 'denied',

    'analytics_storage': 'denied'

  });

  if({{ad_consent_value}} == 'granted' || {{analytics_consent_value}} == 'granted') {

    gtag('consent', 'update', {

      'ad_storage': {{ad_consent_value}},

      'analytics_storage': {{analytics_consent_value}}

    });

  };

  if({{ad_consent_value}} == 'denied') {gtag('set', 'ads_data_redaction', true);};

  dataLayer.push({

    'event': 'consent_mode_loaded'

  });

</script>

Por otro lado, una vez implementada esta parte del código en la carga de la página, habría que meter la segunda parte, que se lanzaría una vez el usuario hace una actualización de la capa de cookies, ya sea porque es la primera vez que aterriza y la acepta o rechaza, o porque tras esto ha cambiado de opinión y se ha dirigido a la política de cookies para cambiar la aceptación. Es en el momento que guarda sus preferencias cuando se lanzaría el código siguiente:

Update tag

<script>

  gtag('consent', 'update', {

    'ad_storage': {{ad_consent_value}},

    'analytics_storage': {{analytics_consent_value}}

  });

</script>

Con tan solo estos dos códigos en página, tendríamos implementado el Consent Mode de manera sencilla para cualquier tag manager o código fuente de la web.

*Fuente imagen destacada: Unsplash