citygame32

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

Implementación mediante una capa de datos

Para conseguir la máxima flexibilidad, portabilidad y sencillez de implementación, Google Tag Mánager 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 usarla para trasferir información como eventos o variables. También puedes configurar activadores en Google Tag Mánager en función de los valores de las variables (p. ej., activar una etiqueta de remarketing cuando el valor
purchase_totales superior a 100 €), o en función de eventos concretos. Los valores de las variables también se pueden trasferir a otras etiquetas (p. ej., se puede transferir
purchase_totalal 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 esenciales de tu página, Google Tag Mánager está diseñado para hacer referencia de manera sencilla a la información que incluyes en la capa de datos. No obstante, no es preciso incorporarla. Aunque decidas no declararla explícitamente, podrás continuar accediendo a los valores de la página a través de la función, mas no podrás emplear eventos sin una capa de datos. Al incorporar la capa de datos con variables y valores asociados, en lugar de esperar a que se carguen en la página, estarán libres 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, ya antes del fragmento de contenedor:

El fragmento anterior es un objeto vacío que puedes rellenar con la información que quieras transferir 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 Mánager 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 tiene 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 seleccionadas 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 que los visitantes salgan de la página. 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. 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 definir 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 Mánager 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 singular llamada
eventque se usa en los procesadores de eventos JavaScript para comenzar la activación de etiquetas cuando los usuarios interactúan con elementos del sitio web, como botones. Por poner un ejemplo, puedes hacer que se active una etiqueta de seguimiento de conversiones en el momento en que 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 acontecimientos en función de la interacción de los usuarios con los elementos del sitio, 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., anexa 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 señala de qué elemento o evento se trata.

Por ejemplo, si quieres acotar 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 veces, posiblemente los datos que quieras recoger o bien utilizar para 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 acontecimientos 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 bien seleccionado en un formulario, metadatos asociados a un vídeo que reproduce un usuario, el tono de un producto (p. ej., un turismo) que ha adaptado un visitante o bien las URL de destino de los links en los que se ha hecho click.

Del mismo modo que con los eventos, si deseas 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 señala el nombre de la variable de capa de datos que se marcha a delimitar, y
variable_valuees una cadena que indica el valor de la variable de capa de datos que se va a delimitar 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 turismos, puedes enviar la próxima variable dinámica de capa de datos:

Enviar varias variables a la vez

En lugar de usar el objeto
dataLayer.push()con cada variable y acontecimiento, puedes mandar múltiples variables y eventos al unísono. A continuación te mostramos un ejemplo de cómo hacerlo:

También puedes emplear esta técnica en un gestor de acontecimientos 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 click en el link 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(colorado).

Cómo funciona la sintaxis asíncrona

Google Tag Manager es una etiqueta asíncrona, es decir, cuando se ejecuta no evita que se rendericen otros elementos de la página. También hace que las demás etiquetas que se implementan a través de Google Tag Mánager lo hagan de una manera asíncrona, lo que quiere decir que una etiqueta de carga lenta no bloqueará otras etiquetas de seguimiento.

El objeto dataLayer es el que vuelve 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 emplear
dataLayer.pushpara transferir más metadatos a Google Tag Mánager a través dey para especificar acontecimientos.

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

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

Evitar los errores más habituales

Cuando implementes Google Tag Mánager, ten en cuenta 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. Una vez que 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 un evento sin las mayúsculas y minúsculas convenientes, el envío no se realizará adecuadamente. 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 bien "nativo"), se recomienda añadirlas para evitar inconvenientes. Ejemplos:

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

Si empleas nombres diferentes para exactamente las mismas variables en diferentes páginas, Google Tag Manager no podrá activar las etiquetas con uniformidad en todas 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 deseas 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 implementar 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 Manager no solamente se deben duplicar, sino también
migrara Google Tag Manager. Para obtener más información sobre cómo hacerlo, consulta la sección). posicionamiento seo tarifas , si implementas etiquetas con Google Tag Manager y a través de otros sistemas, o si las introduces en el código fuente de tu sitio web, se produzcan situaciones de inflación u otros inconvenientes de integridad de datos generados por estas etiquetas. Por servirnos de un ejemplo, si migras tu código de seguimiento de Google Analytics a fin de que se active desde Google Tag Mánager, tendrás que quitar el código de seguimiento de 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, se llama
dataLayerde forma predeterminada. Si deseas mudar el nombre de esta capa, debes sustituir su valor de parámetro (destacado 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, o sea, cuando esta se declare ya antes del fragmento y cuando se envíen a ella eventos o variables dinámicas con la API
push(), también deberían ajustarse a fin de 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 5 pasos:

1. 
   Crea un mapa de tu sitio (opcional)
   

   Para iniciar la migración, debes pensar qué etiquetas ya están implementadas 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 recogerás (variables). diseño web para marca personal de etiquetas con los datos que estas etiquetas deben recoger y los eventos o páginas que deseas 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 Mánager en el sitio web (vacío) e impleméntalo. Consulta lapara 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.

   
   
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 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 Mánager con las plantillas apropiadas y ajustando los activadores correctamente. Consulta más información en el.

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

   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 con un único envío de código.
   • Una vez que sepas que se ha hecho el envío apropiadamente, 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 de que se apliquen los cambios en el sitio. En un caso así, en lugar de perderse, algunos datos se podrían duplicar. Esta duplicación solo se produciría una sola vez.

   
   

Para iniciar la migración, debes pensar qué etiquetas ya están incorporadas en el sitio web y qué datos deseas recoger. Para recoger estos datos, 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.

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 obtener 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 web 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, sencillamente añádelas y configúralas en la interfaz de administración de Google Tag Mánager con las plantillas apropiadas y ajustando los activadores correctamente. Consulta más información en el.

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 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 un caso así, en lugar de perderse, algunos 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 Mánager necesitas 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 utilizar el mismo contenedor en múltiples sitios, se aconseja que cada propiedad web independiente que gestiones se implemente con su contenedor. Así, se evita que los cambios específicos de un sitio web tengan efectos no deseados en otros que usen exactamente el mismo contenedor. No obstante, en ciertos 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.

consultoria sem un solo contenedor en múltiples dominios, es esencial que configures minuciosamente las etiquetas y activadores en Google Tag Mánager. El activador predeterminado "Todas las páginas" de Google Tag Mánager (esto es,
$ 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 implementado el fragmento del contenedor. Como ciertas etiquetas tienen configuraciones o propósitos específicos según el dominio en el que se incorporan, es posible que tengas que crear activadores personalizados o bien, aun, eliminar 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 forma individual.

Por ejemplo, puedes implementar 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. O sea, en
-petstore.comy
dogs.example-petstore.com, las cookies deberían asignarse al dominio común
.example-petstore.com. Sin embargo, en el sitio secundario
www.my-example-blogsite.com, puedes asignarlas a
.my-example-blogsite.com. Por esta razón, querrás que una de las dos etiquetas de código de seguimiento de GA (una correspondiente a
.example-petstore.comy otra a
.my-example-blogsite.com) se active en todos y cada uno de los dos dominios. Si ambos comparten un contenedor de GTM y se ha usado el activador predeterminado "Todas las páginas" en Google Tag Manager, se activarán todas y cada una de las etiquetas en todas y cada una de las páginas.

Varios contenedores en una página

Para que una página tenga un rendimiento excelente, su número de contenedores de Google Tag Manager ha de 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 poner un ejemplo, puedes implementar 2 fragmentos de contenedor de la siguiente 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 forma inmediata después de la etiqueta de apertura
   <body>de la página:
   

   <!-- Google Tag Mánager (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 emplear una única capa de datos común para todos y cada uno de los contenedores de Google Tag Manager de una página. En caso contrario, es posible 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 contenedores de la página. Si es preciso, puedes mudar el nombre de la capa de datos de todos y cada uno de los contenedores de la página.

No implementes un contenedor de Google Tag Mánager a través de una etiqueta en código HTML adaptada en otro contenedor de Google Tag Manager pues 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 bien interactúes en una película Flash, puedes utilizar el método ActionScript
ExternalInterfacepara enviar 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 primordial 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 usar ActionScript 3 a fin de que se active un evento cuando se hace clic en un botón
mybutton_btn, implementa el próximo código en tu SWF:

Para que el método
ExternalInterfacefuncione correctamente, 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 bien que visitan páginas desde dispositivos que no aceptan JavaScript, Google Tag Manager incluye un fragmento
<noscript>para que se incorporen etiquetas que no dependen de JavaScript aunque el JavaScript principal de GTM no cargue.

Sin embargo, es esencial tener en cuenta 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. Por tanto, si alguno de los activadores no dependientes de JavaScript que activan tus etiquetas (y que deseas que lo hagan si bien JavaScript no cargue) depende de las variables de capa de datos, debes trasferir esas variables al iframe
<noscript>como parámetros de consulta. Por poner un ejemplo, para activar una etiqueta cuando
pageCategoryes
sportsy
visitorTypees
returning, tendrías que modificar 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 una serie de 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 recomendamos que te familiarices con losde Tag Mánager, lay la.

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

Usar una URL relativa al protocolo

De forma predeterminada, el fragmento de contenedor de Google Tag Mánager siempre y en todo momento utiliza "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 Mánager de forma relativa al protocolo, puedes hacerlo ajustando el protocolo de URL de origen, resaltado a continuación, en el fragmento de contenedor a fin de que sea
//
en lugar de
https://.

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

Las versiones precedentes del fragmento de contenedor de Google Tag Manager siempre empleaban una URL relativa al protocolo para cargar contenedores, es decir,
//
).Estas versiones continuarán marchando sin actualizarse.

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