firejoin68

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

Implementación mediante una capa de datos

Para conseguir la máxima flexibilidad, portabilidad y facilidad 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 quieres transferir a Google Tag Manager, y puedes utilizarla para transferir información como acontecimientos o bien 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 cien €), o bien en función de acontecimientos específicos. 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 Manager está diseñado para hacer referencia de forma 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 proseguir accediendo a los valores de la página a través de la función, mas no podrás usar 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 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 precedente es un objeto vacío que puedes rellenar con la información que quieras trasferir a Google Tag Mánager. Por ejemplo, puedes añadir variables a la capa de datos que indiquen 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 para 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 ya 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 libres 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 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 web. Si bien no debes incluir el mismo conjunto de variables en la capa de datos de cada página, debes emplear 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 esta variable para delimitar la categoría de una página de compra.

No es preciso declarar explícitamente una capa de datos. Por ende, si decides no incorporar 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 acontecimientos HTML

Google Tag Manager ofrece una variable de capa de datos singular llamada
eventque se emplea en los procesadores de acontecimientos JavaScript para empezar la activación de etiquetas cuando los usuarios interactúan con elementos del sitio, como botones. Por servirnos de 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 registro 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 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., anexa a los elementos de los que se vaya a hacer un seguimiento). La sintaxis básica para configurar un evento es la siguiente:

donde
event_namees una cadena que señala de qué elemento o evento se trata.

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

A veces, es posible que los datos que desees recoger o usar para que activen determinadas etiquetas no se carguen hasta el momento en que el usuario haya interactuado con la página. Si utilizas una combinación de variables y eventos de capa de datos, podrás mandar esta información a la capa según sea preciso.

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 elegido en un formulario, metadatos asociados a un vídeo que reproduce un usuario, el color de un producto (p. ej., un vehículo) que ha adaptado un visitante o las URL de destino de los enlaces en los que se ha hecho click.

Del mismo modo que con los acontecimientos, si deseas emplear esta función, tendrás que llamar a la API
push()para añadir o reemplazar 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 va a definir, y
variable_valuees una cadena que indica el valor de la variable de capa de datos que se va a acotar o a reemplazar.

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

Enviar varias variables a la vez

En sitio de usar el objeto
dataLayer.push()con cada variable y acontecimiento, puedes enviar varias 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(rojo).

Cómo marcha la sintaxis asíncrona

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

El objeto dataLayer es el que torna 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, emplea el método
dataLayer.push. Puedes emplear
dataLayer.pushpara transferir más metadatos a Google Tag Manager a través dey para detallar acontecimientos.

La creación del objeto dataLayer puede precisarse antes del fragmento de Google Tag Mánager. 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 Manager, 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 del. Una vez que hayas declarado
dataLayer, puedes emplear 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 intentas mandar una variable o un acontecimiento 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 precisas 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 problemas. Ejemplos:

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

Si usas 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 a fin de que se activen las etiquetas cuando se cargue la página en la capa de datos, 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'). marketing digital malaga 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 Mánager sin ayuda de otra herramienta y no han de estar predefinidas en el código

Las etiquetas que se activan desde Google Tag Manager no solo se deben duplicar, sino más bien también
migrara Google Tag Manager. Para obtener más información sobre cómo hacerlo, consulta la sección). Es posible que, 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, se generen situaciones de inflación o bien otros inconvenientes de integridad de datos generados por estas etiquetas. Por servirnos de un ejemplo, si migras tu código de seguimiento de Analytics para 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 Manager comienza y a la que hace referencia, tiene por nombre
dataLayerde forma predeterminada. Si deseas cambiar el nombre de esta capa, debes reemplazar su valor de parámetro (resaltado a continuación) del fragmento de contenedor por el nombre que quieras ponerle.

Así pues, todas y cada una de las referencias que se hagan a la capa de datos, es decir, cuando esta se declare antes del fragmento y cuando se envíen a ella eventos o bien variables dinámicas con la API
push(), también deberían ajustarse a fin de que reflejen el nombre adaptado 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 (opcional)
   

   Para empezar la migración, debes meditar qué etiquetas ya están incorporadas en el sitio web 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 vas a recoger (variables). Crea un mapa de etiquetas con los datos que estas etiquetas deben recoger y los acontecimientos 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 Mánager en el sitio web (vacío) y también 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 web 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, sencillamente añádelas y configúralas en la interfaz de administración de Google Tag Manager con las plantillas apropiadas y ajustando los activadores de manera correcta. 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 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 apropiadamente, pulsa el botón "Publicar" de la versión del contenedor.
   
   

   Con este método se pueden perder ciertos datos, pero 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, ciertos 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 incorporadas en el sitio web y qué datos quieres recoger. Para recoger estos datos, decide de qué acciones deseas 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 quieres asociarles.

Una vez que hayas creado el mapa, instala solo el fragmento de Google Tag Manager en el sitio (vacío) e 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 web con el fragmento de Google Tag Manager y las API de recogida de datos, debes añadir lasdel lugar 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 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 ciertos 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 vez 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 sitio 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 empleen el mismo contenedor. No obstante, en algunos casos en los que los dominios o bien 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 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 (esto es,
$ url matches RegEx .*) activará las etiquetas en todas las páginas de todos y cada uno de los dominios en los que se haya implementado el fragmento del contenedor. desarrollo de microsite o bien propósitos específicos según el dominio en el que se implementan, es posible que tengas que crear activadores personalizados o bien, incluso, eliminar el activador "Todas las páginas" para activar etiquetas en todas y cada una de las páginas de un dominio o de cada dominio de forma individual.

Por ejemplo, puedes incorporar tu código de seguimiento de 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 van a configurar las cookies de GA. Es decir, en
-petstore.comy
dogs.example-petstore.com, las cookies deberían asignarse al dominio común
.example-petstore.com. No obstante, en el sitio secundario
www.my-example-blogsite.com, puedes asignarlas a
.my-example-blogsite.com. Por este motivo, 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 ambos comparten un contenedor de GTM y se ha usado el activador predeterminado "Todas las páginas" en Google Tag Mánager, se activarán todas 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, incorpora los fragmentos de contenedor con un objeto de capa de datos común. Por ejemplo, puedes implementar 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 Mánager --> <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); )( empresa de posicionamiento en malaga ,document,'script','dataLayer','GTM-YYYY');</script> <!-- End Google Tag Mánager -->

   
   
2. Copia este fragmento y pégalo inmediatamente 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 utilizar una única capa de datos común para todos los contenedores de Google Tag Manager de una página. En caso contrario, puede que ciertos activadores dejen de funcionar, lo que podría tener otras consecuencias. Por tanto, no cambies el nombre de la capa de datos de un subconjunto de contenedores de la página. Si es necesario, puedes cambiar el nombre de la capa de datos de todos y cada uno de los contenedores de la página.

No incorpores un contenedor de Google Tag Manager a través de una etiqueta HTML personalizada en otro contenedor de Google Tag Mánager por el hecho de que 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 bien interacciones en una película Flash, puedes usar 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 primordial del SWF como se explica en la.

Los acontecimientos y las variables dinámicas de la capa de datos se pueden mandar del componente Flash a Google Tag Manager llamando al método
pusha través de
ExternalInterface. Por servirnos de un ejemplo, si deseas utilizar ActionScript 3 para que se active un evento cuando se hace clic 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 aceptan JavaScript, Google Tag Manager incluye un fragmento
<noscript>para que se incorporen etiquetas que no dependen de JavaScript si bien el JavaScript primordial 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 bien variables dinámicas que se envíen a dicha capa, dependen de JavaScript para funcionar. Por tanto, si alguno de los activadores no dependientes de JavaScript que activan tus etiquetas (y que quieres que lo hagan aunque JavaScript no cargue) depende de las variables de capa de datos, debes trasferir 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 una serie de funciones a fin de que tus sitios web y aplicaciones sean seguras. Además de las próximas 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 a fin de que solo se incorporen 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 Mánager siempre utiliza "https" para cargar contenedores; o sea,
). De este modo, los contenedores están más protegidos frente a prácticas maliciosas y de snooping y, en muchos casos, también mejora el desempeño.

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

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

Las versiones anteriores del fragmento de contenedor de Google Tag Manager siempre y en todo momento 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 Mánager también son relativas al protocolo, es esencial cerciorarse 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.