Interacciones en redes sociales: seguimiento web (ga.js)

En este documento, se describe cómo usar Google Analytics para obtener métricas de interacción en redes que no son de Google, como Facebook y Twitter. Usa este documento a fin de configurar Analytics para tus botones para compartir en redes sociales si eres propietario de un sitio, desarrollador de complementos de administración de contenido o si eres operador de redes sociales y deseas proporcionar informes automáticos de interacción social a los usuarios de tus botones para compartir.

Introducción

De forma predeterminada, Google Analytics proporciona informes integrados para el botón de +1. Esto significa que, si implementaste ga.js y un botón de +1 en la misma página, todas las interacciones de +1 en redes sociales se informarán automáticamente. Para obtener más información sobre Analytics +1, incluidas sugerencias para solucionar problemas, consulta Acerca de Estadísticas sociales en el Centro de ayuda.

Para obtener informes y análisis de interacciones sociales de otras redes, como Facebook o Twitter, debes integrar Google Analytics con cada botón de la red. Con Social Plugin Analytics, las interacciones registradas van desde un "Me gusta" en Facebook hasta un "tweet" de Twitter. Si bien el seguimiento de eventos también puede realizar un seguimiento de las interacciones generales de contenido, Social Analytics proporciona un marco de trabajo coherente para registrar las interacciones en redes sociales. Esto, a su vez, proporciona a los usuarios de informes de Google Analytics un conjunto coherente de informes para comparar las interacciones de las redes sociales entre varias redes.

Para ver un ejemplo funcional de cómo integrar Analytics con los botones de Facebook y Twitter, consulta el código de muestra de Estadísticas sociales.

Configuración de estadísticas sociales

Para configurar el seguimiento de las interacciones en redes sociales, deberás usar el método _trackSocial, que envía los datos de interacción en redes sociales a Google Analytics. Se debe llamar a este método una vez que el usuario complete una interacción social. Cada red social utiliza un mecanismo diferente para determinar cuándo se produce la interacción social, y esto suele requerir la integración con la API de ese botón de la red.

Dado que los detalles específicos para integrar Social Analytics varían según la red social, en el resto de esta guía se proporcionan prácticas recomendadas generales sobre cómo configurar las estadísticas de complementos de redes sociales para cada una de estas redes. Te recomendamos que consultes la documentación para desarrolladores de cada red a fin de determinar la implementación específica de la red.

A continuación, se muestra una descripción del método _trackSocial:

_gaq.push(['_trackSocial', network, socialAction, opt_target, opt_pagePath]);

donde los parámetros representan lo siguiente:

  • network

    Obligatorio. Es una cadena que representa la red social de la que se hace un seguimiento (p.ej., Facebook, Twitter o LinkedIn).

  • socialAction

    Obligatorio. Es una cadena que representa la acción social de la que se hace un seguimiento (p.ej., "Me gusta", "Compartir" o "Tweet").

  • opt_target

    Opcional. Es una cadena que representa la URL (o el recurso) que recibe la acción. Por ejemplo, si un usuario hace clic en el botón Like en una página de un sitio, opt_target podría establecerse como el título de la página o un ID que se usa para identificar la página en un sistema de administración de contenido. En muchos casos, la página en la que marcaste Me gusta es la misma en la que te encuentras. Por lo tanto, si este parámetro es undefined o se omite, el código de seguimiento utiliza document.location.href de forma predeterminada.

  • opt_pagePath

    Opcional. Es una cadena que representa la página según la ruta (incluidos los parámetros) desde la que se produjo la acción. Por ejemplo, si haces clic en el botón Like en https://developers.google.com/analytics/devguides/, opt_pagePath se debe establecer en /analytics/devguides. Casi siempre, la ruta de la página es la fuente de la acción social. Por lo tanto, si este parámetro es undefined o se omite, el código de seguimiento usa location.pathname más location.search de forma predeterminada. Por lo general, solo debes configurar esta opción si realizas un seguimiento de las vistas de página virtuales. Para ello, debes modificar el parámetro opcional de la ruta de la página con el método _trackPageview de Google Analytics.

Acciones de Facebook

Según el SDK de JavaScript de Facebook, la forma más sencilla de configurar un botón Me gusta en tu página es usar el siguiente código:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like></fb:like>

Me gusta

Para registrar Me gusta con Google Analytics, suscríbete al evento edge.create de Facebook y crea una función de devolución de llamada para ejecutar el código de seguimiento de Google Analytics.

FB.Event.subscribe('edge.create', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'like', targetUrl]);
});

Cuando a un usuario le le gusta tu página, se ejecuta la función de devolución de llamada, que recibe la URL del recurso en cuestión. Luego, el recurso se pasa como un valor al método _trackSocial para que Google Analytics pueda generar informes sobre la red, la acción y la URL que se les gusta.

No me gusta

Las API de Facebook también te permiten suscribirte a otros eventos interesantes, como la acción no me gusta.

FB.Event.subscribe('edge.remove', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'unlike', targetUrl]);
});

Veces que se compartió el contenido

También puedes suscribirte para recibir contenido compartido.

FB.Event.subscribe('message.send', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'send', targetUrl]);
});

Tweets de Twitter

Según la Documentación sobre el botón de tweet y los eventos de JavaScript de intents web, para implementar un botón de Twitter en tu página y detectar interacciones del usuario, se debe usar el siguiente código:

<a href="http://developers.google.com/analytics" class="twitter-share-button" data-lang="en">Tweet</a>
<script type="text/javascript" charset="utf-8">
  window.twttr = (function (d,s,id) {
    var t, js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
    js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
    return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
  }(document, "script", "twitter-wjs"));
</script>

Para hacer un seguimiento de los eventos del botón de tweet con Google Analytics, debes usar los eventos de Web Intents JavaScript de Twitter y vincular una función de devolución de llamada a Intent Event. Es importante unir las vinculaciones de eventos en una función de devolución de llamada para asegurarte de que todo se haya cargado antes de vincular eventos.

function trackTwitter(intent_event) {
  if (intent_event) {
    var opt_pagePath;
    if (intent_event.target && intent_event.target.nodeName == 'IFRAME') {
          opt_target = extractParamFromUri(intent_event.target.src, 'url');
    }
    _gaq.push(['_trackSocial', 'twitter', 'tweet', opt_pagePath]);
  }
}

//Wrap event bindings - Wait for async js to load
twttr.ready(function (twttr) {
  //event bindings
  twttr.events.bind('tweet', trackTwitter);
});

Cuando un usuario envía un tweet, la función de devolución de llamada recibe un objeto que, por lo general, se puede usar para obtener la URL del recurso que se twittea. Una vez que se carga el código JavaScript de Twitter, se transforma el vínculo del tweet con anotaciones en un iframe y la URL que se está twitteando se codifica y se agrega como un parámetro de consulta a la URL del iframe. El objeto de evento que se pasa a nuestra devolución de llamada tiene una referencia a este iframe y podemos usarlo para obtener la URL del recurso que se twittea.

La función de devolución de llamada anterior garantiza que la referencia del iframe sea realmente un iframe y, luego, intenta extraer el recurso que se twittea observando el parámetro de consulta url.

A continuación, verás una función de ejemplo para extraer un parámetro de consulta de un URI:

function extractParamFromUri(uri, paramName) {
  if (!uri) {
    return;
  }
  var regex = new RegExp('[\\?&#]' + paramName + '=([^&#]*)');
  var params = regex.exec(uri);
  if (params != null) {
    return unescape(params[1]);
  }
  return;
}

El parámetro se muestra si se encuentra en la cadena de consulta. Si no se localiza ningún parámetro, la función muestra undefined, que se pasa al método _trackSocial, lo que genera el comportamiento predeterminado del método.

Prácticas recomendadas para la integración

Muchos sitios agregan botones de redes sociales mediante complementos de administración de contenido. Si eres el autor de esos complementos, te recomendamos que integres Analytics del complemento de redes sociales para registrar estas interacciones automáticamente. Del mismo modo, si eres desarrollador en una red social, también puedes facilitarles a los usuarios el seguimiento de tus interacciones en redes sociales en Google Analytics mediante la integración con este servicio.

Con el objetivo de ayudarte, en esta sección, se describen las prácticas recomendadas para integrar Analytics para complementos de redes sociales a fin de que tu producto o CMS realice un seguimiento automático de las interacciones en redes sociales. Si deseas ver un ejemplo funcional de todas estas prácticas recomendadas, consulta el código de muestra de Analytics para complementos de redes sociales.

Cómo crear una instancia y usar la cola _gaq

La versión más reciente del código de seguimiento de Google Analytics admite la carga síncrona y asíncrona. Para permitir que los desarrolladores llamen a métodos que aún no se cargaron, Google Analytics proporciona una cola de comandos _gaq, a la que se pueden enviar métodos de seguimiento _gaq.push();.

Una vez que se carga el código de seguimiento, se ejecutan todos los comandos en la cola. Cuando integras el código de seguimiento de JavaScript de Google Analytics a tu complemento o producto, siempre debes asegurarte de que se cree una instancia de esta cola de comandos y de que tu integración envíe el comando _trackSocial a este array.

var _gaq = _gaq || [];

Esto proporciona una garantía razonable de que se llamará al método independientemente de si la página del sitio web receptor utiliza el fragmento de código de seguimiento tradicional o asíncrono.

Configuraciones de usuario

Si desarrollas un complemento que integra Social Plugin Analytics, deberías considerar proporcionar las siguientes opciones que permiten a los usuarios configurar cuándo utilizan tu complemento:

Configuración del parámetro opcional de la ruta de la página: El parámetro final del método _trackSocial es anular la URL actual desde la que se produjo una interacción en redes sociales. El objetivo final es que se informen las mismas URLs entre el seguimiento de páginas y el complemento de redes sociales de Analytics. Dado que algunos usuarios pueden anular la URL predeterminada de la página a la que se hace un seguimiento con el seguimiento de vistas de página, también necesitan una forma de anular la URL en el complemento de redes sociales para Analytics para obtener informes coherentes.

A continuación, te mostramos un ejemplo de cómo puedes permitir que los usuarios configuren estas opciones y cómo debe responder tu código.

// Create a function for a user to call to pass in the options.
function trackFacebook(opt_pagePath) {
  try {
    if (FB && FB.Event && FB.Event.subscribe) {
      FB.Event.subscribe('edge.create', function(targetUrl) {
        _gaq.push(['_trackSocial', 'facebook', 'like',
            opt_target, opt_pagePath]);
      });
    }
  } catch(e) {}
}

En el ejemplo anterior, si se llama a la función trackFacebook con el parámetro opt_pagePath configurado, el valor predeterminado de la ruta de la página se reemplazará con la ruta de suministro del parámetro. De lo contrario, el valor de ese parámetro se establecerá en undefined. y el código de seguimiento de Google Analytics usará el valor predeterminado para el parámetro no definido.

Nota: En este ejemplo, también se agregaron un par de verificaciones para garantizar que no se produzcan errores de secuencia de comandos si no se cargó la API de Facebook. Como desarrollador responsable, debes asegurarte de manejar los errores de forma adecuada.

Varios monitores

Algunos usuarios de Google Analytics asignan un nombre al objeto de seguimiento para distinguir varias herramientas de seguimiento en la misma página. Si bien no recomendamos el uso de varios rastreadores en la misma página del sitio web, podrías considerar administrar varios rastreadores.

A continuación, se muestra un ejemplo de cómo iterar y llamar al método _trackSocial para cada objeto de seguimiento. Usa el método _getTrackers, que muestra un array de todos los objetos de seguimiento de la página.

En este ejemplo, cuando se activa el evento de Facebook, el método _trackSocial para cada objeto de seguimiento se envía a la cola de comandos _gaq de Google Analytics. 

getSocialActionTrackers = function(network, socialAction, opt_target, opt_pagePath) {
  return function() {
    var trackers = _gat._getTrackers();
    for (var i = 0, tracker; tracker = trackers[i]; i++) {
      tracker._trackSocial(network, socialAction, opt_target, opt_pagePath);
    }
  };
}

function trackFacebook(opt_pagePath) {
  try {
    if (FB && FB.Event && FB.Event.subscribe) {
      FB.Event.subscribe('edge.create', function(targetUrl) {
        _gaq.push(_ga.getSocialActionTrackers_('facebook', 'like',
            opt_target, opt_pagePath));
      });
    }
  } catch(e) {}
}