Introducción a ga.js (heredado)

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

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 las páginas. Para activar el seguimiento de Google Analytics, inserta ga.js en la página. Para usar este código en tus páginas, copia el fragmento de código que aparece a continuación y reemplaza UA-XXXXX-X por el ID de tu propiedad web. Pega este fragmento en la página de plantilla de tu sitio web para que aparezca antes de la etiqueta de cierre </head>.

Si necesitas hacer algo más que un seguimiento de páginas básico, consulta la referencia de seguimiento para ver 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. Para obtener instrucciones paso a paso sobre cómo configurar el seguimiento, consulte 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 el 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 volver a 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 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 primera en entrar,primero en salir que recopila llamadas a la API hasta que ga.js esté listo para ejecutarlas. Para agregar algo a la cola, usa el método _gaq.push.

Para enviar una llamada a la API a la cola, debes convertirla en un arreglo de comandos de la sintaxis tradicional de JavaScript. Los arreglos de comandos son simplemente arreglos de JavaScript que se ajustan a un formato determinado. El primer elemento de un arreglo de comandos es el nombre del método de objeto de seguimiento que deseas llamar. Debe ser una string. 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() mediante 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 seguimiento son iguales tanto en el seguimiento asíncrono como en el tradicional. Solo la sintaxis es diferente.

Para obtener más información sobre la sintaxis asíncrona, consulta la referencia de seguimiento del método _gaq.push.

Volver al principio

Seguimiento con controladores de eventos HTML

La sintaxis de 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 se hace clic en este botón antes de que el navegador termine de cargar ga.js, el evento se capturará y, finalmente, se ejecutará. Con el seguimiento tradicional, el navegador puede generar una excepción en esta situación.

Volver al principio

Envía funciones a la cola

Además de los arreglos de comandos, también puedes enviar objetos de función a la cola _gaq. Las funciones pueden contener cualquier JavaScript arbitrario y, al igual que los arreglos de comandos, se ejecutan en el orden en que se envían a _gaq. Esta técnica es útil para llamar a las API de seguimiento que muestran valores. Por ejemplo, el siguiente código compila una URL del vinculador y 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 a nivel global. En el siguiente código, se muestra cómo funciona.

_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 arreglo 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 arreglo de comandos enviado con anterioridad, usa el método _gat._getTrackerByName. En el siguiente código, se muestra 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/');
});

Volver al principio

Un solo envío, 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.

Volver al principio

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. 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 parte del fragmento que inserta ga.js en la parte inferior.

Una página con el fragmento asíncrono dividido por la mitad podría verse de la siguiente manera:

<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 estar incluidos en sus propias etiquetas de secuencia de comandos, pero solo las últimas seis líneas del fragmento asíncrono original deben moverse a la parte inferior. Todas las líneas que envían métodos a _gaq pueden permanecer en la parte superior.

Volver al principio

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 entre mayúsculas y minúsculas.
    Si usas un nombre de método sin las mayúsculas correctas, 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 su seguimiento no funciona correctamente, verifique que esté utilizando el nombre correcto para el método. Ejemplos:
    _gaq.push(['_setDomain', 'example.com']);       // bad
    _gaq.push(['_setDomainName', 'example.com']);   // good
    
  • Solo se deben pasar strings entre comillas. Todos los demás tipos deben dejarse sin comillas.
    Cualquier valor que no sea una string, como un valor booleano, literales de objeto, funciones o arreglos, debe pasarse sin comillas. Usa solo comillas cuando pases algo que debe interpretarse como una string. Si migras desde la sintaxis tradicional, cualquier parámetro de función que se haya ingresado 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
    

Volver al principio

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, puedes 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 establece en true, inhabilita el fragmento de seguimiento para que no envíe datos a Google Analytics. Cuando Google Analytics intenta establecer una cookie o enviar datos de vuelta a los servidores de Google Analytics, comprueba si esta propiedad está configurada en true. Si es así, tendrá el mismo efecto que si el visitante tuviera instalado el complemento de navegador para inhabilitación de Google Analytics.

Para inhabilitar el seguimiento, configura la siguiente propiedad de ventana como verdadera:

window['ga-disable-UA-XXXXXX-Y'] = true;

Donde el valor UA-XXXXXX-Y corresponde al ID de la propiedad web en el que deseas inhabilitar el seguimiento.

Esta propiedad de ventana debe establecerse antes de llamar al código de seguimiento. Esta propiedad se debe establecer en cada página en la que desees inhabilitar el seguimiento de Google Analytics. Si no se configura la propiedad o se establece como falsa, el seguimiento funcionará como de costumbre.

Por ejemplo, si tu código de seguimiento de Google Analytics en una página incluye lo siguiente:

_gaq.push['_setAccount', 'UA-123456-1']

Y desea inhabilitar ese código de seguimiento para que no establezca cookies ni envíe datos a Google Analytics. Luego, utilice el siguiente código antes de llamar al código de seguimiento:

window['ga-disable-UA-123456-1'] = true;

Si usas varias herramientas de seguimiento en una página con varios ID de propiedad web, debes establecer la variable window['ga-disable-UA-XXXXXX-Y'] equivalente en true para cada propiedad web a fin de inhabilitar por completo el seguimiento de Google Analytics en esa página.

Ejemplo

Este es un ejemplo sencillo de código que puedes usar a fin de inhabilitar la función para tus usuarios.

Primero, agrega un nuevo vínculo HTML a tu sitio para ejecutar la lógica de la inhabilitación:

<a href="javascript:gaOptout()">Click here to opt-out of Google Analytics</a>

Luego, agrega el siguiente fragmento de código antes que el fragmento de código 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 de inhabilitación de HTML, 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 lo hace, también se inhabilitará la recopilación de datos de analytics.js.

Cómo forzar SSL (HTTPS)

Para obligar a Google Analytics a enviar datos siempre con 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']);

Volver al principio