Guía de implementación de Google TagManager

Google Tag Manager fue lanzado en octubre del 2012 con el fin de unificar todos los códigos de seguimiento (etiquetas) en un solo lugar. Así como Google Analytics tiene su propio código de seguimiento, AdWords, DoubleClick u otras herramientas tienen sus propias etiquetas.

Google Tag Manager centraliza todas las etiquetas en un solo script, que dependiendo de determinadas reglas especificadas en la herramienta, se ejecutará una u otra etiqueta, o varias a la vez.

Actualmente Google Tag Manager incluye los siguientes tipos de etiquetas en modo de plantilla con el fin de minimizar la posibilidad de errores en la sintaxis del código.

  • AdWords Conversion Tracking
  • DoubleClick Floodlight Counter
  • DoubleClick Floodlight Sales
  • Universal Analytics
  • GDN Remarketing
  • Custom Image Tags
  • Custom HTML Tags
  • clicktale

Google Tag Manager funciona por medio de un solo script llamado Contenedor que se incluye dentro de todas las páginas dentro del sitio web. Dicho Contenedor remplaza las etiquetas como Google Analytics, Adwords y otros códigos ajenos a Google que desean ser administrados por Google Tag Manager.

Una vez incluido el contenedor dentro del sitio, será posible actualizar, agregar y administrar las etiquetas desde la cuenta en Google Tag Manager.

Google Tag Manager realiza un seguimiento de las etiquetas que se deben activar en el sitio y de las reglas que especifican cuándo se deben activar las etiquetas. Cada vez que se carga una página con el contenedor, se solicita el código JavaScript de gtm.js. Se envía la configuración de etiquetas más actualizada al navegador del visitante con el conjunto de reglas y etiquetas que deben activarse. A medida que el visitante explora o interactúa con las páginas que tienen el contenedor, se evalúan las reglas y las etiquetas se activan según corresponda.

GTM es una etiqueta asincrónica, por lo que, cuando se ejecuta, no bloquea la presentación de otros elementos de la página. También provoca que las demás etiquetas que se implementan a través de Google Tag Manager lo hagan también de forma asincrónica, lo que significa que una etiqueta de carga lenta no bloqueará otras etiquetas de seguimiento.

Los procesos de carga asincrónica, benefician la performance del sitio Web, mejorando su velocidad y volviendo de un sitio más optimizado para los buscadores.

¿Cómo implementar Google Tag Manager dentro del sitio Web?

1- Creación de cuenta en Google Tag Manager

Se pueden crear o administrar varias cuentas de Google Tag Manager a partir de una cuenta de Google ingresando a http://www.google.com.ar/tagmanager.

Cada vez que se inicia sesión se muestra la lista de cuentas de dicho administrador a las que tiene acceso, aunque normalmente sólo se necesita una “cuenta por empresa”.

google-tagmanager-crear-cuenta

 

2- Creación de contenedor

Como parte de la cuenta de Google Tag Manager la herramienta solicitará la creación de un Contenedor. Un Contenedor incluye todas las etiquetas del sitio web, por lo que se recomienda asignar al Contenedor un nombre relacionado con el sitio.

google-tagmanager-crear-cuenta_01google-tagmanager-crear-cuenta_02

3 – Instalar el contenedor de Google TagManager dentro del sitio Web

El fragmento de código de GTM esta asociado a un contenedor mediante un id GTM-XXXX. El Script de GTM Debe ser incluido en cada página del sitio inmediatamente después de la etiqueta <body>.

Ejemplo implementación de código Google Tag Manager:

<!DOCTYPE html>
<html lang="  ">
<head>
<meta charset="    "/>
<title>   </title>

</head>

<body>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

</body>
</html> 

Para buscar el fragmento de código del Contenedor dentro del a cuanta de GTM, seleccione la opción “Settings” de la sección “Users & Settings”. Allí se encuentra el código que deberá ser incluido en cada página.

instalar-google-tagmanager-2014-10

Considera que,  será necesario eliminar todas las etiquetas de Google Analytics que residen actualmente en el sitio web. Ya que el objetivo es implementar desde Google Tag Manager los scripts de Google Analytics, por lo que se requiere que NO haya ninguna página con el código de seguimiento de Google Analytics.

Gradualmente iremos borrando otros scripts como AdWordsRemarketing o clicktale del código de nuestros sitios a medida que los vallamos implementando desde GTM.

 

Ventajas de implementar Google Tag Manager

Mejora la experiencia de usuario

Uno de los principales beneficios de Google Tag Manager se basa en la optimización de velocidad del sitio web, factor fundamental para un buen posicionamiento web. La causa radica en la inclusión de un script único, de carga asincrónica, que incluye varios scripts. Estos scripts se incluyen dependiendo de ciertas reglas definidas en Tag Manager y al igual que el script Contenedor, se cargan de forma asincrónica.

Independencia de sectores de desarrollo

Sólo se requerirá al sector de IT la inclusión del script Contenedor dentro de todas las páginas del sitio web y la eliminación de otras etiquetas que serán gestionadas desde Tag Manager, como Google Analytics, Adwords, etc. Luego el sector que conozca las reglas de negocio podrá gestionar las etiquetas desde Google Tag Manager sin la interacción con el sector IT.

Control de calidad o QA

La obtención de una vista previa es fundamental para el control de calidad (QA). Cada cambio antes de su publicación, podrá hacer un test un  mediante una vista previa de Google Tag Manager y comprobar que los cambios aplicados en la configuración del Contenedor no afecta al sitio. Además existe una opción “Debug” para ver cuáles son las etiquetas que se activan al navegar el sitio e interactuar con cada página.

A su vez, es posible compartir la vista previa con otros usuarios para un mejor control de calidad.

GTM Update Previewing and Debugging tools

Historial de versiones

Con la modificación o creación de nuevos Contenedores se crean nuevas versiones, generando de esta forma un historial de todas las versiones creadas hasta el momento.

Se puede acceder al listado de versiones desde la sección “Versions” y volver a versiones anteriores cuando sea necesario. El historial de versiones facilita la recuperación frente a errores.

google-tagmanager-versionado

Reduce tiempos y errores de sintaxis

Las tareas de publicación y testing se realizan dentro de Google Tag Manager, por lo que no será necesario que el sector IT publique la nueva versión en su ambiente de testing, luego en su ambiente de stagging y luego a producción.

Además, Google Tag Manager incluye varias etiquetas predefinidas en donde su configuración se realiza mediante el uso de plantillas. Esto reduce errores en la sintaxis de las etiquetas.

Administración de usuarios

Varios usuarios con diferentes responsabilidades pueden acceder y colaborar en Tag Manager.

La administración de usuarios resulta fundamental para definir quiénes podrán publicar, modificar, eliminar o sólo tendrán una vista de sólo lectura.

Los privilegios se asignan en función de cada Contenedor. Para un Contenedor en particular, un usuario puede tener los siguientes permisos:

  • Sin acceso: el usuario no podrá ver el Contenedor de la cuenta
  • Sólo lectura: el usuario podrá ver las etiquetas, reglas y macros del contenedor.
  • Lectura y escritura: el usuario puede agregar/editar etiquetas, reglas y macros del contenedor.
  • Lectura, escritura, eliminación y publicación: el usuario incluye además de lectura y escritura, los permisos de eliminación y publicación de Contenedores.

Caché inteligente

Google Tag Manager minimiza el número de peticiones generadas por los servidores mediante el uso de “Intelligent caching”, permitiendo de esta forma disponer de todas las etiquetas cuando sea necesario.