Nuevo código de seguimiento de Google Analytics: Global Site Tag (gtag.js)

Desde hace dos meses Google empezó a implementar Global Site Tag (gtag.js) un nuevo script para rastrear el tráfico de tu páginas web. El objetivo de esta actualización es poder hacer rastreo a través de todos los productos Google con un mismo código, aunque por ahora, este código únicamente servirá para Google Analytics.

¿Debo actualizar mi código de Google Analytics?

Desde la actualización de urchin.js a ga.js y de ga.js a Universal Analytics (analytics.js), las tres versiones del script de seguimiento siguen disponibles desde los servidores de Google junto a su documentación.

En todas las actualizaciones del código de seguimiento de GA la mayor diferencia es la sintaxis y el soporte de nuevos features. Actualmente, deberías estar usando Universal Analytics (analytics.js) y si no estas en esta versión, te recomiendo actualizar lo antes posible.

Para gtag.js, solo hay un cambio de sintaxis, el funcionamiento entre Universal Analytics y Global Site Tag, es el mismo.

La documentación de Google menciona:

“You will be able to benefit from the latest dynamic features and integrations”

Al usar gtag.js, aunque al parecer, las nuevas características serán más enfocadas en el seguimiento a través de productos Google, más que expandir las capacidades de Google Analytics.

¿Cómo migrar de analytics.js a gtag.js?

Primero, debes identificar qué características de seguimiento usas de Analytics.js. Si únicamente instalaste el código de configuración inicial, para ti será muy fácil migrar, pero si en cambio, haces seguimiento de eventos y seguimiento de ecommerce, esto tomará un poco más de tiempo. En este blog post, te enseñaré a migrar la configuración básica y el seguimiento de eventos.

1. Cambia el código de seguimiento inicial

Reemplaza el código de Analytics.js:

<!-- Google Analytics -->
&lt;script&gt;
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*newDate();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'GA_TRACKING_ID', 'auto');
ga('send', 'pageview');
&lt;script&gt;
<!-- End Google Analytics -->

Por el nuevo código de gtag.js:

<!-- Global Site Tag (gtag.js) - Google Analytics --><scriptasyncsrc="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID">&lt;script&gt;
&lt;script&gt;
  window.dataLayer = window.dataLayer || [];
  functiongtag(){dataLayer.push(arguments)};
  gtag('js', newDate());

  gtag('config', 'GA_TRACKING_ID');
&lt;script&gt;

Reemplazando GA_TRACKING_ID por el ID de la propiedad de tu sitio web.

2. Seguimiento de Pageviews

Elminia el código de Analytics.js:

// Uses the default tracker to send a pageview to the// Google Analytics property with tracking ID GA_TRACKING_ID.
ga('send', 'pageview');

Y en el código que usamos en el punto 1, la línea:

gtag('config', 'GA_TRACKING_ID');

Envia automaticamente un pageview a Google Analytics a la propiedad con el ID que reemplacemos en GA_TRACKING_ID

3. Seguimiento de eventos

Elimina el código de Analytics.js:

ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

Y reemplaza este por:

gtag('event', eventName, eventParameters);

Cómo puedes ver, en gtag.js mandamos el nombre del evento como campo requerido y agregamos parametros adicionales, en estos parametros adicionales colocaremos la categoria, acción y label de nuestro evento.

Entonces si tenemos un evento en analytics.js que luce asi:

ga('send', 'event', 'Videos', 'play', 'Fall Campaign');

En gtag.js se verá así:

gtag('event', 'play', {
  'event_category': 'Videos',
  'event_label': 'Fall Campaign'
});

Con esto, si tienes la configuración inicial de Google Analytics y un seguimiento de eventos básico, estás listo para ir a producción con gtag.js.

Estamos preparando un curso de Google Analytics para desarrolladores enfocado a la configuración de gtag.js a profundidad según tu tipo de aplicación. Escribe en los comentarios que te gustaría aprender en este curso 🙌🏻