Guía para desarrolladores  |  Google Tag Mánager para el seguimiento web |
En este documento se explica de manera detallada cómo incorporar Google Tag Manager en tu sitio web.
Para conseguir la máxima flexibilidad, portabilidad y facilidad de implementación, Google Tag Mánager marcha mejor si se implementa con una capa de datos. Una capa de datos es un objeto que contiene toda la información que quieres trasferir a Google Tag Manager, y puedes emplearla para trasferir información como eventos 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 100 €), o 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 sitio de estrategia de posicionamiento , 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 forma sencilla a la información que incluyes en la capa de datos. No obstante, no es preciso incorporarla. Si bien decidas no declararla explícitamente, podrás continuar accediendo a los valores de la página a través de la función, pero no podrás emplear acontecimientos sin una capa de datos. Al implementar la capa de datos con variables y valores asociados, en vez de aguardar a que se carguen en la página, estarán disponibles tan pronto como precises que activen etiquetas.
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:
El fragmento precedente es un objeto vacío que puedes rellenar con la información que quieras transferir a Google Tag Manager. Por servirnos de un 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 usuario 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 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 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 libres a fin de que Google Tag Mánager active las etiquetas escogidas al cargar la página. Ejemplos:
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 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 detallas la categoría de la página de registro con la variable
pageCategory, también debes utilizar esta variable para definir la categoría de una página de adquiere.
No es necesario declarar explícitamente una capa de datos. Por consiguiente, si decides no incorporar 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.
Google Tag Manager ofrece una variable de capa de datos singular llamada
eventque se utiliza 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 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 links, botones, componentes de un sistema de menú basado en Flash, o bien 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 evento es la siguiente:
donde
event_namees una cadena que señala de qué elemento o bien evento se trata.
Por ejemplo, si quieres definir como evento que un usuario haga click 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 usar a fin de que activen determinadas etiquetas no se carguen hasta que el usuario haya interactuado con la página. Si empleas una combinación de variables y acontecimientos 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 escogido en un formulario, metadatos asociados a un vídeo que reproduce un usuario, el color de un producto (p. ej., un coche) que ha adaptado un visitante o las URL de destino de los enlaces en los que se ha hecho clic.
Del mismo modo que con los eventos, si deseas usar esta función, tendrás que llamar a la API
push()para añadir o bien sustituir 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 acotar, y
variable_valuees una cadena que señala el valor de la variable de capa de datos que se marcha a definir o bien a sustituir.
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 próxima variable dinámica de capa de datos:
En lugar de usar el objeto
dataLayer.push()con cada variable y evento, puedes enviar múltiples variables y eventos al unísono. A continuación te mostramos un caso de cómo hacerlo:
También puedes utilizar 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 tenías. Por poner un ejemplo, si al hacer clic 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).
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 implementan 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, 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 precisarse ya 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.
Cuando incorpores Google Tag Manager, ten presente lo siguiente:
Si utilizas una asignación para dar valores a
dataLayer(p. ej.,
dataLayer = ['item': 'value']), se sobrescribirán los valores que 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 utilizar el objeto
dataLayer.push('item': 'value')para añadirle más valores en tus secuencias de comandos.
Si procuras enviar una variable o bien un acontecimiento sin las mayúsculas y minúsculas convenientes, el envío no se realizará adecuadamente. Ejemplos:
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 "nativo"), se recomienda añadirlas para eludir inconvenientes. Ejemplos:
Si utilizas 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:
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 que se activan desde Google Tag Mánager no solamente se deben duplicar, sino más bien también
migrara Google Tag Manager. 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 web, se produzcan situaciones de inflación u otros problemas de integridad de datos generados por estas etiquetas. Por servirnos de un ejemplo, si migras tu código de seguimiento de Google Analytics para que se active desde Google Tag Mánager, tendrás que eliminar el código de seguimiento de Google Analytics insertado en el código fuente de tu sitio web.
La capa de datos que Google Tag Mánager inicia y a la que hace referencia, se llama
dataLayerde forma predeterminada. Si deseas cambiar 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 antes del 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:
Para sacar el máximo provecho a Google Tag Manager, te invitamos a que migres a esta herramienta la mayoría de tus etiquetas, excepto las que. En esta sección se describe el flujo de trabajo recomendado de migración en cinco pasos:
Para empezar la migración, debes pensar qué etiquetas ya están incorporadas en el sitio y qué datos deseas recoger. Para recoger estos datos, decide de qué acciones quieres hacer un seguimiento (acontecimientos) 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 páginas que quieres asociarles.
Una vez que hayas creado el mapa, instala solo el fragmento de Google Tag Mánager en el sitio (vacío) e impleméntalo. Consulta lapara conseguir más información.
Personaliza la instalación de Google Tag Mánager 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, 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.
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:
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 de que se apliquen los cambios en el sitio web. 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 empezar 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 deseas hacer un seguimiento (acontecimientos) y qué datos auxiliares de la página recogerás (variables). Crea un mapa de etiquetas con los datos que estas etiquetas deben recoger y los eventos o bien 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) e impleméntalo. Consulta lapara conseguir más información.
Personaliza la instalación de Google Tag Mánager 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 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 Manager 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 tan solo unos minutos, deberás:
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 de que se apliquen los cambios en el sitio web. 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 precisas hacer algo más con las etiquetas, no te hará falta mudar el código del lugar a través de la interfaz de esta plataforma.
Aunque puedes utilizar exactamente el mismo contenedor en múltiples sitios web, se aconseja que cada propiedad web independiente que gestiones se implemente con su propio contenedor. Así, se evita que los cambios específicos de un sitio tengan efectos no deseados en otros que usen el mismo contenedor. Sin embargo, en algunos casos en los que los dominios o subdominios de nivel superior se consideran miembros del mismo sitio, es recomendable administrar las etiquetas a través del mismo contenedor de Google Tag Mánager.
Si usas 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,
dólares americanos url matches RegEx .*) activará las etiquetas en todas las páginas de todos los dominios en los que se haya implementado el fragmento del contenedor. Como algunas etiquetas tienen configuraciones o bien propósitos específicos según el dominio en el que se incorporan, es posible que tengas que crear activadores adaptados o bien, incluso, eliminar el activador "Todas las páginas" para activar etiquetas en todas las páginas de un dominio o bien de cada dominio de manera individual.
Por ejemplo, puedes implementar tu código de seguimiento de Analytics a través de GTM con configuraciones a fin de 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. Sin embargo, en el sitio web secundario
www.my-example-blogsite.com, puedes asignarlas a
.my-example-blogsite.com. Por esta razón, 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 todos y cada uno de ellos de los 2 dominios. diseño de webs catálogo un contenedor de GTM y se ha utilizado el activador predeterminado "Todas las páginas" en Google Tag Manager, se activarán todas y cada una de las etiquetas en cada una de las páginas.
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 servirnos de un ejemplo, puedes implementar dos fragmentos de contenedor de la siguiente manera:
<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 Mánager --><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 usar una única capa de datos común para todos y cada uno de los contenedores de Google Tag Manager de una página. De lo contrario, es posible que algunos 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 necesario, puedes mudar el nombre de la capa de datos de todos los contenedores de la página.
No incorpores 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 porque podría añadirse latencia en las etiquetas del contenedor secundario y tener otras consecuencias.
Para que Google Tag Manager 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 Manager debe implementarse 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 ejemplo, si deseas emplear ActionScript tres para que se active un acontecimiento cuando se hace click en un botón
mybutton_btn, incorpora el próximo código en tu SWF:
Para que el método
ExternalInterfacefuncione adecuadamente, asegúrate de que el atributo
allowscriptaccesstiene asignado el valor
alwaysantes de insertar el SWF:
Para dar cabida a los usuarios que tienen JavaScript inhabilitado o bien que visitan páginas desde dispositivos que no aceptan JavaScript, Google Tag Mánager 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 importante 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. Por consiguiente, si ciertos 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 transferir 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 alterar el fragmento de contenedor de la página de la siguiente 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 "&".
Google Tag Mánager incorpora una serie de funciones a fin de 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 losde Tag Manager, 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.
De forma predeterminada, el fragmento de contenedor de Google Tag Manager siempre y en todo momento usa "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, 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 de URL de origen, resaltado 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 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 cerciorarse de que, al configurar etiquetas personalizadas para que se activen en páginas seguras, dichas etiquetas también son seguras o relativas al protocolo.
| Êîììåíòèðîâàòü | « Ïðåä. çàïèñü — Ê äíåâíèêó — Ñëåä. çàïèñü » | Ñòðàíèöû: [1] [Íîâûå] |
