ga.js es una biblioteca de JavaScript para medir cómo interactúan los usuarios con tu sitio web. Esta es una biblioteca heredada. Si recién comienzas a usar Google Analytics, debes usar la biblioteca de seguimiento más reciente, analytics.js.
Guía de inicio rápido del código de seguimiento
El fragmento de Analytics es un pequeño fragmento de código JavaScript que pegas en tus páginas. Se activa el seguimiento de Google Analytics
si insertas ga.js en la página. Para usarlo en tus páginas, copia el siguiente fragmento de código y reemplaza UA-XXXXX-X por el ID de tu propiedad web.
Pega este fragmento en la página de la plantilla de tu sitio web de modo que aparezca antes de la etiqueta de cierre </head>.
Si necesitas hacer un seguimiento de página más que el básico, consulta la referencia de seguimiento para obtener una lista de los métodos disponibles en la API, y la Guía de uso para obtener detalles sobre el uso de la sintaxis asíncrona. Si deseas obtener instrucciones paso a paso para configurar el seguimiento, consulta el artículo del Centro de ayuda sobre cómo configurar el seguimiento.
<script type="text/javascript">
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' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
El fragmento anterior representa la configuración mínima necesaria para realizar un seguimiento de una página de forma asíncrona. Utiliza _setAccount para establecer el ID de propiedad web de la página y, luego, llama a _trackPageview para enviar los datos de seguimiento a los servidores de Google Analytics.
Importante: Si actualizas tus páginas del fragmento tradicional a la versión asíncrona más reciente, primero debes quitar el fragmento de seguimiento existente. No recomendamos usar ambos fragmentos juntos en la misma página. Para obtener instrucciones de migración, consulta Migra a Async.
Cómo funciona la sintaxis asíncrona
El objeto _gaq es lo que hace posible la sintaxis asíncrona.
Actúa como una cola, que es una estructura de datos de primero en entrar,primero en salir que recopila llamadas a la API hasta que ga.js esté listo para ejecutarlas. Para agregar un elemento a la cola, usa el método _gaq.push.
Para enviar una llamada a la API a la cola, debes convertirla de la sintaxis tradicional de JavaScript en un array de comandos. Los arrays de comandos son simplemente arrays de JavaScript que se ajustan a un formato determinado. El primer elemento de un array de comandos es el nombre del método del objeto de seguimiento al que deseas llamar. Debe ser una cadena. El resto de los elementos son los argumentos que deseas pasar al método del objeto de seguimiento. Pueden ser cualquier valor de JavaScript.
El siguiente código llama a _trackPageview() con la sintaxis tradicional:
var pageTracker = _gat._getTracker('UA-XXXXX-X');
pageTracker._trackPageview();
El código equivalente en la sintaxis asíncrona requiere dos llamadas a _gaq.push.
_gaq.push(['_setAccount', 'UA-XXXXX-X']); _gaq.push(['_trackPageview']);
En la sintaxis asíncrona, la creación del objeto de seguimiento está implícita, pero aún necesitamos una manera de configurar el ID de propiedad web para el rastreador. Se agregó el método _setAccount para proporcionar esta capacidad. Todos los demás métodos de objetos de seguimiento son iguales en el seguimiento asíncrono y tradicional. Solo la sintaxis es diferente.
Si deseas obtener más información sobre la sintaxis asíncrona, consulta la Referencia de seguimiento para el método _gaq.push.
Seguimiento con controladores de eventos HTML
La sintaxis del seguimiento asíncrono también debe usarse desde los controladores de eventos del DOM. Por ejemplo, el siguiente botón genera un evento cuando se hace clic en él.
<button onclick="_gaq.push(['_trackEvent', 'button3', 'clicked'])"></button>
Incluso si haces clic en este botón antes de que el navegador termine de cargar ga.js, el evento se capturará y, al final, se ejecutará. Si se usa el seguimiento tradicional, es posible que el navegador arroje una excepción en esta situación.
Envía funciones a la cola
Además de los arrays de comandos, también puedes enviar objetos de funciones a la cola de _gaq. Las funciones pueden contener cualquier JavaScript arbitrario y, al igual que los arrays de comandos, se ejecutan en el orden en que se envían a _gaq. Esta técnica es útil para llamar a las APIs de seguimiento que muestran valores. Por ejemplo, en el siguiente código, se compila una URL del vinculador y se establece la propiedad href para un vínculo con el resultado.
_gaq.push(function() {
var pageTracker = _gat._getTracker('UA-XXXXX-X');
var link = document.getElementById('my-link-id');
link.href = pageTracker._getLinkerUrl('http://example.com/');
});
En el ejemplo anterior, se usa _gat para crear un objeto de seguimiento, pero como está asignado a una variable local, el código fuera de la función no puede usarlo. Si bien esto es aceptable, puedes
usar el método _gat._createTracker para crear un objeto permanente y accesible de forma global.
En el siguiente código, se demuestra cómo funcionaría.
_gaq.push(function() {
var pageTracker = _gat._createTracker('UA-XXXXX-X', 'myTracker');
var link = document.getElementById('my-link-id');
link.href = pageTracker._getLinkerUrl('http://example.com/');
});
_gaq.push(['myTracker._trackPageview']);
En el ejemplo anterior, se crea un rastreador asíncrono dentro de la función y, luego, se hace referencia a él por su nombre en el array de comandos.
También es posible el caso de uso opuesto. Por ejemplo, si necesitas usar un objeto de seguimiento asíncrono creado a través de un array de comandos enviado con anterioridad, emplea el método _gat._getTrackerByName. En el siguiente código, se demuestra cómo funciona.
_gaq.push(['myTracker._setAccount', 'UA-XXXXX-X']);
_gaq.push(function() {
var pageTracker = _gat._getTrackerByName('myTracker');
var link = document.getElementById('my-link-id');
link.href = pageTracker._getLinkerUrl('http://example.com/');
});
Un solo toque, varios comandos
En lugar de escribir _gaq.push(...) para cada llamada, puedes enviar todos los comandos a la vez. En el siguiente código, se muestra esta técnica.
_gaq.push( ['_setAccount', 'UA-XXXXX-X'], ['_setDomainName', 'example.com'], ['_setCustomVar', 1, 'Section', 'Life & Style', 3], ['_trackPageview'] );
Esto funciona porque el método _gaq.push imita al método Array.push, que permite enviar varios elementos con una invocación.
Cómo dividir el fragmento
Si prefieres colocar el fragmento de Analytics en la parte inferior de la página, debes saber que no es necesario colocar todo el fragmento en la parte inferior.
Aún puedes conservar la mayoría de los beneficios de la carga asíncrona si divides el fragmento por la mitad (mantén la primera mitad en la parte superior de la página y mueve el resto a la parte inferior). Debido a que la primera parte del fragmento de seguimiento tiene poco o ningún efecto en el procesamiento de la página, puedes dejar esa parte en la parte superior y colocar la que inserta ga.js en la parte inferior.
Una página con el fragmento asíncrono dividido por la mitad podría verse así:
<html>
<head>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
</script>
</head>
<body>
<p>Page Content</p>
<script src="some_random_script.js"></script>
<p>Page Content</p>
<script type="text/javascript"> (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>
</body>
</html>
Ambos fragmentos de código deben unirse en sus propias etiquetas de secuencia de comandos, pero solo se deben mover a la parte inferior las seis últimas líneas del fragmento asíncrono original. Todas las líneas que envían métodos a _gaq pueden permanecer en la parte superior.
Cómo evitar errores comunes
Cuando uses la sintaxis asíncrona o tradicional, ten en cuenta lo siguiente:
- Los nombres de los métodos distinguen mayúsculas de minúsculas.
Si usas un nombre de método sin escribir las mayúsculas y minúsculas, las llamadas al método no funcionarán. Ejemplos:_gaq.push(['_trackpageview']); // bad _gaq.push(['_trackPageview']); // good
- Usa los nombres de métodos correctos.
Si el seguimiento no funciona correctamente, asegúrate de estar usando el nombre correcto para el método. Ejemplos:_gaq.push(['_setDomain', 'example.com']); // bad _gaq.push(['_setDomainName', 'example.com']); // good
- Solo las cadenas se deben pasar entre comillas. Todos los demás tipos no deben estar entre comillas.
Cualquier valor que no sea una string, como booleanos, literales de objeto, funciones o arrays, se debe pasar sin comillas. Usa solo comillas cuando pases algo que deba interpretarse como una string. Si migras desde la sintaxis tradicional, cualquier parámetro de función que se pasó sin comillas debe permanecer sin comillas en la sintaxis asíncrona. Ejemplos:_gaq.push(['_setAllowLinker', 'false']); // bad _gaq.push(['_setAllowLinker', false]); // good
- Asegúrate de que las strings no contengan espacios en blanco al inicio ni al final.
Ejemplos:_gaq.push(['_setAccount', ' UA-65432-1']); // bad _gaq.push(['_setAccount', 'UA-65432-1']); // good
Cómo inhabilitar el seguimiento
En algunos casos, puede ser necesario inhabilitar el código de seguimiento de Google Analytics en una página sin tener que quitar el fragmento de código. Por ejemplo, podrías hacerlo si la política de privacidad de tu sitio incluye la posibilidad de que un visitante inhabilite el seguimiento de Google Analytics.
El fragmento de seguimiento ga.js ahora incluye una propiedad de ventana que, cuando se configura en true, inhabilita el envío de datos a Google Analytics.
Cuando Google Analytics intenta establecer una cookie o enviar datos
a los servidores de Google Analytics, verificará si esta
propiedad está configurada como true. Si es así, tendrá el mismo efecto que si el visitante tuviera instalado el
complemento de inhabilitación para navegadores de Google Analytics.
Para inhabilitar el seguimiento, configura la siguiente propiedad de ventana como verdadera:
window['ga-disable-UA-XXXXXX-Y'] = true;
Cuando el valor UA-XXXXXX-Y corresponde al ID de propiedad web en el que deseas inhabilitar el seguimiento.
Se debe configurar esta propiedad de ventana antes de llamar al código de seguimiento. Esta propiedad debe configurarse en cada página en la que desees inhabilitar el seguimiento de Google Analytics. Si no estableces la propiedad o la estableces como falsa, el seguimiento funcionará como de costumbre.
Por ejemplo, si el código de seguimiento de Google Analytics en una página incluye lo siguiente:
_gaq.push['_setAccount', 'UA-123456-1']
Si quieres inhabilitar ese código de seguimiento para que no pueda configurar cookies ni enviar datos a Google Analytics, debes utilizar el siguiente código antes de que se llame al código de seguimiento:
window['ga-disable-UA-123456-1'] = true;
Si usas varias herramientas de seguimiento en una página con varios IDs de propiedad web, debes establecer la variable window['ga-disable-UA-XXXXXX-Y'] equivalente en true para cada propiedad web para inhabilitar completamente el seguimiento de Google Analytics en esa página.
Ejemplo
A continuación, se muestra un ejemplo simple de un código que puedes usar para ofrecer funcionalidad de inhabilitación a los usuarios.
En primer lugar, agrega un nuevo vínculo HTML a tu sitio para ejecutar la lógica de inhabilitación:
<a href="javascript:gaOptout()">Click here to opt-out of Google Analytics</a>
Luego, agrega el siguiente fragmento de código antes del fragmento ga.js. Asegúrate de reemplazar el valor de gaProperty de UA-XXXX-Y por la propiedad que se usa en tu sitio.
Este es el mismo valor que pasas al comando _setAccount.
<script>
// Set to the same value as the web property used on the site
var gaProperty = 'UA-XXXX-Y';
// Disable tracking if the opt-out cookie exists.
var disableStr = 'ga-disable-' + gaProperty;
if (document.cookie.indexOf(disableStr + '=true') > -1) {
window[disableStr] = true;
}
// Opt-out function
function gaOptout() {
document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
window[disableStr] = true;
}
</script>
Cuando un usuario haga clic en el vínculo HTML de inhabilitación, se ejecutará la función gaOptout personalizada. Establecerá una cookie durante mucho tiempo en el futuro y, además, inhabilitará la recopilación de datos de analytics.js.
Cuando un usuario regrese a este sitio, la secuencia de comandos anterior verificará si se configuró la cookie de inhabilitación. Si es así, también se inhabilitará la recopilación de datos de analytics.js.
Fuerza SSL (HTTPS)
Para obligar a Google Analytics a enviar datos siempre mediante SSL, incluso desde páginas no seguras (HTTP), usa el método
_gat._forceSSL, como en este ejemplo:
_gaq.push(['_setAccount', 'UA-12345-1']); _gaq.push(['_gat._forceSSL']); // Send all hits using SSL, even from insecure (HTTP) pages. _gaq.push(['_trackPageview']);