Google Analytics desbloquea la carga de webs lanzando el modo asíncrono (Async Mode)

Gran noticia la que acabo de leer que Google Analytics lanza un modo de seguimiento asíncrono "Google analytics launches Asynchronous Tracking" (click aquí para ver artículo original).

Al fin nuestro navegador no se va a enganchar cargando el código JavaScript.

El sistema hará que las webs funcionen más rápido:
El mayor problema de cargar archivos JavaScript es que bloquea el renderizado de la página web y la descarga de otros recursos. En el nuevo modelo asíncrono de Google Analytics, se utiliza el elemento Script del DOM.
Google Analytics, con su archivo ga.js, es un ejemplo perfecto de un script que debiera cargarse de forma asíncrona, ya que no añade contenido alguno a la página, con lo cual, sería ideal cargarlo sin bloquear las imágenes y hojas de estilo que harán que los usuarios vean lo que realmente han venido a ver: nuestra página web.

Se ha mejorado la estabilidad:

¿Qué pasa si un script tarda mucho tiempo en cargarse, o falla su carga? El usuario se encuentra ante una página en blanco, ya que los scripts bloquean el renderizado de la web. Aunque Google Analytics tiene una infraestructura muy grande tras él, cualquier recurso, sobre todo de terceros, tiene que añadirse con cautela. Es una gran noticia que GA está proporcionando patrones que permite el renderizado de las webs mientras se carga ga.js. 

¿Qué hay que hacer para incluir ga.js en modo asíncrono? cambia tu script para que sea de la forma siguiente:
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
   var ga = document.createElement('script');
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   ga.setAttribute('async', 'true');
   document.documentElement.firstChild.appendChild(ga);
})();

  • Lógicamente, tienes que sustituir "UA-XXXXX-X" por tu ID.
  • Al cargarse ga.js de forma asíncrona, tiene que existir una forma para que algunas funciones de GA se puedan utilizar cuando el código se termina de cargar. Esto se hace introduciendo comandos en la cola del objeto de Google Analytics, _gaq.
  • Una vez que todos los comandos callback se han puesto en cola, se carga el script ga.js. Esto se empaqueta en una función asíncrona para así evitar conflictos de namespace.
  • Se crea un elemento "script" y su fuente "src" se pone al valor correcto de la URL de ga.js. Mirando más alla, en el soporte que se incluye en HTML5 a los scripts asíncronos, el atributo "async" se pone a "true", muy bueno! La ventaja más importante es que le dice al navegador que los siguientes scripts se pueden ejecutar de forma inmediata (no tienen que esperar a que se carge ga.js). La última línea añade el elemento script al DOM. Esto es lo que ejecuta la descarga de ga.js. En muchos códigos se hace document.getElementsByTagName(”head”)[0].appendChild, pero esto falla si el documento no tiene elemento head. Esta forma de hacerlo, es más robusta.

 

Comentarios

Comentario de JuanFra - 07 de Marzo de 2012 - 01:30
No entendí bien como solucionar el problema de la página en blanco cuando kiero entrar a Google Analytics :( no manejo mucho el vocabulario que has usado para indicar los procedimientos a seguir para solucionarlo, si podrias explicarmelo mejor, estaría muuy agradecidoo! :)
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí