sábado, 18 de noviembre de 2017

Implementar Google Tag Manager con Gtag.js


IMPORTANTE: este hack no permite hacer preview de los tag en GTM, todavía. Estoy a la espera de esta actualización necesaria, para usar Gtag.js con todos mis clientes.

Global Tag (Gtag.js) es el nuevo estándar de implementación de las plataformas de Google. Incluye Analytics, Tag Manager, DoubleClick y Optimize.

Desde hace varios años vengo usando Google Tag Manager (GTM) para todo, y ya me acostumbré a su estándar y al dataLayer. GTM hace mi trabajo mucho más simple. Pero el nuevo estándar Gtag.js (anunciado en el Google Partner Summit 360 en agosto de 2017) apareció de la nada y me llenó de incertidumbre. ¿Para qué quiero este código nuevo si puedo hacer tanto con el antiguo?

La principal diferencia en la implementación de GTM, es que el estándar antiguo es de dos piezas (un script y un noscript) y el dataLayer es optativo (antes del script); mientras que el estándar nuevo de Gtag.js es una sola pieza, e incluye el dataLayer en su implementación.

Antiguo Google Tag Manager


Nuevo Google Tag Manager (octubre 2017)


Quienes usan el código de Google Analytics, se darán cuenta que el estándar ya cambió en GA durante octubre de 2017, y ahora nos presenta el código Gtag.js; además, verán que el código es exactamente el mismo para GTM, con la única diferencia del identificador que se está llamando.

Analytics llama a GA- y Tag Manager llama a GTM-


La manera correcta de implementar Gtag.js es copiando el código lo más arriba posible dentro de <head>, idealmente pegado a este tag. El código estándar de GA y GTM es el mismo, eactamente el mismo, pero recuerden que hay que cambiar el identificador en dos lugares.

<!-- Global site tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XX-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'XX-XXXXXXX');
</script>

Y si vas a incluir un dataLayer en tu implementación, recuerda que va dentro del código.

window.dataLayer = window.dataLayer || [{el dataLayer va aquí}];

No hay comentarios:

Publicar un comentario