Guía para desarrolladores

En este documento se explica de manera detallada cómo implementar Google Tag Manager en tu sitio web.

Usar una capa de datos

Para conseguir la máxima flexibilidad, portabilidad y facilidad de implementación, Google Tag Manager funciona mejor si se implementa con una capa de datos. Una capa de datos es un objeto que contiene toda la información que quieres transferir a Google Tag Manager, y puedes utilizarla para transferir información como eventos o variables. También puedes configurar activadores en Google Tag Manager en función de los valores de las variables (p. ej., activar una etiqueta de remarketing cuando el valor purchase_total es superior a 100 €), o en función de eventos concretos. Los valores de las variables también se pueden transferir a otras etiquetas (p. ej., se puede transferir purchase_total al campo de valor de una etiqueta).

En lugar de hacer referencia a las variables, la información de transacciones, las categorías de páginas y otras señales importantes de tu página, Google Tag Manager está diseñado para hacer referencia de forma sencilla a la información que incluyes en la capa de datos. Sin embargo, no es necesario implementarla. Aunque decidas no declararla explícitamente, podrás seguir accediendo a los valores de la página a través de la función Variables, pero no podrás utilizar eventos sin una capa de datos. Al implementar la capa de datos con variables y valores asociados en vez de esperar a que se carguen en la página, estarán disponibles tan pronto como necesites que activen etiquetas.

Añadir variables de capa de datos a una página

Para configurar una capa de datos, añade el siguiente fragmento de código al encabezado de la página, antes del fragmento de contenedor.

<script>
  dataLayer = [];
</script>

El fragmento anterior es un objeto vacío que puedes rellenar con la información que quieras transferir a Google Tag Manager. Por ejemplo, puedes añadir variables a la capa de datos que indiquen que una página es de registro y que un visitante se ha identificado como un cliente de alto valor. Para hacerlo, rellena la capa de este modo:

<script>
  dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
  }];
</script>

Puedes configurar Google Tag Manager para que active etiquetas en todas las páginas marcadas con la variable signup o en las que los visitantes se marquen con la variable high-value. Recuerda añadir este fragmento de la capa de datos antes del fragmento de contenedor, tal y como se explica en la guía de inicio rápido.

Si se llama al código de la capa de datos después del fragmento de contenedor, las variables que se hayan declarado en ella no estarán disponibles para que Google Tag Manager active las etiquetas seleccionadas al cargar la página. Por ejemplo:

Incorrecto

<!-- Google Tag Manager -->
...
<!-- End Google Tag Manager -->
<script>
  dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
  }];
</script>

Correcto

<script>
  dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
  }];
</script>
<!-- Google Tag Manager -->
...
<!-- End Google Tag Manager -->

Las variables que se declaren en el objeto de la capa de datos se mantendrán hasta que los visitantes salgan de la página actual. Las variables de la capa de datos que sean relevantes en todas las páginas (p. ej., visitorType) deben declararse en la capa de cada página de tu sitio web. Aunque no tienes que incluir el mismo conjunto de variables en la capa de datos de cada página, debes utilizar una convención de nomenclatura uniforme. En otras palabras, si especificas la categoría de la página de registro con la variable pageCategory, también debes utilizar la variable pageCategory para definir la categoría de una página de compra.

No es necesario declarar explícitamente una capa de datos. Por lo tanto, si decides no implementar el código de la capa y rellenarlo con variables, el fragmento de contenedor de Google Tag Manager activará un objeto de capa de datos automáticamente.

Utilizar la capa de datos con gestores de eventos HTML

Google Tag Manager ofrece una variable de capa de datos especial llamada event que se usa en los procesadores de eventos JavaScript para iniciar la activación de etiquetas cuando los usuarios interactúan con elementos del sitio web, como botones. Por ejemplo, puedes activar una etiqueta de seguimiento de conversiones cuando un usuario haga clic en el botón Submit que aparece en un formulario de registro de un boletín informativo. Puede llamarse a los eventos en función de la interacción de los usuarios con elementos del sitio web, como enlaces, botones, componentes de un sistema de menú basado en Flash, o en función de otra variable JavaScript, como retrasos de tiempo, etc.

Esta función se ejecuta llamando a la API push como método de la capa de datos de una página (p. ej., adjunta a los elementos de los que se vaya a hacer un seguimiento). La sintaxis básica para configurar un evento es la siguiente:

dataLayer.push({'event': 'event_name'});

event_name es una cadena que indica cuál es el elemento o el evento.

Por ejemplo, si quieres definir como evento que un usuario haga clic en un botón, puedes modificar el enlace del botón para llamar a la API push() de la siguiente manera:

<a href="#" name="button1" onclick="dataLayer.push({'event': 'button1-click'});" >Button 1</a>

A veces, es posible que los datos que quieras recoger o utilizar para que activen determinadas etiquetas no se carguen hasta que el usuario interactúe con la página. Si utilizas una combinación de variables y eventos de capa de datos, podrás enviar esta información a la capa según sea necesario.

Las variables se envían de forma dinámica a la capa de datos para recoger información, como los valores que se han introducido o seleccionado en un formulario, metadatos asociados a un vídeo que reproduce un usuario, el color de un producto (p. ej., un coche) que ha personalizado un visitante, las URL de destino de los enlaces en los que se ha hecho clic, etc.

Del mismo modo que con los eventos, si quieres utilizar esta función, tendrás que llamar a la API push() para añadir o sustituir variables de la capa de datos. La sintaxis básica para configurar variables de capa de datos dinámicas es la siguiente:

dataLayer.push({'variable_name': 'variable_value'});

variable_name es una cadena que indica el nombre de la variable de capa de datos que se va a definir, y variable_value es una cadena que indica el valor de la variable de capa de datos que se va a definir o a sustituir.

Por ejemplo, si quieres configurar una variable con una preferencia de color cuando los visitantes interactúen con un widget de personalización de coches, puedes enviar la siguiente variable dinámica de capa de datos:

dataLayer.push({'color': 'red'});

Enviar varias variables a la vez

En lugar de utilizar el objeto dataLayer.push() con cada variable y evento, puedes enviar varias variables y eventos a la vez. A continuación se incluye un ejemplo de cómo hacerlo:

dataLayer.push({
  'color': 'red',
  'conversionValue': 50,
  'event': 'customizeCar'
});

También puedes utilizar esta técnica en un gestor de eventos de enlace:

<a href="#"
   name="color"
   onclick="dataLayer.push({
     'color': 'red',
     'conversionValue': 50,
     'event': 'customizeCar'});">Customize Color</a>

Ten en cuenta que si envías a la capa de datos una variable con el mismo nombre que otra, el valor de la nueva sobrescribirá el de la actual. Por ejemplo, si al hacer clic en el enlace anterior ya hubiera una variable llamada color que declarara el valor blue (azul) en la capa de datos, el valor se sobrescribirá con el nuevo, red (rojo).

Cómo funciona la sintaxis asíncrona

Google Tag Manager es una etiqueta asíncrona, es decir, cuando se ejecuta no bloquea el renderizado de otros elementos de la página. También provoca que las demás etiquetas que se implementan a través de Google Tag Manager lo hagan de una forma asíncrona, lo que significa que una etiqueta de carga lenta no bloqueará otras etiquetas de seguimiento.

El objeto dataLayer es el que hace posible la sintaxis asíncrona. Actúa como una cola: es una estructura de datos "first-in, first-out" (el primero que entra es el primero que sale) que recoge llamadas a la API y activa etiquetas en función de dichas llamadas. Para añadir algo a la cola, utiliza el método dataLayer.push. Puedes utilizar dataLayer.push para transferir más metadatos a Google Tag Manager a través de variables y para especificar eventos.

La creación del objeto dataLayer puede especificarse antes del fragmento de Google Tag Manager. Si no se define, lo creará Google Tag Manager.

Para obtener más información sobre la sintaxis asíncrona, consulta la página de referencia de dataLayer.push.

Evitar los errores más habituales

Cuando implementes Google Tag Manager, ten en cuenta lo siguiente:

No sobrescribas el objeto dataLayer

Si utilizas una asignación para asignar valores a dataLayer (p. ej., dataLayer = [{'item': 'value'}]), se sobrescribirá el valor actual. Lo mejor es declarar el objeto dataLayer lo más arriba posible del código fuente, antes del fragmento de contenedor o del fragmento para ocultar páginas de Optimize. Una vez que hayas declarado dataLayer, puedes utilizar el objeto dataLayer.push({'item': 'value'}) para añadirle más valores en tus secuencias de comandos.

En cuanto al nombre del objeto dataLayer, el sistema distingue entre mayúsculas y minúsculas

Si intentas enviar una variable o un evento sin las mayúsculas y minúsculas adecuadas, el envío no se realizará correctamente. Ejemplos:

datalayer.push({'pageTitle': 'Home'});    // Won't work
dataLayer.push({'pageTitle': 'Home'});    // Better

Los nombres de las variables deben escribirse entre comillas

Aunque las comillas no son necesarias en los nombres de variables que solo contienen letras, números y guiones, y que no son palabras reservadas como función, exportar o nativo, se recomienda añadirlas para evitar problemas. Ejemplos:

dataLayer.push({new-variable: 'value'});      // Won't work
dataLayer.push({'new-variable': 'value'});    // Better

Los nombres de las variables deben ser los mismos en todas las páginas

Si utilizas nombres diferentes para las mismas variables en diferentes páginas, Google Tag Manager no podrá activar las etiquetas con uniformidad en todas las ubicaciones deseadas. Ejemplos:

No funcionará
// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitor_type': 'high-value'});
Mejor
// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitorType': 'high-value'});

Debes declarar toda la información necesaria para que se activen las etiquetas cuando se cargue la página en la capa de datos, antes del fragmento de contenedor

Si quieres activar etiquetas al cargar páginas que tengan algo en común, como el valor sports asignado a la variable pageCategory, esta debe incluirse en la capa de datos, antes del fragmento de contenedor (p. ej., 'pageCategory': 'sports'). Las variables que se envíen a la capa de datos incluyendo dataLayer.push() después del fragmento de contenedor no podrán activar etiquetas al cargar páginas que tengan algo en común.

No debes codificar las etiquetas que implementes con Google Tag Manager, ni tampoco implementarlas con otra herramienta

Las etiquetas que se activan desde Google Tag Manager no solo se deben duplicar, sino también migrar a Google Tag Manager. Para obtener más información sobre cómo migrarlas, consulta la sección Migrar las etiquetas a Google Tag Manager). Es posible que, si implementas etiquetas con Google Tag Manager y a través de otros sistemas, o si las insertas en el código fuente de tu sitio web, se produzcan situaciones de inflación u otros problemas de integridad de datos generados por estas etiquetas. Por ejemplo, si migras tu código de seguimiento de Google Analytics para activarlo desde Google Tag Manager, tendrás que eliminar el código de seguimiento de Google Analytics insertado en el código fuente de tu sitio web.

Cambiar el nombre de la capa de datos

La capa de datos iniciada, a la que Google Tag Manager hace referencia, se llama dataLayer de forma predeterminada. Si quieres cambiar el nombre de esta capa, debes reemplazar su valor de parámetro (resaltado a continuación) en el fragmento de contenedor por el nombre que quieras ponerle.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','myNewName','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

Entonces, todas las referencias que se hagan a la capa de datos, es decir, cuando esta se declare sobre el fragmento y cuando se envíen a ella eventos o variables dinámicas con la API push(), también deberían ajustarse para que reflejen el nombre personalizado de la capa:

<script>
  myNewName = [{
    // ...
  }];
  myNewName.push({'variable_name': 'variable_value'});
</script>

Migrar las etiquetas a Google Tag Manager

Para sacar el máximo provecho a Google Tag Manager, te recomendamos que migres a esta solución la mayoría de tus etiquetas, excepto las que no se admiten. En esta sección se describe el flujo de trabajo de migración recomendado en cinco pasos principales:

  1. Crea un mapa de tu sitio web (opcional)

    Para comenzar la migración, debes pensar qué etiquetas están implementadas actualmente en el sitio web y qué datos quieres recoger. Para recoger estos datos, decide de qué acciones quieres hacer un seguimiento (eventos) y qué datos adicionales de la página vas a recoger (variables). Crea un mapa de etiquetas con los datos que estas etiquetas deben recoger y los eventos o páginas que quieres asociarles.

  2. Implementa el fragmento estándar de Google Tag Manager

    Una vez que hayas creado el mapa, instala solo el fragmento de Google Tag Manager en el sitio web (vacío) e impleméntalo. Consulta la guía de inicio rápido para obtener más información.

  3. Añade eventos y variables

    Personaliza la instalación de Google Tag Manager con los métodos que se explican en la sección Añade eventos y variables.

  4. Añade etiquetas con activadores asociados a la interfaz de administración de Google Tag Manager

    Una vez que hayas completado la configuración del sitio web con el fragmento de Google Tag Manager y las API de recogida de datos, debes añadir las etiquetas del sitio a la interfaz de usuario. No las publiques todavía, simplemente añádelas y configúralas en la interfaz de administración de Google Tag Manager con las plantillas apropiadas y ajustando los activadores de forma correcta. Consulta más información en el Centro de Ayuda sobre activadores.

  5. Intercambio de migración final

    El último paso es intercambiar tus etiquetas antiguas por las nuevas y publicar estas últimas en Google Tag Manager; todo de forma simultánea. En tan solo unos minutos, deberás:

    • Eliminar las etiquetas de tu sitio web en un solo envío de código.
    • Una vez que sepas que se ha hecho el envío correctamente, pulsa el botón "Publicar" de la versión del contenedor.

    Este método puede causar un pequeño vacío de datos, pero una vez que se produzca el intercambio inicial, no se volverán a producir. También puedes invertir el orden y publicarlas poco antes de que los cambios del sitio web se hagan efectivos. Esto podría causar una duplicación de datos menor y única en lugar de un vacío de datos pequeño.

Si después de haber completado la migración inicial a Google Tag Manager necesitas hacer algo más con las etiquetas, no hace falta cambiar el código del sitio a través de la interfaz de esta plataforma.

Varios dominios

Aunque puedes utilizar el mismo contenedor con varios sitios web, se recomienda que cada propiedad web independiente que gestiones se implemente con su propio contenedor. Así, se evita que los cambios específicos de un sitio web tengan efectos no deseados en otros que utilicen el mismo contenedor. Sin embargo, en algunos casos en los que los dominios o subdominios de nivel superior se consideran miembros del mismo sitio web, es recomendable gestionar las etiquetas a través del mismo contenedor de Google Tag Manager.

Si utilizas un solo contenedor en varios dominios, es importante que configures meticulosamente las etiquetas y activadores en Google Tag Manager. El activador predeterminado "Todas las páginas" de Google Tag Manager (es decir, $url matches RegEx .*) activará las etiquetas en todas las páginas de todos los dominios en los que se ha implementado el fragmento del contenedor. Como algunas etiquetas tienen configuraciones o propósitos específicos según el dominio en el que se implementan, es posible que tengas que crear activadores personalizados o, incluso, eliminar el activador "Todas las páginas" para activar etiquetas en todas las páginas de un dominio o de cada dominio de manera individual.

Por ejemplo, puedes implementar tu código de seguimiento de Google Analytics a través de GTM con configuraciones para que admita el seguimiento de GA en varios dominios o subdominios.

Imagen que muestra varios dominios

En este caso, deberás añadir una línea a tu código de seguimiento de GA para ajustar manualmente el dominio propio en el que se van a configurar las cookies de GA. Es decir, en www.example-petstore.com y dogs.example-petstore.com, las cookies deberían asignarse al dominio común .example-petstore.com. Sin embargo, en el sitio web secundario www.my-example-blogsite.com, puedes asignarlas a .my-example-blogsite.com. Por ello, querrás que una de las dos etiquetas de código de seguimiento de GA (una correspondiente a .example-petstore.com y otra a .my-example-blogsite.com) se active en los dos dominios. Si ambos compartían un contenedor de GTM, se hubieran activado todas las etiquetas en cada una de sus páginas si se hubiera usado el activador predeterminado "Todas las páginas" en Google Tag Manager.

Varios contenedores en una página

Para que una página alcance el mejor rendimiento, su número de contenedores de Google Tag Manager debe ser el menor posible.

Si utilizas más de un contenedor en una página, implementa los fragmentos de contenedor con un objeto de capa de datos común. Por ejemplo, puedes implementar dos fragmentos de contenedor de la siguiente manera:

  1. Copia este JavaScript y pégalo lo más cerca posible de la etiqueta de apertura <head> de la página:
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXX');</script>
    
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-YYYY');</script>
    <!-- End Google Tag Manager -->
    
    
  2. Copia este fragmento y pégalo inmediatamente después de la etiqueta de apertura <body> de la página:
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    
    <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-YYYY"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    
    

Ten en cuenta que solo puedes utilizar una única capa de datos común para todos los contenedores de Google Tag Manager de una página. De lo contrario, puede que algunos activadores dejen de funcionar, lo que podría tener otras consecuencias. Por lo tanto, no cambies el nombre de la capa de datos para un subconjunto de contenedores en la página. Si es necesario, puedes cambiar el nombre de la capa de datos de todos los contenedores de la página.

Evita implementar un contenedor de Google Tag Manager a través de una etiqueta HTML personalizada en otro contenedor de Google Tag Manager porque podría añadirse latencia en las etiquetas del contenedor secundario y tener otras consecuencias.

Flash y Actionscript

Para que Google Tag Manager pueda activar etiquetas basadas en contenido o interacciones en una película Flash, puedes utilizar el método ActionScript ExternalInterface para enviar eventos y variables dinámicas a la capa de datos en la página del contenedor de la película SWF. Para hacerlo, el fragmento de contenedor de Google Tag Manager debe implementarse en el código HTML de la página principal del SWF como se explica en la guía de inicio rápido.

Los eventos y las variables dinámicas de la capa de datos se pueden enviar del componente Flash a Google Tag Manager llamando al método push a través de ExternalInterface. Por ejemplo, para activar un evento haciendo clic en un botón mybutton_btn con ActionScript 3, implementa el siguiente código en tu SWF:

import flash.display.*;
import flash.events.*;
import flash.external.*;
mybutton_btn.addEventListener(MouseEvent.MOUSE_UP, onButtonClick);
function onButtonClick( Event:MouseEvent ):void {
  var name:String= "FLASH_EVENT";
  if (ExternalInterface.available) {
    ExternalInterface.call('dataLayer.push',{'event': name});
  }
}

Para que el método ExternalInterface funcione correctamente, asegúrate de que el atributo allowscriptaccess tiene asignado el valor always antes de insertar el SWF:

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
        width='300' height='300' id='player1' name='player1'>
  <param name='movie' value='file.swf'>
  <param name='allowfullscreen' value='true'>
  <param name='allowscriptaccess' value='always'>
  <param name='flashvars' value='file=playlist.xml'>
  <embed id='player1' name='player1'
         src='file.swf'
         width='300' height='300'
         allowscriptaccess='always'
         allowfullscreen='true'
         flashvars="file=playlist.xml"/>
</object>

Añadir variables de capa de datos para dispositivos no compatibles con JavaScript

Para dar cabida a los usuarios que tienen JavaScript inhabilitado o que visitan páginas desde dispositivos que no admiten JavaScript, Google Tag Manager incluye un fragmento <noscript> para implementar etiquetas que no dependen de JavaScript aunque el JavaScript principal de GTM no cargue.

Sin embargo, es importante tener en cuenta que la capa de datos, que contiene las variables declaradas en la carga de las páginas además de cualquier evento o variables dinámicas que se envíen a dicha capa, dependen de JavaScript para funcionar. Por lo tanto, si alguno de los activadores no dependientes de JavaScript que activan tus etiquetas y que quieres activar aunque JavaScript no cargue depende de las variables de capa de datos, debes pasar esas variables al iframe <noscript> como parámetros de consulta. Por ejemplo, para activar una etiqueta cuando pageCategory es sports y visitorType es returning, tendrías que modificar el fragmento de contenedor en la página de la siguiente manera:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX&pageCategory=sports&visitorType=returning" height="0"
                  width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Donde cada variable de capa de datos se añade al final de la URL de origen del iframe como parámetros de consulta de texto sin formato separados por el signo "&".

Seguridad

Google Tag Manager incorpora una serie de funciones para que tus sitios web y aplicaciones sean seguras. Además de las siguientes funciones de seguridad del código, te recomendamos que te familiarices con los controles de acceso de Tag Manager , la verificación en dos pasos y la detección de software malicioso.

Restringir la implementación de etiquetas

Aunque no se recomienda restringir los tipos de etiquetas que se implementan en un sitio web con Google Tag Manager, hay diversas razones por las que puede ser necesario hacerlo. Por ejemplo, es posible que algunos propietarios de sitios web no quieran que los usuarios de Google Tag Manager puedan añadir ciertas etiquetas a sus sitios web para estabilizar el código o recoger datos. Por eso, hemos añadido una función de lista negra de etiquetas a Google Tag Manager que se puede controlar en la instalación de fragmentos.

Para controlar qué etiquetas, activadores y variables están permitidos en una página, utiliza las claves gtm.whitelist o gtm.blacklist en la capa de datos. Estas claves anularán todas las configuraciones del contenedor. Cuando se añaden a la lista negra correctamente, las etiquetas, los activadores y las variables no se activarán aunque se hayan configurado para activarse en la IU de Google Tag Manager.

En el siguiente ejemplo se explica cómo inicializar la capa de datos con una lista blanca y una lista negra. Ambas son opcionales y las puedes utilizar de manera independiente o al mismo tiempo, como se muestra, deben ser del tipo Array y sus valores deben ser del tipo String:

dataLayer = [{
  ...
  'gtm.whitelist': ['<ID>', '<ID>', ...],
  'gtm.blacklist': ['<ID>', '<ID>', '<ID>', ...]
}];

Cada ID de la lista corresponde a un tipo de variable, etiqueta o activador, o a una clase de tipos. Las clases son grupos de etiquetas, activadores y variables que tienen las mismas capacidades. Por ejemplo, todas las etiquetas que pueden enviar píxeles a dominios que no son de Google tienen la clase nonGooglePixels. Las clases son útiles para bloquear capacidades en etiquetas, activadores y variables actuales y futuros.

Es importante comprender las reglas que rigen las listas blancas y las listas negras:

  1. Listas blancas
    Cuando se configura una lista blanca, las etiquetas, los activadores y las variables relevantes solo se ejecutarán si están en la lista blanca, ya sea de forma explícita (por tipo de ID) o implícita (si todas sus clases están en la lista).
  2. Listas negras
    Cuando se configura una lista negra, las etiquetas, los activadores y las variables solo se ejecutan si no están en la lista, ya sea de forma explícita (por tipo de ID) o implícita (si cualquiera de sus clases está en la lista).
  3. Las listas negras anulan las listas blancas
    Cuando se han configurado ambas, las listas negras tienen prioridad. Puedes incluir en la lista blanca una clase de etiquetas y, en lista negra, una etiqueta específica de esa clase, pero no al revés: No se puede incluir en la lista negra una clase de etiquetas y añadir a la lista blanca una etiqueta específica de esa misma clase.
  4. Las clases están relacionadas
    Algunas clases están relacionadas con otras. Por ejemplo, las etiquetas que pueden ejecutar secuencias de comandos que no son de Google pueden, por definición, enviar píxeles que no sean de Google. Por esta razón, si se bloquea nonGooglePixels, también se bloquea nonGoogleScripts de forma automática: todos los activadores, etiquetas y variables que pertenecen a cualquiera de esos dos grupos se bloquearán.

En la siguiente tabla se muestra una lista de las etiquetas, activadores y variables disponibles, sus tipos y las clases a las que pertenecen:

Etiqueta ID Classes
AB TASTY Generic Tag abtGeneric nonGoogleScripts
Etiqueta AdAdvisor ta nonGoogleScripts
Etiqueta Adometry adm google
Etiqueta AdRoll Smart Pixel asp nonGoogleScripts
Etiqueta de seguimiento de conversiones de Google Ads awct google
Etiqueta de remarketing de Google Ads sp google
Etiqueta Affiliate Window Conversion awc nonGoogleScripts
Etiqueta Affiliate Window Journey awj nonGoogleScripts
Seguimiento de eventos universal de Bing Ads baut nonGoogleScripts
Bizrate Insights Buyer Survey Solution bb nonGoogleScripts
Bizrate Insights Site Abandonment Survey Solution bsa nonGoogleScripts
Etiqueta de seguimiento estándar de ClickTale cts nonGoogleScripts
Etiqueta Medición digital unificada de comScore csm nonGoogleScripts
Conversant Mediaplex: etiqueta MCT iFRAME mpm nonGoogleIframes
Conversant Mediaplex: etiqueta ROI de IMG estándar mpr nonGooglePixels
Vinculación de conversiones gclidw google
Etiqueta Crazy Egg cegg nonGoogleScripts
Criteo OneTag crto nonGoogleScripts
Etiqueta HTML personalizada html customScripts
Etiqueta de imagen personalizada img customPixels
Etiqueta de DistroScale dstag nonGoogleScripts
Etiqueta de contador de Floodlight flc  
Etiqueta de ventas de Floodlight fls  
Etiqueta Dstillery Universal Pixel m6d nonGooglePixels
Etiqueta de Eulerian Analytics ela customScripts
Etiqueta de Google Analytics ga google
Satisfacción con el sitio web de Google Consumer Surveys gcs google
Google Optimize opt google
Etiqueta de Google Trusted Stores ts  
Hotjar Tracking Code hjtc nonGoogleScripts
Infinity Call Tracking Tag infinity nonGoogleScripts
Intent Media - Search Compare Ads sca nonGoogleScripts
Etiqueta de seguimiento K50 k50Init nonGoogleScripts
LeadLab ll nonGoogleScripts
Etiqueta LinkedIn bzi nonGoogleScripts
Etiqueta Lytics JS ljs nonGoogleScripts
Etiqueta Marin Software ms nonGoogleScripts
Mediaplex: etiqueta MCT iFRAME mpm nonGoogleIframes
Mediaplex: etiqueta ROI de IMG estándar mpr nonGooglePixels
Message Mate messagemate nonGoogleScripts
Etiqueta Mouseflow mf nonGoogleScripts
Píxel de Neustar ta nonGoogleScripts
Etiqueta Nielsen DCR Static Lite ndcr nonGoogleScripts
Etiqueta Nudge Content Analytics nudge nonGoogleScripts
Código de seguimiento de Oktopost okt nonGoogleScripts
Optimise Conversion Tag omc nonGoogleScripts
OwnerListens Message Mate messagemate nonGoogleScripts
Píxel de Perfect Audience pa nonGoogleScripts
Personali Canvas pc nonGoogleScripts
Pinterest pntr nonGoogleScripts
Placed placedPixel nonGoogleScripts
Pulse Insights Voice of Customer Platform pijs nonGoogleScripts
Quantcast Audience Measurement qcm nonGoogleScripts
Quora Pixel qpx nonGoogleScripts
Rawsoft FoxMetrics fxm nonGoogleScripts
SaleCycle JavaScript Tag scjs customScripts
SaleCycle Pixel Tag scp customPixels
Seguimiento de JavaScript de SearchForce para la página de conversión sfc nonGoogleScripts
Seguimiento de JavaScript de SearchForce para la página de destino sfl nonGoogleScripts
Etiqueta de seguimiento de redireccionamientos de SearchForce sfr nonGooglePixels
Shareaholic shareaholic nonGoogleScripts
Survicate Widget svw nonGoogleScripts
Etiqueta de conversión de oportunidad de venta de Tradedoubler tdlc nonGooglePixels
Etiqueta de conversión de venta de Tradedoubler tdsc nonGooglePixels
Etiqueta Seguimiento de conversiones de Turn tc nonGoogleScripts
Etiqueta Recogida de datos de Turn tdc nonGoogleScripts
Etiqueta de sitio web universal de Twitter twitter_website_tag nonGoogleScripts
Etiqueta de Universal Analytics ua google
Etiqueta Upsellit Global Footer uslt customScripts
Etiqueta Upsellit Confirmation uspt customScripts
Etiqueta Ve Interactive JavaScript vei nonGoogleScripts
Ve Interactive Pixel veip nonGooglePixels
Etiqueta de conversión VisualDNA vdc nonGoogleScripts
Xtremepush xpsh nonGoogleScripts
Yieldify yieldify nonGoogleScripts
Zones zone  
Activador ID Classes
Activador del procesador de visibilidad de elementos evl google
Activador del procesador de clics cl google
Activador del procesador de envío de formularios fsl  
Activador del procesador de historial hl google
Activador del procesador de errores JavaScript jel google
Activador del procesador de clics en enlaces lcl  
Activador del procesador de profundidad de desplazamiento sdl google
Activador del procesador del temporizador tl google
Activador del procesador de vídeos de YouTube ytl google
Variable ID Classes
Cookie de origen k google
Variable de evento automático v google
Constante c google
Número de versión del contenedor ctv google
Evento personalizado e google
Variable de JavaScript personalizada jsm customScripts
Variable de capa de datos v google
Modo de depuración dbg google
Elemento DOM d google
Visibilidad del elemento vis google
HTTP Referer f google
Variable JavaScript j google
Tabla de consulta smm google
Número aleatorio r google
Tabla RegEx remm google
URL u google

En la siguiente tabla se muestra una lista de las clases disponibles y sus relaciones con otras clases. En la columna Incluida en la lista blanca automáticamente puedes ver las clases que estarán en la lista blanca de forma implícita cuando la clase de una fila determinada se añada a ella. Del mismo modo, la columna Incluida en la lista negra automáticamente representa las clases que estarán presentes en la lista negra de forma implícita cuando se añada a ella la clase de la fila correspondiente.

Clase Descripción Incluida en la lista blanca automáticamente Incluida en la lista negra automáticamente
customPixels Es capaz de enviar píxeles a las URL definidas por el usuario. nonGooglePixels customScripts
html
customScripts Es capaz de ejecutar códigos JavaScript facilitados por el usuario. html
customPixels
nonGooglePixels
nonGoogleScripts
nonGoogleIframes
html
google Solo es capaz de ejecutar secuencias de comandos alojadas por Google y enviarle píxeles.    
html Nombre para referirse a customScripts. Ten en cuenta que también es el ID de la etiqueta HTML personalizada. Así, los usuarios antiguos también obtienen los beneficios de la clase customScripts. customScripts
customPixels
nonGooglePixels
nonGoogleScripts
nonGoogleIframes
customScripts
nonGooglePixels Es capaz de enviar píxeles a dominios que no son de Google.   customPixels
customScripts
html
nonGoogleScripts
nonGoogleIframes
nonGoogleScripts Es capaz de ejecutar secuencias de comandos que no haya facilitado Google. nonGooglePixels
customScripts
html
nonGoogleIframes Es capaz de importar iframes desde dominios que no son de Google. nonGooglePixels
customScripts
html
nonGoogleScripts
sandboxedScripts Código JavaScript en zona de pruebas dentro de plantillas personalizadas. Nada Nada

Usar una URL relativa al protocolo

De forma predeterminada, el fragmento de contenedor de Google Tag Manager siempre utiliza "https" para cargar contenedores; es decir, https://www.googletagmanager.com. De esta forma, los contenedores están más protegidos frente a partes maliciosas y espionaje y, en muchos casos, también mejora el rendimiento.

Si quieres cargar contenedores de Google Tag Manager de manera relativa al protocolo, puedes hacerlo ajustando el protocolo URL de origen, resaltado a continuación, en el fragmento de contenedor para que sea // lugar de https://.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Cuando utilizas una URL relativa al protocolo, el contenedor se carga usando "http" en las páginas con una URL http:// y utilizando "https" en páginas con una URL https://.

Las versiones anteriores del fragmento de contenedor de Google Tag Manager siempre utilizaban una URL relativa al protocolo para cargar contenedores, es decir, //www.googletagmanager.com. Estas versiones continuarán funcionando sin actualizarse.

Aunque la mayoría de las plantillas de etiquetas de Google Tag Manager son relativas al protocolo, al configurar etiquetas personalizadas para que se activen en páginas seguras, es importante asegurarse de que dichas etiquetas también sean seguras o relativas al protocolo.