26

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

9797Puntos

hace 2 años

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 --><script>
(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');
</script><!-- 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;
<script>window.dataLayer = window.dataLayer || [];
  functiongtag(){dataLayer.push(arguments)};
  gtag('js', newDate());

  gtag('config', 'GA_TRACKING_ID');
</script>

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 🙌🏻

Juan Pablo
Juan Pablo
@unmalnick

9797Puntos

hace 2 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
2

Hola JP, si tengo Google TagManager es necesario hacer el cambio o solo es para Google Analitycs?

0
9797Puntos
2 años

Si tienes tag manager no es necesario 😃

1
8129Puntos

Muy buena nota JP! Me gustaría ver un especial de WordPress y Google Analytics con interacciones.

0
9797Puntos
2 años

La verdad es que no cambia mucho, wordpress es solo un CRM, puedes usar lo mismo que explico o un plugin. Yo te recomiendo instalarlo tu mismo y no usar un plugin

1
10847Puntos

Juan Pablo, muchas gracias por la explicacion, espero ver pronto el curso que mencionas.

0
9797Puntos
2 años

Ya está disponible !

1
229Puntos

Excelente información. Ya mismo actualizo. Pero antes me gustaría tener claro algo, ¿qué tipos de ventajas existen al hacer el upgrade?

0
9797Puntos
2 años

Actualmente, es exactamente lo mismo que analytics.js, aun no hay una ventaja que amerite la actualización

0
2Puntos

Buen día.
Buena publicación! Una consulta, para este caso :

ga('create', 'UA-XXX-X', {'allowAnchor': true});
ga('send', 'pageview', { 'page': location.pathname + location.search + location.hash});

Como se convertiría al nuevo gtag.js ?

Saludos