Iubenda logo
Genera tus documentos

Documentación

Tabla de contenidos

Modo de Consentimiento de Google: Configurar Google Tag Manager con iubenda

Modo de Consentimiento de Google: Con Google Tag Manager, puedes simplificar el proceso de configuración de etiquetas utilizando plantillas preconfiguradas creadas específicamente para tu configuración de Google Tag Manager.

En la galería de Google Tag Manager puedes elegir entre un amplio abanico de plantillas que puedes añadir con facilidad a tu instalación.

¿Tienes poco tiempo? Pasa directamente a Cómo empezar

¿Qué es Google Tag Manager?

Google Tag Manager es una potente herramienta que se utiliza para gestionar eficazmente los códigos de seguimiento de sitios web, denominados etiquetas de Google Tag Manager. Pero, ¿qué es Google Tag Manager y cómo puedes utilizarlo en tu beneficio?

¿Qué es Google Tag Manager?

Google Tag Manager es una herramienta gratuita de Google. Las etiquetas de Google Tag Manager son segmentos de código que sirven para varios fines, como recopilar datos y facilitar la comunicación entre tu sitio web o aplicación y las plataformas externas de análisis y marketing.

¿Para qué se utiliza Google Tag Manager?

Google Tag Manager se utiliza sobre todo para simplificar y centralizar la gestión de estas etiquetas en tu sitio web o aplicación. Elimina la necesidad de aplicar el código manualmente, por lo que agiliza el proceso y reduce el riesgo de errores. Es una herramienta versátil que te ayuda a gestionar y mostrar etiquetas con mayor eficacia.

Cómo utilizar Google Tag Manager:

  1. Instalación del código: Google Tag Manager proporciona un segmento de código de un contenedor específico. Inserta este código en el encabezado o en el cuerpo de tu sitio web o aplicación, según lo requieran las etiquetas que quieras implementar.
  2. Aplicación de etiquetas: Empieza a añadir etiquetas a tu contenedor. Estas etiquetas pueden incluir códigos de seguimiento para diversas herramientas, como Google Analytics, Google Ads, etc. Google Tag Manager ofrece plantillas prediseñadas para simplificar este proceso.
  3. Definición del activador: Determina cuándo y dónde deben activarse tus etiquetas creando activadores. Personaliza los activadores en función de eventos o condiciones específicos, como las interacciones de los usuarios o las páginas vistas.
  4. Creación de variables: Las variables se utilizan para almacenar y recuperar datos para etiquetas y activadores. Puedes utilizar variables existentes o crear otras personalizadas para obtener datos dinámicos.
  5. Previsualizar y depurar: Antes de realizar los cambios en directo, utiliza el modo de vista previa y depuración de Google Tag Manager para probar tus etiquetas y garantizar que funcionan correctamente.
  6. Publica tu contenedor: Cuando estés satisfecho con la configuración y las pruebas, publica tu contenedor. De esta forma los cambios se aplicarán en tu sitio web o aplicación.

Cómo configurar Google Tag Manager

Importante

En concreto, esta guía explica cómo integrar el Modo de Consentimiento de Google con la plantilla de la Privacy Controls and Cookie Solution de iubenda. No obstante, si prefieres configurar el Modo de Consentimiento de Google sin utilizar la plantilla, puedes seguir esta guía.

Si quieres simplificar el bloqueo de cookies y rastreadores utilizando Google Tag Manager junto con la función de bloqueo automático, es importante que tengas en cuenta que el código relacionado no se puede cargar directamente a través de Google Tag Manager. Sin embargo, puedes consultar la siguiente guía para agilizar el proceso de bloqueo de cookies con Google Tag Manager.

Con la plantilla de Google Tag Manager, puedes automatizar las siguientes tareas:

  1. Añadir el script del banner de cookies a tu sitio web.
  2. Gestionar automáticamente el Modo de Consentimiento de Google para las etiquetas que son compatibles de forma nativa con el Modo de Consentimiento de Google, como Google Analytics, AdSense, Floodlight y Conversion Linker. Actualmente, la plantilla te permite gestionar el consentimiento previo para etiquetas HTML personalizadas mediante la función “comprobaciones de consentimiento adicionales” en unos sencillos pasos.

Cómo empezar

Primero, tienes que crear una cuenta en Google Tag Manager y configurar un contenedor.

account setup

A continuación, deberás pegar el segmento de Google Tag Manager en la sección <head> de tu sitio web.

gtm installation

Finalmente, llegarás al panel de Google Tag Manager.

Añadir la plantilla de la Privacy Controls and Cookie Solution de iubenda

En el panel de control, haz clic en Añadir una nueva etiqueta.

new tag

A continuación, haz clic en el área de configuración de etiquetas, selecciona “Descubre más tipos de etiquetas en la Galería de Plantillas de la Comunidad”, haz clic en el icono de la lupa y busca: iubenda

Selecciona “Privacy Controls and Cookie Solution de iubenda” y haz clic en “Añadir al espacio de trabajo” para añadirlo a tu instalación de Google Tag Manager.

Importar la plantilla

Antes de configurar la plantilla, tienes que importarla. Te explicamos cómo:

  1. Descarga la plantilla desde aquí
  2. En tu dashboard de Google Tag Manager, haz clic en Plantillas
  3. En Plantillas de etiquetas, haz clic en “Nueva”.
  4. Haz clic en el icono de los tres puntos de la parte superior derecha de la página y selecciona Importar.
  5. Descomprime el archivo que has descargado y selecciona el archivo template.tpl de la carpeta
  6. Haz clic en Guardar en la parte superior derecha de la página y cierra el editor de plantillas

Añadir la etiqueta

Una vez de vuelta en el dashboard, haz clic en Añadir una nueva etiqueta.

A continuación, haz clic en el área de configuración de etiquetas, desplázate hasta la sección Personalizado y haz clic en Privacy Controls and Cookie Solution de iubenda para añadirla a tu instalación de Google Tag Manager.

Configuración de la etiqueta

Cuando hayas añadido la plantilla, llegarás a la página de configuración de etiquetas.

Aquí tendrás que:

1. Establecer las opciones de consentimiento por defecto

Los valores predeterminados se configuran como Denegados para garantizar la mejor protección de la privacidad de tus usuarios. 

Recomendamos actuar con extrema cautela al modificar dichos parámetros para garantizar que se ajustan a las mejores prácticas para obtener el consentimiento del usuario mediante una acción positiva.
Para obtener más información sobre los tipos de consentimiento, puedes consultar la documentación oficial de Google aquí.

Parámetros opcionales

  • El paso de información en la URL es un parámetro opcional, que resulta útil para mejorar la calidad de tus mediciones cuando ad_storage se indique como denegado (con fines de segmentación y publicidad). Puede utilizarse para enviar estadísticas basadas en eventos y sesiones (incluidas las conversiones) sin cookies a través de las páginas. 
  • La redacción de datos de anuncios es un parámetro que permite redactar los identificadores de clics en anuncios enviados en solicitudes de red por Google Ads y Floodlight cuando ad_storage se indique como denegado

Puedes consultar la documentación oficial de Google Tags para obtener más información sobre estos parámetros.

2. Incrustación de la Privacy Controls and Cookie Solution

En esta parte del proceso, puedes incrustar la Privacy Controls and Cookie Solution directamente dentro de la etiqueta (opción recomendada) o manualmente.

Incrustación automática

Si eliges incrustar la Privacy Controls and Cookie Solution directamente a través de la plantilla, tienes que copiar el código de incrustación de la sección de incrustación de la Privacy Controls and Cookie Solution de iubenda y pegarlo en el cuadro de configuración de la plantilla.

cs codeincrustar código cs

Como podrás observar, el código que se debe pegar es ligeramente diferente del código incluido en tu página de incrustación de iubenda.

El motivo es que en esta sección solo debe rellenarse la parte de configuración (_iub.csConfiguration) del código de incrustación mostrado.

Te mostramos un ejemplo de las partes que no debes pegar en la casilla (tachadas)

<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = 
{"ccpaAcknowledgeOnDisplay":true,
"ccpaAcknowledgeOnLoad":true,
"ccpaAppliesToEntireUSA":true,
"consentOnContinuedBrowsing":false,
"countryDetection":true,
"enableCcpa":true,
"gdprAppliesGlobally":false,
"lang":"it",
"perPurposeConsent":true,
"siteId":2398592,
"whitelabel":false,
"cookiePolicyId":55062451, 
"banner":{ "acceptButtonDisplay":true,
"backgroundColor":"#FF0000",
"closeButtonDisplay":false,
"customizeButtonDisplay":true,
"logo":null,
"position":"float-top-center",
"rejectButtonDisplay":true }}
;
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/ccpa/stub.js"></script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Incrustación manual

También puedes incrustar manualmente el código de la Privacy Controls and Cookie Solution. Para ello, tienes que seguir el método de incrustación estándar descrito enesta guía.

❗️ Para asegurarte de que este método funciona correctamente, recuerda añadir el parámetro: "googleConsentMode": "template" a la configuración de tu Privacy Controls and Cookie Solution.

Por último, puedes elegir el canal de la Privacy Controls and Cookie Solution (Beta, Actual, Estable). 

Configuración avanzada

En esta sección se pueden configurar algunos ajustes avanzados, como la prioridad de activación de etiquetas, la secuenciación de etiquetas y los ajustes avanzados de consentimiento. Ten en cuenta que no es necesario editar estos ajustes para que la plantilla funcione, así que si no estás familiarizado con ellos, puedes ignorarlos. 

3. Activación

Después de configurar la etiqueta, tienes que configurar el activador para que la etiqueta se active. 
Puedes seleccionar “Inicialización del consentimiento – Todas las páginas” como activador.

triggering

Publicar el contenedor

Una vez completada la configuración, pulsa el botón Guardar situado en la parte superior derecha de la página. La etiqueta ya está lista para ser publicada.

Desde el dashboard de Google Tag Manager, haz clic en Enviar en la parte superior derecha de la página:

Por último, añade un nombre de versión y una descripción, haz clic en Publicar, ¡y listo! La etiqueta ya está en funcionamiento, perfectamente integrada en nuestra Privacy Controls and Cookie Solution.

Cómo controlar las cookies

Comprobaciones de consentimiento integradas

Las etiquetas como Google Ads, Analytics, Floodlight y Conversion Linker tienen comprobaciones de consentimiento integradas. Son compatibles de forma nativa con el Modo de Consentimiento de Google.

Esto implica que estas etiquetas poseen un mecanismo que altera su funcionalidad en respuesta al estado de consentimiento del usuario.

Ten en cuenta que no es necesario configurar el consentimiento para este tipo de etiquetas.

Puedes simplemente asignar el activador “Todas las páginas” a las etiquetas que tienen comprobaciones de consentimiento integradas como Google Ads, Google Analytics, Floodlight o Conversion Linker

Ejemplo:

gtm tags

Comprobaciones de consentimiento adicionales

Las etiquetas que participan en el seguimiento pero que no son compatibles con las comprobaciones de consentimiento integradas deben establecerse utilizando comprobaciones de consentimiento adicionales. Por ejemplo, si utilizas una etiqueta HTML personalizada, esta es la función adecuada para ti si quieres liberar una etiqueta después de que se haya prestado el consentimiento.

El siguiente procedimiento es válido para las etiquetas de Google Tag Manager que no admiten de forma nativa el Modo de Consentimiento de Google (por ejemplo, etiquetas HTML personalizadas para incrustar el píxel de Facebook, Hotjar u otros scripts personalizados).

Primer paso: Añade el parámetro "emitGtmEvents":true al script Privacy Controls and Cookie Solution;

En el siguiente ejemplo, creamos una etiqueta HTML personalizada con un script Hotjar (pero puede ser cualquier otro script como el píxel de Facebook, etc.)

Ejemplo:

gtm html custom

A continuación, vamos a configurar el bloqueo previo mediante las comprobaciones de consentimiento adicionales del Modo de Consentimiento de Google

  1. En Configuración del consentimiento → selecciona “Requerir consentimiento adicional para que la etiqueta se active” y puedes elegir una finalidad, por ejemplo "analytics_storage"

    Aquí tienes la lista de finalidades admitidas:

    Finalidad Tipo(s) de consentimiento de Google Descripción
    Funcionalidad functionality_storage Apoya la funcionalidad del sitio web o de la aplicación, por ejemplo, guardando los ajustes de idioma.
    security_storage Protege a los usuarios activando funciones de seguridad como la autenticación y la prevención del fraude.
    Experiencia personalization_storage Mejora la experiencia del usuario personalizando funciones, como las recomendaciones de vídeos.
    Medición analytics_storage Recoge datos (como cookies) con fines estadísticos, por ejemplo, seguimiento de la duración de la visita.
    Marketing ad_storage Almacena datos con fines publicitarios.
    ad_user_data Permite enviar a Google datos del usuario relacionados con la publicidad.
    ad_personalization Permite la publicidad personalizada ajustando los anuncios en función de las preferencias del usuario.
    gtm additional consent
  2. Tenemos que añadir asignar un activador específico a la etiqueta, en lugar de “Todas las páginas”. Este activador es iubenda_gtm_consent_event

Solo tienes que crear un evento personalizado con las siguientes propiedades:

gtm trigger configuration

Nota: cuando cambian las preferencias del usuario, la Privacy Controls and Cookie Solution envía el evento iubenda_gtm_consent_eventa Google Tag Manager

Así se configura el bloqueo previo para la etiqueta

Qué tener en cuenta con los usuarios de Estados Unidos: la necesidad de respetar la autoexclusión

La explicación de las comprobaciones de consentimiento integradas y adicionales también es válida en este caso. Si habilitas las leyes de Estados Unidos en el configurador de la Privacy Controls and Cookie Solution, el comportamiento por defecto para un usuario de Estados Unidos es que la Solución de Cookies establezca todas las finalidades del Modo de Consentimiento de Google como “concedidas“.

Nota: Si estás en un plan “Gratuito”, lo anterior se produce si desactivas el RGPD y aplicas solamente las leyes de Estados Unidos. Alternativamente, si quieres aplicar el RGPD para los usuarios de la Unión Europea y las leyes de Estados Unidos para los usuarios de este país, necesitarás como mínimo contar con el plan “Advanced”.

Cuando el usuario opta por autoexcluirse de una finalidad específica según las leyes de Estados Unidos, ajustamos la configuración de “ad_storage” y “analytics_storage” en consecuencia.

En particular:

ad_storage‘ se concede cuando el usuario no se ha autoexcluido de ninguna de las siguientes finalidades de derechos de privacidad de Estados Unidos o cuando no resulten relevantes (por ejemplo, no se aplican los derechos de privacidad de Estados Unidos):

  • Venta de mi información personal (finalidades)
  • Compartir mi información personal (finalidades)
  • Tratamiento de mi información personal para publicidad personalizada (finalidades)

analytics_storage‘ se establece como concedido cuando el usuario o bien no se ha autoexcluido de la finalidad de Estados Unidos “Venta de mi información personal” (finalidades) o bien cuando no resulten relevantes (por ejemplo, no se aplican los derechos de privacidad de Estados Unidos):

Desbloquea funciones adicionales con un solo clic 👉 ¡Pasa ya al plan Advanced!

Aplica las leyes de Estados Unidos solamente para los usuarios de Estados Unidos y utiliza todas las funciones de iubenda

Desbloquea ahora →

Cómo configurar la plantilla de Google Tag Manager de iubenda para sitios multilingües

Si gestionas un sitio web multilingüe y estás implementando el Modo de Consentimiento de Google con la plantilla de Google Tag Manager de iubenda, es fundamental que garantices que tu banner de consentimiento de cookies se adapte a los distintos idiomas. A continuación te explicamos cómo puedes configurar la plantilla de Google Tag Manager de iubenda para sitios multilingües:

Área de texto de configuración de Privacy Controls and Cookie Solution

En el primer área de texto relacionado con la configuración de Privacy Controls and Cookie Solution, inserta el JSON del script principal, que también se utilizará como fallback. Sin embargo, es importante eliminar el parámetro “lang” de este script. Este script puede contener los parámetros siteID y cookiePolicyId.

Área de texto de configuración del idioma de Privacy Controls and Cookie Solution

En el área de texto de configuración del idioma de Privacy Controls and Cookie Solution, inserta el código de idioma inicial y, si es posible, solo el cookiePolicyId que identifica el idioma en la configuración. No incluyas el parámetro “lang” en esta configuración.

Te mostramos un ejemplo:

gtm multilingual configuration

Cómo funciona:

  • Privacy Controls and Cookie Solution detecta el idioma correcto a partir del código HTML de la página (atributolang en la etiqueta <html> ).
  • Si el atributo no está disponible, utiliza la lengua principal establecido en el navegador del usuario.
  • Si ambos no están disponibles, el idioma por defecto es el inglés.

Ver también