Código de seguimiento de Google Analytics

A fondo!

Código de seguimiento de Google Analytics - Tráfico directo

En este artículo vamos a desentrañar paso a paso el código que viene de «serie» cada vez que creas una cuenta, pero también veremos a fondo la API y finálmente daremos algunos ejemplos de webs muy conocidas. Aquí vamos a ver el que más se utiliza, que es la versión asíncrónica es la versión conocida como «ga» y que sustituye a la anterior versión «urchin». Procuraré explicarlo para «dummies»! Por cierto he tenido que revisar este artículo e incluir una observación interesante al final del mismo, la fecha de actualización de este artículo es 1 de Agosto del 2011.

Normalmente cuando habilitas una nueva cuenta Google Analytics te facilita un código como este en lenguaje Javascript:

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-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';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

En primer se inializa la variable _gaq que es un vector asociativo y que se trata como una cola (queue en Inglés) de ahi la notación _gaq:

var _gaq = _gaq || [];

Un vector asociativo es un vector donde en lugar de declarar cada elemento con un índice numérico, se hace con una cadena o string.

_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);

El primer elemento del vector asociativo con indice «_setAccount» recibe el valor de la ID que te asigna Google Analytics, usualmente un código UA.

_gaq.push(['_trackPageview']);

El segundo elemento declara un indice «_trackPageview». Esta declaración es necesaria para devolver los datos de seguimiento a los servidores de Google Analytics.

Ahora viene la función que en realidad es la que inserta todo el codigo ga.js en tu página, esta función la puedes poner en el head pero tambien la puedes poner al final de la página antes de la declaración de la etiqueta «». Vamos a explicar esto:

var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

Declara la variable ga como un script de javascript, es decir algo así: puede que te resulte extraño el atributo async. Esto forma parte de las especificaciones de HTML5. Con este atributo especificamos que el código interno se puede ejecutar en cualquier momento de la página, mejorando la velocidad de carga.

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

Esta linea te resultará más comprensible, sencillamente añade el atributo src, que determina la ruta hacía donde reside el script ga.js. Es decir:
bueno en realidad declara la ruta en función del protocolo soportado, es decir si estas utilizando el protocolo https pues la ruta será https://ssl.google-analytics.com/ga.js.

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

finalmente en la variable s se guarda todo el código anterior.

Explicado lo que «viene de serie» vamos a comentar más métodos que nos permitirá aumentar nuestro grado de medición. Por cierto todos los elementos que vais a ver ahora los tenéis que usar de la forma: _gaq.push([‘_setCustomVar’, 1, ‘Section’, ‘Life & Style’, 3]); esto sería como se declararía el método que vais a ver a continuación, así todos los demás. Recuerda: _gaq.push([‘nombremetodo’,’valormetodo’]); Recuerda que si algún método es booleano su valor no ha de ir entrecomillado. Veamos pues!

Métodos básicos

_setCustomVar(index, name, value, opt_scope): Define una variable personalizada con el nombre, el valor y el alcance proporcionados para ella. Devuelve true si se ha definido la variable personalizada adecuadamente.
_deleteCustomVar(): Borrar la variable personalizada establecida con el método anterior.
_getName(): Retorna el nombre que se dio al objeto de seguimiento cuando se creó.
_getAccount(): Retorna el ID UA-XXXXXXXX-X de seguimiento de Google Analytics para este objeto de seguimiento. Puedes ser útil si tienes varias cuentas en un mismo sitio web, esto puede hacerse perfectamente como veremos en un ejemplo final.
_setAccount(accountId): Se utiliza exclusivamente en el seguimiento asincrónico. Define el ID de propiedad web para el objeto de seguimiento. Si este método se invoca más de una vez, se crea un nuevo objeto de seguimiento para cada invocación.
_getVisitorCustomVar(index): Devuelve la variable personalizada para usuarios asignada para el índice específico. Hay un vector o lista de variables personalizadas si te has molestado en definirlas.
_getVersion(): Devuelve el número de versión.
_setSampleRate(newRate): Establece el nuevo índice de muestreo. Especialmente indicado para sitios grandes con fuertes picos de tráfico. El muestreo se realiza de manera uniforme entre usuarios únicos, de modo que se mantiene la integridad de las tendencias e informes.
_setSessionCookieTimeout(cookieTimeoutMillis): una visita finaliza tras 30 minutos de inactividad del navegador o cuando se sale de él. Si deseas definir un nuevo tiempo de espera, puedes establecer el número de milisegundos para definir un nuevo valor. El número de visitas aumenta cuando se acorta el tiempo de espera para las sesiones y disminuye cuando éste se aumenta, si estableces el tiempo a cero, esta cookie se eliminrá cuando se cierre el navegador.
_setVisitorCookieTimeout(cookieTimeoutMillis): Define la caducidad de las cookies en milisegundos. Por defecto está establecido en 2 años! Se puede definir a cero para que se elimine la cookie en cuanto se cierre el navegador.
_trackPageview(opt_pageURL): Si están habilitadas las funcionalidades de enlace, este código intenta extraer los valores de cookies de la URL. De lo contrario, intenta extraer los valores de cookies de document.cookie.

Motores de búsqueda y referencias

_addIgnoredOrganic(newIgnoredOrganicKeyword): Este método se utiliza para que se trate como tráfico directo la palabra clave que quieras, por ejemplo el nombre de tu sitio. De esta manera si alguien mete el nombre de tu dominio en el buscador google sería lo mismo que si lo introdujera directamente en la barra de direcciones del navegador, si no se hace esto, se trata de manera diferente.
_clearOrganic() Borra la lista de palabras claves declaradas con el método anterior.
_addIgnoredRef(newIgnoredReferrer): sirve para ignorar la fuente de referencia que desees
_clearIgnoredRef() Borra la lista de sitios de referencia declarados con el método anterior.
_addOrganic(newOrganicEngine, newOrganicKeyword, opt_prepend): Bueno normalmente Google además de su propio buscador, reconoce los motores de búsqueda más conocidos como por ejemplo bing, pero si quieres explicitamente que tenga en cuenta alguno es aquí donde debes declararlo (neworganicEngine). Puedes también declarar una nueva palabra clave para esta fuente orgánica(newOrganicKeyword). Finalmente el tercer parámetro permite añadir este motor de búsqueda en primera posición o al final de la lista de motores a tener en cuenta, en funcíon si se declara «false» o «true».
_clearIgnoredOrganic(): Borra todos los motores de la lista añadidos con el método anterior.

Comercio electrónico

_addItem(orderId, sku, name, category, price, quantity): Este método se utiliza para medir las transacciones realizadas en el comercio electrónico, es muy avanzado no lo vamos a ver aquí.
_addTrans(orderId, affiliation, total, tax, shipping, city, state, country): Idem que el anterior.
_trackTrans() Envía los datos de transacción y de artículo al servidor de Google Analytics.

Dominios y directorios

_cookiePathCopy(newPath): Redefine las rutas de todas las cookies del código de seguimiento de Google Analytics por la ruta recién especificada, si bien la nueva ruta ha de estar en el mismo dominio naturalmente.
_setDomainName(newDomainName): Si deseas realizar el seguimiento de subdominios para el mismo pérfil definirías el nombre de dominio del siguiente modo: _gaq.push([‘_setDomainName’, ‘.dominio.com’]); Fíjate en el punto que va antes de dominio.com, eso es lo que te va a permitir poder seguir subdominios en este dominio.
_setAllowLinker(bool): Por defecto esta desactivado, si se establece a true se utiliza los datos de cookie en el parámetro URL en lugar de la lógica de sesión estándar.
_getLinkerUrl(targetUrl, useHash): habilitar el seguimiento en iFrames y enlaces que se abren en una ventana nueva.
_link(targetUrl, useHash): El método _link() transfiere las cookies desde este sitio a otro a través de parámetros de URL (HTTP GET). También cambia el valor de document.location y redirige al usuario a la nueva URL. Ejemplo de la API:
_linkByPost(formObject, useHash): similar al anterior pero para el método post.
_setAllowHash(bool): Establece la marca hash del dominio, si deseas seguir varios subdominios, debes deshabilitarlo, por defecto está activado (true).

Cliente web

_getClientInfo(bool): Proporciona la marca que indica si está habilitado el módulo de seguimiento del navegador.
_setClientInfo(bool): Almacena datos del navegador, valor por defecto, si se desactiva deja de almacenarse.
_getDetectFlash(bool): Obtiene la marca de detección de Flash.
_setDetectFlash(enable): por defecto Google Analytics  almacena datos sobre el reproductor Flash del visitante, estableciendo este método a false, deja de almacenarse.
_getDetectTitle(bool): Proporciona la marca de detección de título.
_setDetectTitle(enable): La detección de títulos por defecto está habilitada, si desactivas esta opción (false). Los títulos de página definidos en tu sitio web no aparecerán en los informes de «Contenido por título».

Seguimiento de eventos

_trackEvent(category, action, opt_label, opt_value): Esto se utiliza para seguir todo aquel evento que no suponga una solicitud de página por ejemplo el click en un botón, un control de película de vídeo Flasht, etc. Veamos un ejemplo:

Seguimiento de campañas

_setAllowAnchor(bool): En una Url puede haber una cadena de consulta delimitada con «?» habilitando esta opción también sería valido «#» que en principio sólo se utilizaba para introducir valores de anclaje en una URL.
_setCampContentKey(newCampContentKey): Establece la clave de contenido de anuncio de la campaña.
_setCampMediumKey(newCampMedKey): Establece la clave de medio de campaña.
_setCampNameKey(newCampNameKey): Establece la clave de nombre de la campaña.
_setCampNOKey(newCampNOKey): Establece la variable de clave de no sustitución de campaña.
_setCampSourceKey(newCampSrcKey): Establece la clave de fuente de campaña.
_setCampTermKey(newCampTermKey): Establece la clave de término de campaña.
_setCampaignTrack(bool): Las campañas se siguen por defecto, si quieres inhabilitar el seguimiento, establece este método a false.
_setCampaignCookieTimeout(cookieTimeoutMillis): Establece el tiempo de caducidad de las cookies de seguimiento de campañas en milisegundos. De forma predeterminada, el seguimiento de campañas se establece durante 6 meses. Si el tiempo de campaña es mayor debes introducir el valor correspondiente, este valor a cero provocará que la cookie se elimine en cuanto se cierre el navagador.

Bueno ya estás preparado para entender cualquier ejemplo que podamos poner. A continuación te voy a copiar el código de segumiento de algunos portales importantes.

Toprural

En este código podéis ver un ejemplo de como incorporar dos códigos UA diferentes a una misma web.

var _gaq = _gaq||[];
_gaq.push(['_setAccount', 'UA-17472105-1']);
_gaq.push(['_setDomainName', '.toprural.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_setAllowHash', false]);
_gaq.push(['_setCampaignCookieTimeout', 86400000]);
_gaq.push(['_setAllowAnchor', true]);
_gaq.push(['_addIgnoredOrganic', 'toprural']);
_gaq.push(['_addIgnoredOrganic', 'top rural']);
_gaq.push(['_addIgnoredOrganic', 'toprural.com']);
_gaq.push(['_addIgnoredOrganic', 'www.toprural.com']);
_gaq.push(['_addIgnoredOrganic', 'toprural.com']);
_gaq.push(['_addIgnoredOrganic', 'toprural.fr']);
_gaq.push(['_addIgnoredOrganic', 'toprural.es']);
_gaq.push(['_trackPageview']);
_gaq.push(['t2._setAccount', 'UA-17471852-1']);
_gaq.push(['t2._setDomainName', 'none']);
_gaq.push(['t2._setAllowHash', false]);
_gaq.push(['t2._setAllowLinker', true]);
_gaq.push(['t2._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); })();

El siguiente ejemplo corresponde a una conocida red social…Twitter!

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-30775-6']);
_gaq.push(
['_trackPageview'],
['_setDomainName', 'twitter.com']
);

(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);
}());


twttr.trackPageView = function(pathName) {
var event = ['_trackPageview'];
if (pathName) {
event.push(pathName);
}
_gaq.push(event);
};

Bueno recuerda que si necesitas profundizar en cualquier aspecto, debes ir a la fuente original, la Api de Google analytics si te gusta la analítica web,  alguna vez te tienes que meter con la Api a fondo para poder «tunear» el seguimiento del tráfico de una web a tu gusto (vía Google Analytics claro está).

Con motivo de la nueva versión de Google Analytics veo necesario hacer una interesante adición a este artículo. Ya es posible medir la carga de la página desde Google Analytics, para ello debes añadir la siguiente línea al código de seguimiento GA que te proporcionó Google en su momento:

_gaq.push([‘_trackPageLoadTime’]);

En unas horas podrás empezar a ver los datos en tu pérfil de Google Analytics yendo al menu lateral «Contenidos», una vez ahí ya verás la opción «Velocidad del sitio». Recuerda que esto sólo está activo en la versión nueva, y sólo si adicionas la línea anterior a tu código de seguimiento, en otro caso el valor observado será de cero. El tiempo que ves ahí es el tiempo desde que el usuario hace clic en el enlace y se carga la página totalmente. También tienes un promedio de carga de todas las páginas del sitio.

Bueno esto ha sido todo, espero que te sirva para comprender o personalizar tu propio código de seguimiento.

Atentamente

Miguel Ángel Valero

Desarrollador Web y Analista Seo en Valencia.