Iubenda logo
Genera tus documentos

Documentación

Tabla de contenidos

Cómo utilizar Google Tag Manager para simplificar el bloqueo de cookies

Ten en cuenta lo siguiente:

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.

A continuación, te explicaremos cómo integrar Google Tag Manager con laPrivacy Controls and Cookie Solution de iubenda para la Ley de Privacidad de los Consumidores de California (CCPA), elReglamento General de Protección de Datos (RGPD) y el consentimiento por categoría.

Importante

El uso de Google Tag Manager es muy recomendable, ya que simplifica considerablemente la adopción de los requisitos de la Ley de Cookies. Sin embargo, solo es eficaz para los scripts que no sean “de posición”. Los scripts que no son “de posición” son todos aquellos que no visualizan un elemento concreto en un lugar determinado de la página. Es decir, puedes utilizar esta solución para todas las herramientas de estadísticas, pero no para banners de AdSense, vídeos de Youtube, botones sociales o widgets.

Definiciones que tener en cuenta:

Google Tag Manager: contenedor, etiqueta y activador

Consulta la documentación oficial de Google para obtener más información sobre Google Tag Manager. Dicho esto, ¡empecemos el tutorial!

Crea una cuenta y configura un contenedor

Para empezar a utilizar Google Tag Manager, tendrás que crear una cuenta gratuita y configurar un contenedor.

crear una cuenta y un contenedor

Crea la etiqueta

Una vez creado el contenedor, podemos pasar a la creación de la etiqueta. La etiqueta representa el script que solo se activará según unas reglas determinadas, en nuestro caso el consentimiento del usuario al uso de cookies.

La etiqueta que crearemos estará relacionada con Google Analytics 4:

Google Tag Manager - Crear una etiqueta

Haz clic en la ventana de configuración de etiquetas , como se ve en la imagen siguiente:

Google Tag Manager - Crear una etiqueta

Selecciona el tipo de etiqueta Google Analytics: configuración de GA4.

Tipo de etiqueta Google Analytics: configuración de GA4
A continuación, introduce el ID de medición (por ejemplo, G-A2ABC2ABCD) de tu propiedad Google Analytics 4.

ID de medición de Google Analytics: configuración de GA4

Ahora puedes establecer las reglas para la activación de la etiqueta. Te mostramos cómo 👉

Establece reglas para la activación de la etiqueta

Después de haber rellenado los parámetros anteriores, se deben configurar los activadores (es decir, las reglas que permiten que se activen los scripts):

  1. iubenda_consent_given o, si has activado la función de consentimiento por categoría en tu Privacy Controls and Cookie Solution, iubenda_consent_given_purpose_1...5
  2. iubenda_preference_not_needed
  3. iubenda_ccpa_opted_out
  4. Si has activado el software USPR, iubenda_consent_given_purpose_s, iubenda_consent_given_purpose_sh, iubenda_consent_given_purpose_adv e iubenda_consent_given_purpose_sd8
Google Tag Manager y el Modo de Consentimiento

Si has activado el Modo Consentimiento de Google, sáltate este paso y pasa a la instalación.

1.1 iubenda_consent_given

Haz clic en la sección “Activadores” que aparece a continuación:

Activador de la etiqueta Google Analytics: configuración de GA4

Después, haz clic en el signo más de la parte superior derecha para añadir un nuevo activador. Ahora, en la ventana de configuración del activador, selecciona Evento personalizado (nota: asegúrate de NO seleccionar “Todas las páginas” como activador).

Google Tag Manager - Evento personalizado

Para el nombre del evento introduce el siguiente valor: iubenda_consent_given. De esta forma, se pondrá en marcha el activador para todos los eventos personalizados etiquetados como consentimiento otorgado (consent_given).

Guarda el activador haciendo clic en Guardar:

Crear un activador

1.2 iubenda_consent_given_purpose_1…5

Si has activado la función de consentimiento por categoría en tu Privacy Controls and Cookie Solution, en lugar del evento iubenda_consent_given, tendrás que crear un evento personalizado para cada finalidad que muestres en tu banner/política de cookies (con la excepción de la finalidad “Necesarios”).

Si no tienes claro a qué propósito/categoría pertenecen los servicios que funcionan en tu sitio web, puedes simplemente hacer referencia a los subapartados a los que pertenecen en tu política de cookies de iubenda.

Aquí tienes las 5 finalidades (y los valores de los eventos personalizados):

  1. Necesarios (no es necesario crear un evento personalizado)
  2. Funcionalidad (iubenda_consent_given_purpose_2)
  3. Experiencia (iubenda_consent_given_purpose_3)
  4. Medición (iubenda_consent_given_purpose_4)
  5. Marketing (iubenda_consent_given_purpose_5)

Como Google Analytics forma parte de la categoría “Estadísticas” incluida en la finalidad “Medición”, tendrás que crear un evento personalizado con el siguiente valor: iubenda_consent_given_purpose_4. De esta forma, se pondrá en marcha el activador para todos los eventos personalizados etiquetados como consentimiento otorgado finalidad 4 (consent_given_purpose_4).

Crear un activador

Para las leyes de privacidad de los estados de Estados Unidos, utiliza los siguientes eventos:

  1. iubenda_consent_given_purpose_s: vender mi información personal
  2. iubenda_consent_given_purpose_sh: compartir mi información personal
  3. iubenda_consent_given_purpose_adv: tratar mi información personal para publicidad personalizada
  4. iubenda_consent_given_purpose_sd8: tratar mis datos de localización geográfica precisa

Cuando hayas terminado, guarda el activador como de costumbre.

2. iubenda_preference_not_needed

Utiliza el mismo procedimiento para crear otro evento personalizado llamado iubenda_preference_not_needed, que se activará siempre que no se necesite una preferencia (por ejemplo, con los valores gdprApplies:false, o gdprAppliesGlobally:false, countryDetection:true y si el usuario tiene su sede fuera de la Unión Europea):

Google Tag Manager - configuración del activador iubenda_preference_not_need

3. iubenda_ccpa_opted_out

Si se te resulta de apliación la CCPA y, como en este caso, la etiqueta/servicio se considera una venta, debe desactivarse cuando el usuario opte por la exclusión voluntaria. Para ello, tendrás que crear una excepción llamada iubenda_ccpa_opted_out.

Antes de crear este evento, tendrás que definir un filtro al respecto. Haz clic en Variables y después en Nueva (junto a Variables definidas por el usuario). Llámala iubenda_ccpa_opted_out, haz clic en el cuadro Configuración de la variable y elige Variable de capa de datos, utiliza iubenda_ccpa_opted_out como Nombre de variable de capa de datos y selecciona Versión 2 como Versión de la capa de datos. A continuación, pulsa Guardar.

Google Tag Manager - Configuración de la variable iubenda_ccpa_opted_out

Ahora que has definido la variable, crea un nuevo activador llamado iubenda_ccpa_opted_out. En Configuración del activador:

  • elige Evento personalizado como Tpo de activador;
  • introduce .* como Nombre del evento y selecciona Utilizar concordancia con expresiones regulares (regex);
  • en Este activador se activa con elige Algunos eventos personalizados, selecciona iubenda_ccpa_opted_out, y los parámetros equals y true
Google Tag Manager - Configuración del activador iubenda_ccpa_opted_out

y haz clic en Guardar.

Al final, la etiqueta de configuración de Google Analytics: configuración de GA4 tendrá este aspecto:

Google Tag Manager - Etiqueta de configuración de GA4 de Google Analytics

Pulsa Guardar para guardar la etiqueta.

No pasa nada por añadir los activadores iubenda_consent_given y iubenda_consent_given_purpose_4, incluso aunque no utilices la función de consentimiento por categoría. Configurar ambos activadores ahora te permitirá no editar todas tus etiquetas si decides activar esa función en el futuro.

Al establecer esta regla, Google Tag Manager activará la etiqueta de configuración de GA4 de Google Analytics que hemos creado anteriormente solamente cuando se produzcan verdaderamente estas reglas. En consecuencia, la etiqueta se activará cada vez que Google Tag Manager reciba un evento con los valores iubenda_consent_given, iubenda_consent_given_purpose_4 o iubenda_preference_not_needed.

Nota:
  • El ejemplo anterior se da por hecho que estás activando la etiqueta en todas las páginas de tu sitio web; si prefieres que una etiqueta se active solo en una página (por ejemplo, la página del carrito de compra) consulta aquí la sección avanzada.
  • En cuanto a la posibilidad de añadir varios contenedores en la misma página: Google recomienda mantener al mínimo el número de contenedores en la página para obtener el mejor rendimiento. Si lo aprovechas (por ejemplo, creando un contenedor para cada finalidad al utilizar el consentimiento por categoría), asegúrate de que utilizas el mismo nombre de capa de datos en todos los contenedores, tal y como se explica aquí.
  • Si quieres hacer un seguimiento de más de un evento en la misma página (por ejemplo, hacer un seguimiento de las vistas de páginas y del envío de un formulario), tendrás que crear las etiquetas adicionales y especificar el tipo de seguimiento. Consulta los detalles en la sección avanzada aquí.

Instala Google Tag Manager en tu propio sitio web

Para instalar Google Tag Manager, accede al administrador, copia el código que proporciona Google e insértalo en todas las páginas de tu propio sitio web siguiendo las instrucciones proporcionadas; si utilizas un sistema de gestión de contenido (CMS) que extrae el encabezado de página de un archivo de plantilla de encabezado (por ejemplo, header.php), bastará con pegarlo en ese archivo.

Google Tag Manager - Instalación
Google Tag Manager - Instalación

Nota: tendrás que eliminar tu propio código de Google Analytics.

Google Analytics se activará automáticamente por el script de Google Tag Manager solo después de que el usuario/visitante preste su consentimiento al uso de cookies.

Instala el script de iubenda

Ve a tu dashboard de iubenda > [tu sitio web] > Privacy Controls and Cookie Solution y haz clic en el botón Integrar para llegar a la sección correspondiente:

Cookie Solution - Integrar el banner

Una vez allí, recupera el código de tu banner de cookies (si aún no has activado la Privacy Controls and Cookie Solution, solo tienes que hacer clic en Activar, establecer la configuración y después dirigirte a la sección de integración para recuperar el código tal y como se describe).

Ahora, tu código tendrá el siguiente aspecto:

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": "en",
        "siteId": XXXXXX, //use your siteId
        "cookiePolicyId": YYYYYY, //use your cookiePolicyId
        "banner": {
            "position": "float-top-center",
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true
        }
    };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Debe editarse de la siguiente manera:

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": "en",
        "siteId": XXXXXX, //use your siteId
        "cookiePolicyId": YYYYYY, //use your cookiePolicyId
        "banner": {
            "position": "float-top-center",
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true
        },
        "callback": {
                  onPreferenceExpressedOrNotNeeded: function (preference) {
                    dataLayer.push({
                      iubenda_ccpa_opted_out: _iub.cs.api.isCcpaOptedOut(),
                    });

                    // preferences parameter may be undefined if both GDPR and LGPD do not apply
                    // we may need the line below to find USPR preferences instead of relying
                    // on preferences parameter
                    var otherPreferences = _iub.cs.api.getPreferences();

                    if (otherPreferences) {
                      var usprPreferences = otherPreferences.uspr;
                      if (usprPreferences) {
                        for (var purposeName in usprPreferences) {
                          if (usprPreferences[purposeName]) {
                            dataLayer.push({
                              event: 'iubenda_consent_given_purpose_' + purposeName,
                            });
                          }
                        }
                      }
                    }

                    if (!preference) {
                      dataLayer.push({
                        event: 'iubenda_preference_not_needed',
                      });
                    }
                    else if (preference.consent === true) {
                      dataLayer.push({
                        event: 'iubenda_consent_given',
                      });
                    }
                    else if (preference.consent === false) {
                      dataLayer.push({
                        event: 'iubenda_consent_rejected',
                      });
                    }
                    else if (preference.purposes) {
                      for (var purposeId in preference.purposes) {
                        if (preference.purposes[purposeId]) {
                          dataLayer.push({
                            event: 'iubenda_consent_given_purpose_' + purposeId,
                          });
                        }
                      }
                    }
                  }		
        }
    };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Por ello, hemos añadido una llamada de retorno que, en el momento en que el usuario da su consentimiento, llama al código de Google Tag Manager para desbloquear el evento que hemos configurado para la activación de Google Analytics.

Ahora que hemos adaptado el código para la integración con Google Tag Manager, lo incluiremos en nuestras páginas antes del cierre de la etiqueta BODY.

Si ya has terminado, pasa directamente a Publicar; de lo contrario, sigue leyendo para ver la Configuración avanzada (estos ajustes te permiten acelerar la activación de las etiquetas, activar etiquetas solo en páginas específicas y establecer varios tipos de seguimiento en la misma página añadiendo parámetros adicionales a la configuración de Google Tag Manager).

Configuraciones avanzadas

En esta sección, utilizaremos “Variables” y “Excepciones de activación” para ser aún más específicos. Google Tag Manager permite crear variables y establecer excepciones en las condiciones de activación de la etiqueta.

Puedes pensar en las excepciones como “activadores de bloqueo”. Por ejemplo, si solo quieres que tu etiqueta de Google Analytics se active en la página del carrito, puedes establecer una excepción a la regla de activación que establezca que la etiqueta no se active en ninguna página que no sea la del carrito de; al establecer esta excepción, se bloquea la activación de la etiqueta en páginas que no sean la del carrito. Del mismo modo, puedes configurar un activador para que solo se active si se cumplen las condiciones relacionadas con una variable concreta.

De este modo, tanto las variables como las excepciones permiten una mayor flexibilidad en la gestión de las etiquetas (puedes leer lo que Google dice sobre las excepciones aquí y sobre las variables aquí).

Como se ha mencionado anteriormente, si solo quieres que la etiqueta de Google Analytics se active en la página del carrito, puedes establecer una excepción a la regla de activación que establezca que la etiqueta no se dispare en ninguna página que no sea la del carrito. Te contamos cómo hacerlo ⬇️”

Crea una variable llamada Page URL (haz clic en “Variables” en el panel izquierdo y después en “Nueva variable”). A continuación, haz clic dentro del cuadro de configuración de variables para elegir el tipo de variable y selecciona URL.

Selecciona la variable page url incorporada

Ahora haz clic en guardar y llama a la variable con un nombre relacionado con la página en la que quieres que se active la etiqueta. En nuestro ejemplo, hemos llamado a la variable “Carrito”.

A continuación, crea el nuevo activador de bloqueo o Excepción que quieras añadir (haz clic en “Activadores” en el panel izquierdo, y luego en “Nuevo”). Intenta ponerle a tu excepción un nombre pertinente. En este ejemplo hemos llamado al nuestro: “NO es carrito”

A continuación, haz clic dentro del cuadro de configuración del activador para elegir el tipo de activador, en este caso “Vista de página”.

  • Ahora selecciona la opción “Algunas páginas”.
  • Indica la variable (en este caso la variable “Carrito” que acabamos de crear) como variable asociada y configura: “no es igual a”* e introduce la url de tu página como condición de activación (ej. https://shoppingcart.yourwebsite.com)
    *Otra opción aquí es seleccionar “empieza por” (en lugar de “no es igual a”) si quieres que la etiqueta se active en las páginas que empiezan por la url del carrito, etc. Aquí puedes configurar los ajustes de la forma que mejor se adapte a tu sitio en particular.
Configuración de excepciones

Haz clic en Guardar.

Por último, vuelve a tu etiqueta y, además del activador “iubenda consentimiento otorgado”, también tienes que asociar la excepción que acabamos de crear. Puedes hacerlo haciendo clic en el lápiz de la sección “Activación”,

añadir activador de formulario a la etiqueta

y luego haz clic en el enlace “Añadir excepción” que aparece.

A continuación selecciona la excepción que acabamos de crear, guarda y ¡listo! Ahora la etiqueta solo se activará cuando se obtenga el consentimiento para las cookies (como exige la ley), pero no se activará en páginas que no sean la de tu “Carrito”.

excepción no es carrito

Si quieres hacer un seguimiento de más de un evento en la misma página (por ejemplo, hacer un seguimiento de las visitas de páginas y también del envío de un formulario de compra), tendrás que crear etiquetas adicionales y especificar el tipo de seguimiento variado. Aunque establecer varios tipos de seguimiento es sencillo de hacer en Google Tag Manager, para cumplir la ley debes garantizar que el resto de eventos activadores solo se produzcan después de haber recibido el consentimiento. Te explicamos cómo hacerlo:

Para este ejemplo, supongamos que, además de realizar un seguimiento de las vistas de páginas en Google Analytics (como se establece en la etiqueta que creamos en la primera sección), también te gustaría realizar un seguimiento de las transacciones.

Para ello, tendremos que crear otra etiqueta de Google Analytics, establecer el tipo de seguimiento como “Transacción” y hacer clic en Guardar (puedes ponerle un nombre descriptivo, como “Transacciones de Universal Analytics”).

Google Analytics etiqueta de transacción en Google Tag Manager

A continuación, crea una variable de cookie propia (haz clic en “Variables” en el panel izquierdo y añade una nueva variable personalizada)

  • Especifica el nombre de la variable con el siguiente formato: “_iub_cs-XXXXXX” (XXXXXX tendrá que ser sustituido por tu propio cookiePolicyId number).
  • Selecciona la siguiente opción: “URI-Decode cookie”.
Crea la variable

Pulsa el botón “Guardar” y ponle un nombre como “Cookieiubenda”.

Nombra la variable

A continuación, crea el nuevo activador que quieras añadir: por ejemplo, “Compra realizada”; tipo “Envío de formulario”.

  • Ahora selecciona la opción que empieza por “Algunos”; así, en el caso del ejemplo anterior de “Envío de formularios”, tendremos que seleccionar “Algunos formularios” (como se ve en la siguiente imagen).
  • Indica la cookie de iubenda (la variable que acabas de crear) como variable asociada y configura: “contiene” y “consentimiento”:true como condición de activación
Consentimiento por categoría

Si has establecido perPurposeConsent en true, la variable “Cookieiubenda” no contendrá el valor “consent”:true, sino los valores referidos a las finalidades únicas aceptados (es decir, “1”:true, “2”:true, “3”:true, “4”:true etc). Adapta en consecuencia los pasos sugeridos.

Configuración del activador

Por último, vuelve a tu etiqueta “Transacción de Universal Analytics” y asocia el activador que acabamos de crear. Puedes hacerlo haciendo clic en la sección “Activación” y seleccionando simplemente el activador “Compra realizada” que acabamos de crear.

añadir activador a la etiqueta

Guarda y ¡listo!

activadores múltiples etiqueta única

Nota: si quieres que el seguimiento de la transacción solo se produzca en una página (por ejemplo, la página del carrito), consulta el tutorial sobre cómo hacerlo en el tutorial de la primera pestaña de esta sección.

Es posible activar las etiquetas con mayor rapidez modificando dos parámetros adicionales en Google Tag Manager como:

Crea una variable de cookie propia (haz clic en “Variables” en el panel izquierdo y añade una nueva variable personalizada)

  • Especifica el nombre de la variable con el siguiente formato: “_iub_cs-XXXXXX” (XXXXXX tendrá que ser sustituido por tu propio cookiePolicyId).
  • Selecciona la siguiente opción: “URI-Decode cookie”.
crear variable GTM

A continuación, crea un nuevo activador: “Ley de Cookies no aceptada” tipo “Vista de página”. Este nuevo activador permitirá que la presencia de la cookie de iubenda se trate como una excepción:

  • selecciona “Algunas vistas de páginas”
  • Indica la cookie iubenda (la variable que acabas de crear) como variable asociada y configura: “no contiene” y “consentimiento”:true como condición de activación (ver imagen inferior):
Activar configuración excepción de cookie GTM

Por último, vuelve a tu etiqueta y, además del activador “iubenda consentimiento otorgado”, también tienes que asociar la excepción que acabamos de crear. Puedes hacerlo haciendo clic en el lápiz de la sección “Activación”,

Activar configuración excepción de cookie GTM

y luego haz clic en el enlace “Añadir excepción” que aparece. Ahora selecciona el activador que acabamos de crear y haz clic en guardar.

Excepción de etiqueta GTM con Ley de Cookies no aceptada
Nota:

Cuando pongas en marcha esta configuración avanzada recuerda que si se modificara el cookiePolicyId, la modificación también tendría que aplicarse en la configuración. Para una correcta configuración, no es necesario ni ventajoso incluir código iubenda a través de Google Tag Manager.

Fuente: tagmanageritalia.it/guida-base-gestire-la-cookie-law-di-iubenda-con-google-tag-manager

Publicar un contenedor

Si previamente pasaste a la sección avanzada justo después de crear y configurar tu etiqueta y activadores, comprueba que instalas Google Tag Manager en tu propio sitio web e instala el script de iubenda ANTES de continuar con la sección Publicar que aparece a continuación.

Después de haber configurado las reglas, publica el contenedor para que las modificaciones SE ACTIVEN en tu sitio web:

Google Tag Manager - Publicar contenedor

Para ello, haz clic en el botón ENVIAR situado en la parte superior derecha de la página de resumen del contenedor y, a continuación, confirma.

Estos ejemplos pueden reutilizarse para cualquier otro script o función de JavaScript.

Ver también