Iubenda logo
Genera tus documentos

Documentación

Tabla de contenidos

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

A continuación, explicaremos cómo integrar Google Tag Manager con la Cookie Solution de iubenda para la CCPA, el GDPR y el consentimiento por categoría..

Importante

Se recomienda encarecidamente utilizar Google Tag Manager dado que simplifica drásticamente la adopción de los requisitos de la Ley de Cookies. Sin embargo, solo es efectivo para scripts que no son “posicionales”. Los scripts “no posicionales” son todos aquellos que no visualizan un elemento específico en un lugar determinado de la página. En resumen, puedes utilizar esta solución para todas las herramientas de estadísticas, pero no para los banners de AdSense, vídeos de Youtube, botones sociales o widgets de ningún tipo.

Algunas definiciones

Google Tag Manager - Definizioni contenitore, tag e attivatore

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

Crea una cuenta

Primero, tendrás que crear una cuenta gratuita de Google Tag Manager.

Crea un contenedor

Una vez que hayas creado tu cuenta, hay que crear un contenedor haciendo clic en Create Container:

Google Tag Manager - Crea contenitore
Google Tag Manager - Crea contenitore

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 para el uso de cookies.

La etiqueta que crearemos estará relacionada con Google Analytics:

Google Tag Manager - Area di lavoro

Haz clic en la ventana de Tag configuration como se ve en la siguiente imagen:

Google Tag Manager - Configurazione tag

Selecciona el tipo de etiqueta Google Analytics – Universal Analytics. A continuación, selecciona New Variable, en la configuración de Google Analytics e ingresa tu ID de seguimiento de Google Analytics y dale a guardar.

Google Tag Manager - Nuova variabile

Ahora puedes configurar tu tipo de seguimiento. En este ejemplo, queremos realizar un seguimiento de las visitas a la página, por lo que dejamos el tipo de seguimiento como Page view.

Google Tag Manager - Visualizzazione di pagina

Configurar las reglas para activar la etiqueta

Después de haber completado los parámetros anteriores, tenemos que configurar los activadores (las reglas que permitirán que se activen los scripts):

  • iubenda_consent_given o, si has habilitado la función de consentimiento por categoría en tu Cookie Solution, iubenda_consent_given_purpose_1...5
  • iubenda_preference_not_needed
  • iubenda_ccpa_opted_out

1.1 iubenda_consent_given

Haz clic en la sección “Triggering”:

Google Tag Manager - Attivazione

y luego haz clic en el signo + en la parte superior derecha para agregar un nuevo activador. Ahora, en la ventana de configuración del activador, selecciona Custom Event (nota: asegúrate de NO seleccionar “All Pages” como un activador).

Google Tag Manager - Evento personalizzato

En el nombre del evento, introduce el siguiente valor: iubenda_consent_given. Esto habilitará el activador en All Custom Events etiquetados como Consent Given.

Google Tag Manager - Evento personalizzato

Guarda el activador haciendo clic en Save:

Google Tag Manager - Evento personalizzato

1.2 iubenda_consent_given_purpose_1…5

Si has habilitado la función de consentimiento por categoría en tu Cookie Solution, en lugar del evento iubenda_consent_given, tendrás que crear un evento personalizado para cada finalidad (con la excepción de la finalidad “estrictamente necesario”) que se muestre en tu banner/política de cookies.

Si no estás seguro de a qué finalidad/categoría pertenecen los servicios que se ejecutan en tu web, puedes hacer referencia a los subtítulos a los que pertenecen en tu política de cookies de iubenda.

Estas son las 5 categorías (y los valores de eventos personalizados):

  1. estrictamente necesario (no es necesario crear un evento personalizado)
  2. interacciones y funcionalidades básicas (iubenda_consent_given_purpose_2)
  3. mejora de la experiencia (iubenda_consent_given_purpose_3)
  4. estadísticas (iubenda_consent_given_purpose_4)
  5. segmentación y publicidad (iubenda_consent_given_purpose_5)

Dado que Google Analytics es parte de la categoría “Analytics” incluida en la finalidad de estadísticas, tienes que crear un evento personalizado con el siguiente valor: iubenda_consent_given_purpose_4. Esto habilitará el activador en todos los eventos personalizados etiquetados como Consent Given Purpose 4.

Google Tag Manager - Configurazione attivatore

Una vez hecho esto, guarda el activador.

2 iubenda_preference_not_needed

Sigue el mismo procedimiento para crear otro evento personalizado llamado iubenda_preference_not_needed, que se activa siempre que el usuario no tiene que expresar una preferencia (por ejemplo, cuando gdprApplies:false, o gdprAppliesGlobally:false, countryDetection:true y el usuario reside fuera de la UE):

Google Tag Manager - Configurazione attivatore iubenda_preference_not_needed

3. iubenda_ccpa_opted_out

Si entras dentro del alcance de la CCPA y, como en este caso, el servicio se considera una venta, se debe desactivar en caso de que el usuario elija la autoexclusión. Para hacer esto, tendrás que crear una excepción llamada iubenda_ccpa_opted_out.

Antes de crear este evento, tendrás que definir un filtro. Haz clic en Variables, luego en New (al lado de User-Defined Variables. Asígnale el nombre iubenda_ccpa_opted_out, haz clic en el recuadro Variable Configuration y elige Data Layer Variable, utiliza iubenda_ccpa_opted_out como Data Layer Variable Name y selecciona Version 2 como Data Layer Version. . Por último, haz clic en Save.

Google Tag Manager - Configurazione variabile iubenda_ccpa_opted_out

Ahora que has definido la variable, crea un nuevo activador llamado iubenda_ccpa_opted_out. En Trigger Configuration:

  • elige Custom Event como Trigger Type;
  • introduce .* como Event name y selecciona Use regex matching;
  • en This trigger fires on elige Some Custom Events, selecciona iubenda_ccpa_opted_out, equals y true
Google Tag Manager - Configurazione attivatore iubenda_ccpa_opted_out

y haz clic en Save.

Al final, tu etiqueta de Universal Analytics se verá así:

Google Tag Manager - Tag Universal Analytics

Haz clic en Save para guardar la etiqueta.

Puedes crear de forma segura los activadores iubenda_consent_given y iubenda_consent_given_purpose_4, incluso si no utilizas la función de consentimiento por categoría. De esta manera, no tendrás que editar todas tus etiquetas si habilitas esta función en el futuro.

Al configurar esta regla, Google Tag Manager activará la etiqueta de Google Analytics que hemos creado anteriormente solo cuando estas reglas sean verdaderas. Es decir, siempre que reciba un evento con el valor iubenda_consent_given, iubenda_consent_given_purpose_4 o iubenda_preference_not_needed.

Nota
  • En el ejemplo anterior se asume que quieres activar la etiqueta en todas las páginas de tu web, si deseas que se active solo en una página (por ejemplo, la página del carrito de la compra), consulta la sección avanzada aquí.
  • En cuanto a añadir varios contenedores en la misma página: Google recomienda mantener la cantidad mínima por página para obtener el mejor rendimiento. Si utilizas varios contenedores por página (por ejemplo, creando un contenedor para cada finalidad cuando usas el consentimiento por categoría), asegúrate de usar el mismo nombre de dataLayer en todos los contenedores como se explica aquí.
  • Recuerda que si quieres realizar un seguimiento de más de un evento en la misma página (por ejemplo, las visitas a la página de seguimiento y el envío de un formulario), tienes 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 web

Para instalar Google Tag Manager, visita el área de administración de GTM, copia el código que proporciona Google e intégralo en todas las páginas de tu web según las instrucciones proporcionadas. Si estás utilizando un CMS que extrae el encabezado de la página de una plantilla (por ejemplo, header.php), solo tienes que pegarlo en ese archivo.

Google Tag Manager - Amministrazione
Google Tag Manager - Codice

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

Google Analytics se activará automáticamente mediante el script de Google Tag Manager solo después de que el usuario consienta el uso de cookies.

Instala el script de iubenda

Dirígete a tu dashboard > [Tu sitio web] > Cookie Solution, haz clic en el botón Integrar para acceder a la sección de integración:

y recupera el código de tu banner de cookies (si aún no has activado la Cookie Solution, haz clic en Activar, configúrala y luego dirígete a la sección de integración para recuperar el código como se describe).

Ahora, tu código tendrá un aspecto similar al siguiente:

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": "it",
        "siteId": XXXXXX, //usa il tuo siteId
        "cookiePolicyId": YYYYYY, //usa il tuo 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>

Se tiene que modificar de la siguiente manera:

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": "it",
        "siteId": XXXXXX, //usa il tuo siteId
        "cookiePolicyId": YYYYYY, //usa il tuo cookiePolicyId
        "banner": {
            "position": "float-top-center",
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true
        },
        "callback": {
            onPreferenceExpressedOrNotNeeded: function(preference) {
                dataLayer.push({
                    iubenda_ccpa_opted_out: _iub.cs.api.isCcpaOptedOut()
                });
                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 lo tanto, hemos agregado una callback que, en el momento en que el usuario proporciona el 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, dirígete directamente a Publicar. De lo contrario, sigue leyendo para conocer 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 agregando parámetros adicionales a tu configuración de GTM).

Configuración avanzada

En esta sección, usaremos”Variables” y “Trigger Exceptions” 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 quieres que tu etiqueta de Google Analytics solo se active en la página del carrito de la compra, puedes establecer una excepción a la regla de activación que establece que la etiqueta no se activa en ninguna página que no sea la página del carrito. Al establecer esta excepción, evitas que la etiqueta se active en otras páginas que no sean la página del carrito. De manera similar, puedes configurar un activador para que solo se habilite si se cumplen las condiciones relacionadas con una variable en particular.

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

Como se ha mencionado anteriormente, si quieres que tu etiqueta de Google Analytics solo se active en la página del carrito de la compra, puedes establecer una excepción a la regla de activación que establece que la etiqueta no se activa en ninguna página que no sea la página del carrito. A continuación, te indicamos cómo hacerlo:

Crea una variable URL (haz clic en “Variables” en el panel izquierdo, luego en “New Variable”). A continuación, haz clic en el cuadro de configuración de la variable para elegir el tipo de variable y después selecciona URL.

Google Tag Manager - Variabili Google Tag Manager - Variabili

Ahora haz clic en save y asigna a la variable un nombre relacionado con la página en la que quieres que se active la etiqueta. En nuestro ejemplo, hemos denominado la variable “Shopping Cart”.

A continuación, crea el nuevo activador de bloqueo o la excepción que te gustaría agregar (haz clic en “Triggers” en el panel izquierdo y luego en “New”). Intenta nombrar a tu excepción con un término relevante. En este ejemplo, hemos nombrado el nuestro: “is NOT shopping cart”.

A continuación, haz clic en el cuadro de configuración del activador para elegir el tipo, en este caso “Page View”.

  • Ahora selecciona la opción “Some Pages”.
  • Indica la variable (en este caso es “Shopping Cart”, la que acabamos de crear) como la variable asociada y configura: “does not equal”* y escribe la URL de tu página como una condición de activación (por ejemplo: https://shoppingcart.yourwebsite.com)
    *Otra opción aquí es seleccionar “starts with” (en vez de “does not equal”) si quieres que la etiqueta se active en las páginas que empiezan con la URL del carrito de la compra, etc. Puedes configurar los ajustes aquí de la manera que mejor se adapte a tu web.
Google Tag Manager - Configurazione attivatore

Haz clic en Save.

Por último, vuelve a tu etiqueta y, además del activador “iubenda consent given”, también tienes que asociar la excepción que acabamos de crear. Haz clic en el lápiz en la sección “Triggering”,

Google Tag Manager - Eccezione

luego haz clic en el enlace “Add Exception”.

A continuación, selecciona la excepción que acabamos de crear, guárdala y ya está lista. Ahora, la etiqueta solo se activará después de que se obtenga el consentimiento para las cookies (como se requiere legalmente), pero no se activará en páginas que no sean la página de “Shopping Cart”.

Google Tag Manager - Eccezione Google Tag Manager - Eccezione

Si quieres realizar el seguimiento de más de un evento en la misma página (por ejemplo, el seguimiento de las visitas a la página y el envío de un formulario de compra), tendrás que crear las etiquetas adicionales y especificar el tipo de seguimiento. Si bien configurar varios tipos de seguimiento es sencillo en Google Tag Manager, para cumplir con la ley, tienes que asegurarte de que los otros eventos desencadenantes solo ocurran después de que se haya recibido el consentimiento. A continuación, te indicamos cómo hacerlo:

Para este ejemplo, supongamos que además de realizar un seguimiento de las visitas a la página 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, necesitaremos crear otra etiqueta de Google Analytics, establecer el tipo de seguimiento como “Transacción” y hacer clic en guardar (puedes darle un nombre descriptivo, como “Transacciones de Universal Analytics”).

Google Tag Manager - Configurazione tag transazione

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

  • Especifica el nombre de la variable en el siguiente formato: “_iub_cs-XXXXXX” (XXXXXX deberá ser sustituido por tu propio número cookiePolicyId).
  • Selecciona la siguiente opción: “URI-Decode cookie”.
Google Tag Manager - Variabile 'Cookie proprietario'

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

Google Tag Manager - Rinonima variabile

A continuación, crea el nuevo activador que quieres agregar: por ejemplo “Purchase Made”, elige “Form submission”.

  • Ahora selecciona la opción que comienza con “Some” (por lo que, en el caso del ejemplo anterior de “Form submission”, tendremos que seleccionar “Some Forms” (como se muestra en la siguiente imagen).
  • Indica la cookie iubenda (la variable que acabas de crear) como variable asociada y configura: “contains” y “consent”: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 que se refieren a las finalidades únicas aceptadas (es decir, “1”:true, “2”:true, “3”:true, “4”:true etc). En este caso, puedes modificar el procedimiento según tus necesidades.

Google Tag Manager - Attivatore 'Invio modulo'

Por último, vuelve a la etiqueta “Universal Analytics Transaction” y asocia el activador que acabamos de crear. Puedes hacer esto haciendo clic en la sección “Triggering” y seleccionando el activador “Purchase Made” que acabamos de crear.

Google Tag Manager - Attivatore 'Acquisto'

Dale a guardar y habrás acabado.

Google Tag Manager - Tag

Nota: si quieres que el seguimiento de transacciones solo se realice en una página (como la página del carrito de la compra), consulta la sección anterior, Activa las etiquetas solo en una página.

Es posible activar las etiquetas más rápidamente modificando dos parámetros adicionales en GTM como:

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

  • Especifica el nombre de la variable en el siguiente formato: “_iub_cs-XXXXXX” (XXXXXX deberá ser sustituido por tu propio cookiePolicyId).
  • Selecciona la siguiente opción: “URI-Decode cookie”.
Google Tag Manager - Variabile Cookie proprietario

A continuación, crea un nuevo activador: “Ley de cookies no aceptada”; elige “Page View”, este nuevo activador permitirá que la presencia de la cookie de iubenda se trate como una excepción:

  • selecciona “Some Page Views”
  • Indica la cookie iubenda (la variable que acabas de crear) como variable asociada y configura: “does not contain” y “consent”:true como condición de activación (ver la imagen a continuación):
Google Tag Manager - Configurazione attivatore

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

Google Tag Manager - Attivazione

luego haz clic en el enlace “Add Exception”. Ahora selecciona el activador que acabamos de crear y dale a guardar.

Google Tag Manager - Tag

Nota: al implementar 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 el código de iubenda a través de Google Tag Manager.

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

Publica el contenedor

Si antes has pasado a la Sección Avanzada justo después de crear y configurar tu Etiqueta y Activadores, asegúrate de instalar Google Tag Manager en tu web e instalar el script de iubenda ANTES de continuar con la siguiente sección de Publicar.

Después de haber configurado las reglas, tendrás que publicar el contenedor para hacer las modificaciones EN VIVO en tu web:

Google Tag Manager - Pubblica il contenitore

Haz clic en el botón SUBMIT en la parte superior derecha de la página de descripción general del contenedor y luego confirma. Estos ejemplos se pueden reutilizar para cualquier otro script o función de JavaScript.

Más información