Implementar Gtag.js y Google Tag Manager (separados) para mejorar la Performance

No hay una sola manera de implementar de Google Analytics en un sitio Web. La manera que suelo recomendar en mi día a día profesional es la siguiente:

Lo más arriba del HEAD posible, en este orden:

• Definir dataLayer estático.
• Código anti-flickr de Google Optimize.
• Código Script de Google Tag Manager.

E inmediatamente después de la etiqueta BODY:

• Código Noscript de Google Tag Manager.

Este último se debe excluir para los sitios que dependen de Javascript del navegador del usuario.

Pero durante los últimos meses me he encontrado con distintas alertas de performance que dicen que GTM, Optimize y GA hacen mi sitio más lento. Hice de todo para mejorar la performance pero no lograba alcanzar el 95% dorado de optimización.

Así que hice algunas pruebas y tomé decisiones difíciles, basado en que GA se puede implementar sin un intermediario como GTM. 

1. No más experimentos con Optimize. Cuando tenga necesidad de hacer experimentos, lo volveré a instalar.
2. Colocaré Gtag.js en la cabecera.
3. Optimizaré GTM para operar al mínimo, y su código se va al Footer.

Quitar Google Optimize de mi sitio.

Me fascina hacer experimentos para mejora la usabilidad y la experiencia del usuario. Me mantienen despierto. Pero la verdad es que no necesito hacerlos todo el tiempo. 

Así que quitar el código Anti-Flickr del sitio y pausar Google Optimize en GTM es la decisión correcta. 

Cambiar el Google Analytics de GTM por Gtag.js en código

Si quieren saber la diferencia entre hacerlo con GTM o en el código, pues la diferencia es mínima y se reduce a hacer bien la implementación del JS y activar los eventos como script en GTM. Por ejemplo:

Este código está arriba dentro del HEAD.

Primero se define el dataLayer. En mi caso las variables se construyen con PHP usando la metadata de la página en Wordpress. Este dataLayer luego es usado en GTM y también se pueden usar sus variables para nutrir las dimensiones personalizadas en Gtag.js

var miData = window.dataLayer[0];

Y puedes usar las variables del dataLayer así:

var UserId = miData.userid;

Luego está el código de Gtag.js con la configuración de los datos que necesito medir: User-ID, IP anónimo, mapa de dimensiones personalizadas y el enlace cross-domain. El mapa de dimensiones personalizadas es necesario para construir el evento page_view.

IMPORTANTE: el «config» del gtag,js envía un pageview. Siempre. Y si agregas un evento después, tienes que tomar una decisión: uso el pageview de «config» o uso el pageview del evento. Yo prefiero tener un evento que envíe el pageview, junto con otras variables. Por lo tanto hay que prevenir que el «config» envíe el pageview. Esto se logra con la siguiente línea (dentro del «config»): 

'send_page_view': false

 

Y al final está el evento page_view que envía las variables personalizadas definidas en el custom_map, junto con el hit a Google Analytics. 

Cambiar los eventos de GA en GTM

Una vez que GA queda implementado en el código con Gtag.js, tienes que pausar el tag en GTM para que no siga enviando datos.

Si tienes eventos de GA configurados en GTM, también tienes que cambiarlos por Custom HTML. Por ejemplo:

El activador de este tag sigue siendo el mismo de cuando era un tag de GA para evento. Se mantienen las variables de categoría, acción, etiqueta, valor, no-interacción. En este ejemplo además hay una variable "geo" que está definida en el mapa de dimensiones personalizadas y que se define en un dataLayer.push() en el footer del sitio, debajo del código Script de GTM.

El resultado al final del ejercicio fue una mejora en performance inmediata. Y ninguna diferencia en el reporte de datos en Google Analytics.

IMPORTANTE: todos los eventos se envían "con interacción" por defecto. Para que no dañen las métricas del sitio, siempre coloca la línea de no-interacción verdadera dentro de los eventos.

'non_interaction': true

Puedes usar los eventos estándar o crear los tuyos propios. Y casi todos los eventos se reflejarán en el reporte de Eventos de Google Analytics.