Tabla de Contenidos
⁓ Código de seguimiento asincrónico de Google Analytics: mejor rendimiento
Google Analytics Asíncrono es una forma mejorada del seguimiento de los visitantes de nuestro sitio web con Google Analytics. A diferencia de la instalación tradicional, el seguimiento asincrónico optimiza la carga del «ga.js» por los navegadores para que el impacto sobre la velocidad de carga y sobre la experiencia de usuario sea mínima. También permite poner el fragmento de Analytics en la parte superior de la página sin que se retrase la carga del contenido.
Aunque el seguimiento asincrónico usa un snippet y una sintaxis diferente para el seguimiento, permite personalizaciones exactamente igual que el código tradicional. De hecho, la sintaxis de seguimiento asincrónica también es más flexible que la tradicional para estos menesteres.
El Snippet Asíncrono ⁓
El código de Google Analytics es una pequeña pieza de código JavaScript que deberemos pegar en nuestras páginas, para activar el seguimiento de Google Analytics, que a su vez proporciona una API para personalizar cómo se hace un seguimiento concreto para cada página.
El siguiente fragmento representa la configuración mínima necesaria para el seguimiento de una página de forma asincrónica:
<script type="text/javascript">// <![CDATA[
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' : 'https://www') + '.google
analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
// ]]></script>
⁓ Cómo utilizar el código asincrónico:
- Retira el fragmento de código de seguimiento existente y cualquier personalización que hayas realizado.
- Inserta el código asincrónico en la parte más inferior del <head>, después del resto de scripts que uses en la página o en la plantilla. En la mayoría de páginas, la ubicación óptima para el código asincrónico es justo antes de </head>.
- Modifica _setAccount con tu ID de Analytics.
- Añade las personalizaciones de nuevo en el uso de la sintaxis asincrónica. La Guía de Uso y Ejemplos de migración de páginas ofrecen muchos ejemplos de estas conversiones.
Si necesitas hacer algo más que el seguimiento de la página de base, consulta esta referencia para obtener una lista de los métodos disponibles en la API y para obtener más información sobre el uso de la sintaxis asincrónica.
⁓ Mejoras que implica la gestión de captura asíncrona.
Mayor rapidez ⁓ El problema habitual al cargar ficheros JavaScript es que bloquean el refresco de pantalla hasta que están completamente cargados. Para evitarlo el nuevo «ga.js» de Google Analytics puede ser cargado de forma asíncrona y posteriormente ser procesado en el equipo, además tampoco agrega más contenidos a la página por lo que reduce los tiempos totales de presentación y no nos bloquea las imágenes ni las hojas CSS a procesar.
Mejora el tiempo de subida ⁓ Cuando un script tarda mucho tiempo en ser cargado o falla, puede bloquear la carga de una página. Con el nuevo «ga.js» estos problemas desaparecen de la lista de problemas de un desarrollador web. Ahora la web se carga más rápido y el contenido traslada la información sin bloquear nada.
Proporciona más datos ⁓ La recomendación que se daba antes para mejorar la experiencia de usuario es colocar el script de Google al final de la página, así vemos la página completa y queda un «cargando» en el navegador. Pero esto significa que si no termina de procesarse el «ga.js» y el usuario es rápido en clickar otro link no se contabiliza la visita y esto falsea las estadísticas del sitio. Con el nuevo proceso asíncrono, mantendremos el script en la parte inferior, pero el nuevo sistema traslada simplemente un indicativo para que sea procesado posteriormente por Google sin afectar a la navegación, con ello además puede incrementar la información a recopilar.
⁓ Consideraciones:
El anterior ga.js se mantiene, no es imprescindible el cambio. No obstante si queremos mejorar el rendimiento de nuestra web debemos realizarlo.
-Importante: Si deseamos utilizar el snippet asincrónico, debemos eliminar primero el código de seguimiento antiguo . No usar ambos fragmentos en la misma página.
-No hay pérdida 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 <head> hay algunos que después de hacer los test pertinentes piensan que sigue siendo mejor colocarlo al final justo antes de </body>, así siempre será lo último que se ejecute en la página, prefieren que primero se cargue adsense que analytics. Pa gustos los colores.
⁓ Conclusiones:
El cambio del código de seguimiento significará una mejora de un 10% de media en el tiempo de carga para la mayor parte de las páginas web que incorporan el script de Google Analytics, es decir, casi todas.
La implementación en páginas estáticas sigue los mismos protocolos (cuenta de Google Analytics y sigue la ruta: Analytics Settings > Profile Settings>Tracking Code y allí encontrarás un anuncio del nuevo código asincrónico), es igual que siempre.
Si esta es tu primera visita tal vez quieras suscribirte RSS O via email para leer más artículos.
Si te ha gustado esta entrada puedes compartirla. Si quieres dejar un comentario, te estaré muy agradecida. Gracias por venir..!!
de Corbax
Hola,
muy interesante el post. Lo pondré en práctica.
¿Se sabe de algún plugin de WordPress que ya use esta forma de recoger estadísticas de Analytic?
Gracias, un saludo
Gracias por el comentario.
-Nosotros lo estamos usando en algunos dominios pero lo hemos dejado en otros para ir viendo si hay diferencias entre los dos grupos y cuales son. De momento parece que el grupo «asincrónico» recibe más visitas que antes o la herramientas de análisis es más fiable o sensible.
-No he encontrado ningún plugin que lo haga, aunque tampoco he buscado mucho, es más sencillo modificar el theme en wp-content/themes/mi-tema/header.php
Un afectuoso saludo.
Muchas gracias por la información, no tenía ni idea del nuevo código de analytics.
piernodoyuna
Pues cuando lo pruebes verás que la mejora es grande. Además, ahora Google declara en su blog Central de Conversiones, que definitivamente va a dejar el código asíncrono por defecto:
Gracias por el comentario y por el trackback. ;-)
Haré pruebas en el blog a ver que tal funciona.
Como bien comentas lo más sencillo en Wordpress es editar la plantilla del header.php si se va a colocar al final del tal y como se indica. Si se opta, como también comentas, por colocarla antes del sería el footer.php
Muy buen post! Tiene bastante tiempo ya pero me ha servido de ayuda para un proyecto de analítica en el que estoy inmersa. El site estudiado sigue utilizando el código " urchinTracker();" para hacer el seguimiento de su analítica.
En relación a esto ¿con el código urchin son fiables los datos del módulo de "Conversiones"?