Do not speak Spanish? Read this post in English.

Jueves, 17 de diciembre de 2009.

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:

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
 
(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();
</script>

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?

Posts Relacionados:

  1. Como hackear el código javascript de Google Analytics.
  2. Plugin Jquery para medir en tiempo de escritura de formularios en Google Analytics
  3. Universal Analytics: Funcionamiento y Hacks para nuevo código de Google Analytics (analytics.js)
  4. Jquery y Google Analytics tracking Api: Eventos por todas partes
  5. Google Analytics: Manipular el Rebote (actualizado con Universal Analytics)

Temas Relacionados: analitica web jquery

Autor:

5 Comentarios para “Simplifica el código de Google Analytics Asíncrono con Jquery”

  1. Hola:
    Estoy estudiando como incluir el nuevo código asíncrono en mis sitios web y me ha parecido muy interesante este post. Como quiero hacer uno sobre el tema http://www.seoplicio.blogspot.com y me gustaría citarlo en él como fuente si no tienen inconveniente.
    Muchas gracias y enhorabuena por su blog. Huberto.

  2. ikhuerta dice:

    Hola Humberto, ya conocía tu blog y será un placer ser citado ;) Gracias por tus comentarios!

  3. [...] ni interrupción en la recogida de datos. -Es muy versátil y personalizable. Si queremos se puede modificar con jquery según nos cuenta Iñaki Huerta. -Aunque Google recomienda colocar el tracking en la cabecera [...]

  4. [...] 6. Carga el javascript de las estadísticas web google analytics asincronamente [...]

  5. Rubén dice:

    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!

Anímate y deja tu comentario