angorawool6

En este documento se explica de forma detallada cómo incorporar Google Tag Mánager en tu sitio web.

Implementación a través de una capa de datos

Para conseguir la máxima flexibilidad, portabilidad y sencillez de implementación, Google Tag Manager marcha mejor si se incorpora con una capa de datos. Una capa de datos es un objeto que contiene toda la información que deseas transferir a Google Tag Manager, y puedes emplearla para trasferir información como acontecimientos 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_totales superior a cien €), o en función de eventos específicos. Los valores de las variables también se pueden trasferir a otras etiquetas (p. ej., se puede trasferir
purchase_totalal campo de valor de una etiqueta).

En sitio 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 Mánager 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 incorporarla. Si bien decidas no declararla explícitamente, podrás seguir accediendo a los valores de la página a través de la función, pero no podrás emplear eventos sin una capa de datos. Al incorporar la capa de datos con variables y valores asociados, en lugar de aguardar a que se carguen en la página, estarán disponibles tan pronto como precises que activen etiquetas.

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

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

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

Puedes configurar Google Tag Manager a fin de que active etiquetas en todas y cada una de las páginas marcadas con la variable
signupo 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, como se explica en la.

Si lleva por nombre 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 elegidas al cargar la página. Ejemplos:

Incorrecto

Correcto

Las variables que se declaren en el objeto de la capa de datos se mantendrán hasta el momento en que los visitantes salgan de la página. Las variables de la capa de datos que sean relevantes en todas y cada una de las páginas (p. ej.,
visitorType) deben declararse en la capa de cada página de tu sitio. Si bien no tienes que incluir exactamente 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 detallas la categoría de la página de registro con la variable
pageCategory, también debes usar esta variable para delimitar la categoría de una página de adquiere.

No es necesario declarar explícitamente una capa de datos. Por 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 Mánager ofrece una variable de capa de datos especial llamada
eventque se emplea en los procesadores de eventos JavaScript para empezar la activación de etiquetas cuando los usuarios interactúan con elementos del sitio, como botones. Por ejemplo, puedes hacer que se active una etiqueta de seguimiento de conversiones cuando un usuario haga click en el botón
Submitque aparece en un formulario de inscripción de un boletín informativo. Puede llamarse a los eventos en función de la interacción de los usuarios con los 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 latencias, etc.

Esta función se ejecuta llamando a la API
pushcomo 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 acontecimiento es la siguiente:

donde
event_namees una cadena que indica de qué elemento o bien evento se trata.

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

A veces, es posible que los datos que quieras recoger o usar a fin de que activen determinadas etiquetas no se carguen hasta el momento en que el usuario haya interactuado con la página. Si empleas una combinación de variables y eventos de capa de datos, podrás mandar 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 bien seleccionado en un formulario, metadatos asociados a un vídeo que reproduce un usuario, el tono de un producto (p. ej., un vehículo) que ha adaptado un visitante o las URL de destino de los links en los que se ha hecho clic.

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

donde
variable_namees una cadena que indica el nombre de la variable de capa de datos que se marcha a acotar, y
variable_valuees una cadena que indica el valor de la variable de capa de datos que se marcha a delimitar o bien a reemplazar.

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 mandar la siguiente variable dinámica de capa de datos:

Enviar múltiples variables a la vez

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

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

Ten en cuenta que si envías a la capa de datos una variable que tenga exactamente el mismo nombre que otra, el valor de la nueva sobrescribirá el de la que ya tenías. Por ejemplo, si al hacer clic en el enlace precedente ya hay una variable llamada
colorque declara 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, o sea, cuando se ejecuta no evita que se rendericen otros elementos de la página. También hace que las demás etiquetas que se incorporan a través de Google Tag Manager lo hagan de una forma asíncrona, lo que quiere decir 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, usa el método
dataLayer.push. Puedes utilizar
dataLayer.pushpara trasferir más metadatos a Google Tag Mánager a través dey para especificar acontecimientos.

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

Para obtener más información sobre la sintaxis asíncrona, consulta la.

Evitar los fallos más habituales

Cuando incorpores Google Tag Manager, ten presente lo siguiente:

No sobrescribas el objeto dataLayer

Si empleas una asignación para dar valores a
dataLayer(p. ej.,
dataLayer = ['item': 'value']), se sobrescribirán los valores que ya tengas. Lo mejor es declarar el objeto dataLayer lo más arriba posible del código fuente,
antesdel fragmento de contenedor o bien del. Cuando hayas declarado
dataLayer, puedes usar el objeto
dataLayer.push('item': 'value')para añadirle más valores en tus secuencias de comandos.

El nombre del objeto dataLayer distingue entre mayúsculas y minúsculas

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

Los nombres de las variables deben escribirse entre comillas

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

Las variables deben tener el mismo nombre en todas las páginas

Si utilizas nombres diferentes para exactamente las mismas variables en diferentes páginas, Google Tag Mánager no podrá activar las etiquetas con uniformidad en todas y cada una de las localizaciones deseadas. Ejemplos:

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

Si quieres que se activen etiquetas cuando se carguen páginas que cumplan alguna condición, como que tengan el valor
sportsasignado a la variable pageCategory, esta variable debe definirse en la capa de datos, ya 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 cumplan una condición.

Las etiquetas se deben incorporar con Google Tag Manager sin ayuda de otra herramienta y no deben estar predefinidas en el código

Las etiquetas que se activan desde Google Tag Mánager no solamente se deben duplicar, sino más bien también
migrara Google Tag Mánager. Para conseguir más información sobre cómo hacerlo, consulta la sección). Es posible que, si incorporas etiquetas con Google Tag Manager y a través de otros sistemas, o si las insertas en el código fuente de tu sitio, 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 Analytics a fin de que se active desde Google Tag Mánager, tendrás que quitar el código de seguimiento de Google Analytics insertado en el código fuente de tu sitio.

Cambiar el nombre de la capa de datos

La capa de datos que Google Tag Mánager comienza y a la que hace referencia, tiene por nombre
dataLayerde forma predeterminada. Si deseas mudar el nombre de esta capa, debes sustituir su valor de parámetro (resaltado a continuación) del fragmento de contenedor por el nombre que desees ponerle.

Así pues, todas y cada una de las referencias que se hagan a la capa de datos, esto es, cuando esta se declare ya antes del fragmento y cuando se envíen a ella acontecimientos o bien variables dinámicas con la API
push(), también deberían ajustarse para que reflejen el nombre personalizado de la capa:

Migrar las etiquetas a Google Tag Manager

Para sacar el máximo provecho a Google Tag Mánager, te recomendamos que migres a esta herramienta la mayoría de tus etiquetas, salvo las que. En esta sección se describe el flujo de trabajo recomendado de migración en cinco pasos:

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

   Para empezar la migración, debes pensar qué etiquetas ya están incorporadas en el sitio y qué datos quieres recoger. agencias desarrollo web , decide de qué acciones deseas hacer un seguimiento (eventos) y qué datos auxiliares de la página vas a recoger (variables). Crea un mapa de etiquetas con los datos que estas etiquetas deben recoger y los acontecimientos o bien 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 lapara conseguir más información.

   
   
3. 
   Añade eventos y variables
   

   Personaliza la instalación de Google Tag Mánager con los métodos que se explican en la sección.

   
   
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 con el fragmento de Google Tag Mánager y las API de recogida de datos, debes añadir lasdel lugar 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 Mánager con las plantillas apropiadas y ajustando los activadores con corrección. Consulta más información en el.

   
   
5. 
   Intercambia las etiquetas (paso final para la migración)
   

   El último paso es intercambiar tus etiquetas viejas 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 con un único 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.
   
   

   Con este método se pueden perder algunos datos, pero cuando se haya hecho el intercambio inicial, ya no volverá a pasar. También puedes invertir el orden y publicarlas poco antes que se apliquen los cambios en el sitio. En un caso así, en vez de perderse, algunos datos se podrían duplicar. Esta duplicación solo se produciría una sola vez.

   
   

Para iniciar la migración, debes meditar qué etiquetas ya están implementadas en el sitio y qué datos quieres recoger. Para recoger estos datos, decide de qué acciones quieres hacer un seguimiento (acontecimientos) y qué datos adicionales de la página recogerás (variables). Crea un mapa de etiquetas con los datos que estas etiquetas deben recoger y los eventos o páginas que deseas asociarles.

Una vez que hayas creado el mapa, instala solo el fragmento de Google Tag Manager en el sitio (vacío) y también impleméntalo. Consulta lapara conseguir más información.

Personaliza la instalación de Google Tag Manager con los métodos que se explican en la sección.

Una vez que hayas completado la configuración del sitio con el fragmento de Google Tag Manager y las API de recogida de datos, debes añadir lasdel 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 con corrección. Consulta más información en el.

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 solo unos minutos, deberás:

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

Con este método se pueden perder algunos datos, mas cuando se haya hecho el intercambio inicial, ya no volverá a pasar. También puedes invertir el orden y publicarlas poco antes que se apliquen los cambios en el sitio. En este caso, en lugar de perderse, ciertos datos se podrían duplicar. Esta duplicación solo se produciría una sola vez.

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

Varios dominios

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

Si empleas un solo contenedor en múltiples dominios, es esencial que configures meticulosamente las etiquetas y activadores en Google Tag Mánager. El activador predeterminado "Todas las páginas" de Google Tag Mánager (o sea,
dólares americanos url matches RegEx .*) activará las etiquetas en todas y cada una de las páginas de todos y cada uno de los dominios en los que se haya incorporado el fragmento del contenedor. Como ciertas etiquetas tienen configuraciones o propósitos específicos según el dominio en el que se implementan, es posible que debas crear activadores personalizados o bien, aun, suprimir el activador "Todas las páginas" para activar etiquetas en todas y cada una de las páginas de un dominio o bien de cada dominio de manera individual.

Por ejemplo, puedes incorporar tu código de seguimiento de Google Analytics a través de GTM con configuraciones para que acepte el seguimiento de GA en.

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 marchan a configurar las cookies de GA. Esto es, en
-petstore.comy
dogs.example-petstore.com, las cookies deberían asignarse al dominio común
.example-petstore.com. No obstante, en el sitio web secundario
www.my-example-blogsite.com, puedes asignarlas a
.my-example-blogsite.com. diseño web fuengirola , querrás que una de las 2 etiquetas de código de seguimiento de GA (una pertinente a
.example-petstore.comy otra a
.my-example-blogsite.com) se active en cada uno de los 2 dominios. Si los dos comparten un contenedor de GTM y se ha utilizado el activador predeterminado "Todas las páginas" en Google Tag Mánager, se activarán todas las etiquetas en cada una de las páginas.

Varios contenedores en una página

Para que una página tenga un desempeño excelente, 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 servirnos de un ejemplo, puedes incorporar dos fragmentos de contenedor de la próxima manera:

1. Copia el siguiente código 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= '/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= '/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 de manera inmediata después de la etiqueta de apertura
   <body>de la página:
   

   <!-- Google Tag Manager (noscript) --> <noscript><iframe src="///ns.html?id=GTM-XXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <noscript><iframe src="///ns.html?id=GTM-YYYY" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Mánager (noscript) -->

   
   

Ten en cuenta que solo puedes utilizar una única capa de datos común para todos los contenedores de Google Tag Mánager de una página. En caso contrario, puede que ciertos activadores dejen de marchar, lo que podría tener otras consecuencias. Por ende, no cambies el nombre de la capa de datos de un subconjunto de contenedores de la página. Si es preciso, puedes cambiar el nombre de la capa de datos de todos los contenedores de la página.

No incorpores un contenedor de Google Tag Manager a través de una etiqueta en código HTML personalizada en otro contenedor de Google Tag Mánager porque podría añadirse latencia en las etiquetas del contenedor secundario y tener otras consecuencias.

Flash y Actionscript

Para que Google Tag Mánager pueda activar etiquetas basadas en contenido o interactúes en una película Flash, puedes utilizar el método ActionScript
ExternalInterfacepara mandar acontecimientos 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 Mánager debe incorporarse en el código HTML de la página principal del SWF como se explica en la.

Los acontecimientos y las variables dinámicas de la capa de datos se pueden enviar del componente Flash a Google Tag Mánager llamando al método
pusha través de
ExternalInterface. Por servirnos de un ejemplo, si quieres emplear ActionScript 3 a fin de que se active un evento cuando se hace click en un botón
mybutton_btn, implementa el siguiente código en tu SWF:

Para que el método
ExternalInterfacefuncione apropiadamente, asegúrate de que el atributo
allowscriptaccesstiene asignado el valor
alwaysantes de insertar el SWF:

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 Mánager incluye un fragmento
<noscript>para que se implementen etiquetas que no dependen de JavaScript si bien el JavaScript principal de GTM no cargue.

Sin embargo, es esencial tener en consideración que la capa de datos, que contiene las variables declaradas en la carga de las páginas, además de cualquier acontecimiento o variables dinámicas que se envíen a dicha capa, dependen de JavaScript para marchar. En consecuencia, si alguno de los activadores no dependientes de JavaScript que activan tus etiquetas (y que quieres que lo hagan si bien JavaScript no cargue) depende de las variables de capa de datos, debes transferir esas variables al iframe
<noscript>como parámetros de consulta. Por servirnos de un ejemplo, para activar una etiqueta cuando
pageCategoryes
sportsy
visitorTypees
returning, tendrías que alterar el fragmento de contenedor de la página de la próxima manera:

Donde las variables de capa de datos se añaden 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 Mánager incorpora alta web en google funciones a fin de que tus sitios y aplicaciones sean seguras. Además de las siguientes funciones de seguridad del código, también te invitamos a que te familiarices con losde Tag Manager, lay la.

Los administradores puedenen sus instalaciones para que solo se implementen etiquetas específicas. También puedes configurar Google Tag Manager para que funcione con una.

Usar una URL relativa al protocolo

De forma predeterminada, el fragmento de contenedor de Google Tag Manager siempre emplea "https" para cargar contenedores; es decir,
). De este modo, los contenedores están más protegidos en frente de prácticas maliciosas y de snooping y, habitualmente, también mejora el rendimiento.

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

Cuando utilizas una URL relativa al protocolo, el contenedor se carga utilizando "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 Mánager siempre y en toda circunstancia empleaban una URL relativa al protocolo para cargar contenedores, es decir,
//
).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 adaptadas a fin de que se activen en páginas seguras, dichas etiquetas también son seguras o relativas al protocolo.