Revista Comunicación

Como trackear eventos de Google Universal Analytics con Javascript

Publicado el 19 diciembre 2014 por Jesusredondoiva

Supongamos que tenemos una landing page y queremos trackear cuando los usuarios hacen click en un determinado botón de descarga de un pdf o de un enlace tanto interno como externo. Nuestro código de Google Analytics ha de tener implementado la función send y debería verse algo así:

<script type="text/javascript">//
  (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*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXX-1', 'auto');
  ga('send', 'pageview');
// ]]></script>

En segundo lugar hemos de etiquetar nuestro enlace, botón o imagen que contiene el enlace en el html dándole un id, por ejemplo id="button"

<a id="button" class="clase" href="/cuenta-tu-experiencia/">¡Consigue tu Hairchalk!</a>

Según las instrucciones del centro de ayuda de Google Analytics, implementaremos el siguiente código, lo suyo es que lo hagamos en el footer, a mi en el header no me funcionó, para que se cargue una vez que el usuario ha hecho click en el enlace, además hemos implentado la función 'hitCallback', notificando la url a la que lleva el enlace,de este modo, puedes enviar al usuario a su destino solo después de que su click se haya comunicado a Google Analytics.

<script type="text/javascript">//
    var downloadLink = document.getElementById('button');
    addListener(downloadLink, 'click', function() {
        ga('send', 'event', 'boton_home', 'click', 'consigue_hairchalk', {
            'hitCallback': function(){
                document.location = 'http://miexperiencialuisytachi.es/cuenta-tu-experiencia/';
            }
        });
    });

function addListener(element, type, callback) {
 if (element.addEventListener) element.addEventListener(type, callback);
 else if (element.attachEvent) element.attachEvent('on' + type, callback);
}
// ]]></script>

En nuestro caso esta es la landing y el botón que queremos trackear:

Como trackear eventos de Google Universal Analytics con Javascript

Y este es el resultado contrastado en tiempo real en el panel de Analytics:

Como trackear eventos de Google Universal Analytics con Javascript

Me he puesto supercontento cuando he visto que funcionaba correctamente!

Jesus Redondo Ivars


Volver a la Portada de Logo Paperblog