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.
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.
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.
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"><script>
<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.
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
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 🙌🏻
Hola JP, si tengo Google TagManager es necesario hacer el cambio o solo es para Google Analitycs?
Si tienes tag manager no es necesario 😃
Muy buena nota JP! Me gustaría ver un especial de WordPress y Google Analytics con interacciones.
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
Juan Pablo, muchas gracias por la explicacion, espero ver pronto el curso que mencionas.
Ya está disponible !
Excelente información. Ya mismo actualizo. Pero antes me gustaría tener claro algo, ¿qué tipos de ventajas existen al hacer el upgrade?
Actualmente, es exactamente lo mismo que analytics.js, aun no hay una ventaja que amerite la actualización
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