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 del método dataLayer.push.
Cómo 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 dataLayer lo más arriba posible en el 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 deben duplicarse, se deben migrar a GTM. 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 herramienta 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:
-
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.
-
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.
-
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.
-
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.
-
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.
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:
- 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 --> - 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 de un subconjunto de los contenedores de una página: si es necesario, cambia el nombre la capa de datos de todos ellos.
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, también 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 y, 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:
-
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). -
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). -
Las listas negras anulan las listas blancas
Cuando se han configurado ambas, las listas negras tienen prioridad. Puedes incluir una clase de etiquetas en la lista blanca y, en la lista negra, una etiqueta específica de esa misma 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. -
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 bloqueanonGooglePixels, también se bloqueanonGoogleScriptsde forma automática: todos los activadores, etiquetas y variables que pertenecen a cualquiera de esos dos grupos se bloquearán.
La siguiente tabla es 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 |
| 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 |
| Placed | placedPixel |
nonGoogleScripts |
| Pulse Insights Voice of Customer Platform | pijs |
nonGoogleScripts |
| Quantcast Audience Measurement | qcm |
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 |
| 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
|
customScriptshtml
|
customScripts |
Es capaz de ejecutar códigos JavaScript facilitados por el usuario. |
htmlcustomPixelsnonGooglePixelsnonGoogleScriptsnonGoogleIframes
|
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. |
customScriptscustomPixelsnonGooglePixelsnonGoogleScriptsnonGoogleIframes
|
customScripts
|
nonGooglePixels |
Es capaz de enviar píxeles a dominios que no son de Google. |
customPixelscustomScriptshtmlnonGoogleScriptsnonGoogleIframes
|
|
nonGoogleScripts |
Es capaz de ejecutar secuencias de comandos que no haya facilitado Google. |
nonGooglePixels |
customScriptshtml
|
nonGoogleIframes |
Es capaz de importar iframes desde dominios que no son de Google. |
nonGooglePixels |
customScriptshtmlnonGoogleScripts
|
Utilizar 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 plantillas de etiquetas de Google Tag Manager también son relativas al protocolo, es importante asegurarse de que, al configurar etiquetas personalizadas para que se activen en páginas seguras, dichas etiquetas también son seguras o relativas al protocolo.