Simplifica el código de Google Analytics Asíncrono con Jquery


Hace no demasiado google Analytics se actualizaba y lanzaba su versión asíncrona. Para enseñárnoslo nos mostraban un fragmento de código de ejemplo que como todo código javascript, al principio no te quedaba muy claro como usar.

He estado dándole un par de vueltas este código asíncrono de google analytics y resulta que es bastante sencillo y útil en realidad.

Veamos el código y que es lo que hace en realidad:


Básicamente lo que se hace es generar el array «_gaq» mediante la función «push», que es una funcion nativa de javascript que permite ir añadiendo elementos a un array.

Luego se lanza una función para crear una etiqueta correcta de script en el DOM del documento con un src cuyo subdominio depende de si la página que lo carga es segura o no (http o https).

Al terminar de cargarse el script de analytics este busca el array «_gaq» y empieza a lanzar cada elemento del array. El primer item lo entiende como función y al resto como argumentos que pasarle a esta función. Así en el ejemplo superior en realidad lo que estamos ejecutando cuando se carga el srcript es:

ga._setAccount('UA-XXXXX-X'); // >>  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
ga._trackPageview(); // >> _gaq.push(['_trackPageview']);

Todo esto acaba siendo un fragmento fácil de replicar y manipular mínimamente para aquellos que no manejan mucho javascript, pero para los que usamos distintas librerías termina siendo un código poco manejable que acaba no teniendo nada que ver con el resto de nuestro código.

No podríamos simplificar todo esto con la filosofía de jquery

Me encanta jquery, no lo oculto. Es genial. Así que lo primero en lo que pensé al ver este código fue que era una lástima no aprovechar sus funciones para lanzarlo con él.

Y ¿por qué no? Una vez entendido su funcionamiento la verdad es que resulta bastante sencillo adaptarse y lanzar este nuevo código de una forma mucho más «entendible»… os muestro un ejemplo:

// Creando el array de funciones a lanzar
var _gaq = [
  [ '_setAccount', 'UA-XXXXX-X' ],
  [ '_trackPageview' ]
];
// Importando el script de analytics
$(function() {
  $.getScript( 'http://www.google-analytics.com/ga.js' );
});

Si, vale, he hecho trampas. No estoy mirando si el servidor es seguro… Bueno, si lo fuese bastaría con cambiar la función por:

$.getScript( 'https://ssl.google-analytics.com/ga.js' );

Y si no queremos preocuparnos de eso, con una orden como la misma que usa google también nos valdría:

$.getScript( ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js' );

A mi me parece mucho más sencillo de esta forma,… pero yo estoy muy acostumbrado a jquery. ¿que os parece a vosotros?


4 respuestas a “Simplifica el código de Google Analytics Asíncrono con Jquery”

  1. Hola y muchas gracias por tu artículo 🙂

    Trabajo con el código asíncrono de Analytics y me interesaría controlar cuándo quiero que expire la cookie _utmz en mi web, pero al haberse eliminado la referencia a pageTracker en el código, no sé cómo controlarlo.

    ¿Alguna idea? Muchísimas gracias!

  2. Buenos días Iñaki,

    Gracias por tu post. Veo que es bastante antiguo (de 2009). Mi pregunta: a día de hoy, ¿ves alguna opción para simplificar el(los) scripts de analytics con el objetivo de mejorar la velocidad de carga de la web?.

    La web de un cliente sin Analytics va como una bala en pagespeed (que ya es difícil a día de hoy), me interesaría mucho saber cómo minificar el impacto de los scripts de google (fonts, maps, analytics, ads……..)

    Gracias de antemano

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *