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:
<script type=”text/javascript” async=”” src=”http://www.google-analytics.com/ga.js”>
Tan solo nos queda injectarlo al DOM de nuestra web, para que se ejecute, este código ha cambiado desde su versión original por problemas de compatibilidad con algunos navegadores. Actualmente tiene la siguiente forma:
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
¿ Y este código qué hace ? , recupera el primer element script que encuentre en la página ( si no hubiese ninguno más que el de Google Analytics, se seleccionará a si mismo, y se guardará en una variable llamada s.
En la última línea añade el valor de la variable ga justo antes del primer elemento script que ha encontrado. De esta manera el código de Google Analytics se posicionará en el primer lugar en el DOM, pero si por lo que fuera hubiese algún otro script que se cargase después de el de forma asíncrona pasaría a una segunda posición.
De esta manera el script se carga en segundo plano sin afectar a la carga de la página. Una vez que ya está cargado el código de Google Analytics en el DOM, lo primero que hace es ejecutar las llamadas que encuentra en el objeto/array _gaq .
Si estáis realmente obsesionados con el WPO y rendimiento de vuestas webs, en http://mathiasbynens.be/notes/async-analytics-snippet , consiguen dejar el tag por defecto de Google Analytics en la mitad de bytes del original, eliminando partes innecesarias y optimizando otras, eso si a costa de la facilidad de lectura del código.
Trucos para evitar errores en nuestra implementación de Google Analytics
Imaginemos que queremos ejecutar algún código en nuestra web, pero queremos asegurarnos que se ejecute tan solo cuando realmente Google Analytics esté cargado para evitar errores.
Vamos a poner un ejemplo de que añadir con JQuery a un formulario en linker, para realizar una medición entre dominios, pero claro esto tan solo debería realizarse si realmente el código de Google Analytics está cargado en la web, para evitar que el formulario deje de funcionar, podrías utilizar el siguiente fragmento de código:
_gaq.push(function(){
$('form[name=pedido]').each(function(){
var $ = ss_jQuery, form = $(this), tracker = _gat._getTrackerByName();
form.attr('action',tracker._getLinkerUrl(form.attr('action')));
});
});
Con esto conseguiremos que sea el propio Google Analytics, el que ejecute ese código y modifique nuestros formularios para añadir el linker. Por lo tanto si por cualquier circunstancia no se terminase de cargar el código, no se lanzaría ese código.
Es una idea intentar ejecutar nuestras implementaciones a medida de esta manera, porqué evitaremos errores innesarios y con ellos una mala experiencia de usuario.
Hay un función no muy documentada en el api del ga.js, se trata del hitCallback , actualmente existe algo de documentación en analytics.js, pero también está disponible para el código asíncrono. Esta función lo que hace es devolver un valor si ga.js ha conseguido lanzar el hit correctamente.
_gaq.push(['_set', 'hitCallback', function(){
console.log('hitCallback', _gaq);
}]);
Imaginemos que estamos realizando el tracking de enlaces salientes, si la acción se realiza muy rápido podría ser que diese tiempo a lanzar el hit, pero con esta función podríamos por ejemplo evitar la acción por defecto del onclick, y hacer la redirección una vez se haya enviado los datos de forma correcta. Actualmente he visto un montón de snippets que lo que hacen para asegurarse de que el evento no se queda sin lanzar es añadir un timeout de ciertos milisegundos , pero esto tampoco asegura que el evento en nuestro caso se haya lanzado de forma correcta.