Seguramente todos os habréis preguntando alguna vez, cómo funciona el código de Google Analytics, ( bueno seguramente pocos os lo habréis preguntado ). Pero para quien se encargue de realizar las implementaciones en sitios, le interesará saber como funciona, bien por necesidad o simplemente por curiosidad.
Vamos a ver que es lo que va haciendo el código durante su carga, así como algunos trucos / consejos, de cómo evitar errores en nuestras customizaciones, es tan importante cuidar la Analitica Web de nuestros sites, como que esta tarea no influya en la navegación o experiencia de nuestros usuarios.
Vamos a utilizar el siguiente ejemplo de código:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-Y']);
_gaq.push(['_setSiteSpeedSampleRate', 100]);
_gaq.push(['_setCustomVar',1,'post_type','post',3],['_setCustomVar',2,'author','thyngster',3]);
_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';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
var _gaq = _gaq || [];
Al inicio del Script se inicializa un objeto llamado _gaq ( Google Analytics Queue ), que se encarga básicamente de ir guardando las llamadas al API de Google Analytics, es la base del sistema de tracking asíncrono. De esta manera tenemos las llamadas al API en una variable que se ejecutarán en el orden que se hayan añadido ( FI-FO ) en cuanto se cargue ga.js . De esta manera no es necesario paralizar la carga de los demás javascripts de la página de mientras.
Un vez se carga el javascript de Google Analytics, el objeto _gaq se convierte en un Objeto de typo Analytics . A partir de ese momento las llamadas que se hagan al API, se ejecutarán en el mismo momento que se llamen.
Para añadir llamadas, utilizaremos _gaq.push, de la siguiente manera:
_gaq.push(['_setAccount', 'UA-XXXXX-Y']);
_gaq.push(['_setSiteSpeedSampleRate', 100]);
_gaq.push(['_setCustomVar',1,'post_type','post',3]);
_gaq.push(['_trackPageview']);
Si estamos obsesionados con el WPO de nuestro site podemos ahorrar mucho tiempo de ejecutión ( en terminos relativos ), al hacer tan solo 1 push con todas los métodos, sin alterar el funcionamiento real del script.
_gaq.push(['_trackPageview'],['_setSiteSpeedSampleRate', 100],['_setCustomVar',1,'post_type','post',3],['_trackPageview']);
Recordemos que por ahora, no se ha enviado ningún dato a Google, y lo que el código hace a continuación es crear de forma dinámica una etiqueta <script>
var ga = document.createElement('script');
Ahora le dices que el type de ese elemento script es “text-javascript”
ga.type = 'text/javascript';
Y además le decimos que añada que se trata de un elemento asíncrono
ga.async = true;
Así que actualmente disponemos de una variable llamada ga con el siguiente valor:
<script type=”text/javascript” async=””>
Ahora el script, detectará el protocolo que está utilizando la página que va a cargar el javascript, Y añade el source del script. Esta acción la realiza para evitar errores de seguridad a la hora de cargar el javascript, porqué por ejemplo si estuviesemos en un entorno seguro ( https/SSL ), e intentasemos cargar un contenido externo que no esté bajo https, el navegador nos arrojaría una alerta de contenido no seguro.
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
Por lo tanto ya tenemos el código completo que queremos añadir nuestra página, en concreto este:
(more…)
