Mide los elementos sociales on-site de tu sitio web con Google Analytics

Vamos a explicar como medir las interacciones sobre los elementos sociales en nuestra web, es decir sobre los típicos botones de compartir, me gusta, twittear, que están disponible en todas las webs.

Hace ya mas de un año que Google implementó el _trackSocial , mediante la cual podemos medir sobre que complementos sociales interaccionan los usuarios de nuestras web.

El formato de la llamada que debemos implementar es el siguiente:

_trackSocial(red, accionSocial, destino_opc, path_opc);
red (cadena)La red sobre la cual se realiza la acción(e.g. Facebook, Twitter)
acccionSocial (cadena )El tipo de acción (e.g. Me gusta, Enviar, Twitter).
destino_opc (cadena)Este valor es opcional. Indica la URL sobre la cual se está realizando la acción. Si se deja si definir por defecto coge el valor del enlace sobre el cual se está realizando la acción (document.location.href).
Nota: Si quieres no quieres utilizar este valor pero sí el siguiente , deberás definir este valor como “undefinied”
path_opc(cadena) Este valor es opcional. Indice la página desde la cual se ha realizado la interacción, se utiliza el path ( es decir la URL sin el http://www.dominio.com ) . Si no se define, coge la URI actual junto los parámetros que tenga (document.location.pathname + document.location.search). Deberás rellenar este valor tan solo si utilizas páginas virtuales en tu implementación de Analytics. Recuerda poner el “/” al principio de la cadena.

Una vez etiquetada nuestra web, podremos ver en los reportes de Google Analytics, cuantas veces han hecho click en un “Me gusta” de una ficha de producto, o cuanta veces han retwitteado una noticia.

Las redes más grandes, y las que más se utilizan como Facebook y Twitter disponen de un API el cual nos permite medir con más exactitud la acción. Nos deja saber si realmente los usuarios han llegado a realizar el tweet, y no tan solo si han hecho click en el botón de nuestra web, por lo tanto podremos lanzar el _trackSocial, tan solo cuando realmente hayan completado la acción.

A continuación os explicaré como realizarlo sobre Facebook y Twitter:

Facebook
El API de integración de Facebook, ofrece la posibilidad de monitorizar los eventos que se generan con sus botones sociales, actualmente se puede medir lo siguiente: Me Gusta ( like/unlike ), Enviar, y publicación y borrado de comentarios.

En los Me gusta, y Enviar, el API de Facebook devuelve la URL sobre la que se ha realizado la acción, en el caso de los comentarios, a parte de la URL compartida el ID de comentario que ha hecho el usuario.

Ejemplo de como utilizar el API de FaceBook para medir cuando alguien hace click en el botón “Me gusta” con Google Analytics:

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

Podemos medir más acciones como las siguientes:

  • edge.create . Alguien clicka en Me Gusta
  • edge.remove . Alguien clicka en Ya no me gusta
  • comment.create. Alguien deja un comentario
  • comment.remove. Alguien borra un comentario.
  • message.send. Alguien click y envia nuestra página a sus contactos.

Debemos recordar que para utilizar esta funcionalidad debemos utilizar el API de Facebook para poner los elementos sociales en nuestra, y no vale tan solo con poner un botón que nos mandé a Facebook, para la correcta implementación de los botones, deberemos poner el siguiente código al inicio de nuestra etiqueta <body>

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_ES/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

y luego donde queramos poner por ejemplo el botón me gusta, poner el siguiente código:

<div data-href="http://www.facebook.com/platform" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
<div data-href="http://www.facebook.com/platform" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>

Después de hacer esto ya podemos poner el código del “listener” mostrado arriba para que se generen los eventos sociales para que Google Analytics registre las acciones.

Tenéis más información sobre como colocar los plugins sociales, en la siguiente dirección: https://developers.facebook.com/docs/plugins/

Twitter
La red social Twitter también ofrece la posibilidad de recibir un “callback”, para saber si se ha terminado de realizar la acción. Los llama Web Intents .

Al igual que con Facebook no nos bastará con poner un botón de compartir, si no que tendremos que utilizar su API para mostrar los botones, para ello pondremos el siguiente código al inicio de nuestro 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>

Después deberemos poner el siguiente código para que se lance el _trackSocial, cuando se realice alguna acción:

<script>
function trackTwitter(intent_event) {
    if (!intent_event) {
        return;
    }
    _gaq.push(['_trackSocial', 'twitter', intent_event.type]);
}
}
twttr.ready(function(twttr) {
    twttr.events.bind('click', trackTwitter);
    twttr.events.bind('tweet', trackTwitter);
    twttr.events.bind('retweet', trackTwitter);
    twttr.events.bind('favorite', trackTwitter);
    twttr.events.bind('follow', trackTwitter);
});
</script>

Tenéis más información sobre los Intents de Twitter en la siguiente dirección: https://dev.twitter.com/docs/intents/events

Con otras redes como linkedin creo recordar que también tiene un evento on-success el cual se podría integrar.

Para haceroslo más sencillo Google publicó un pequeño código javascript que os ayudará a hacer el seguimiento de forma automática en la siguiente direccion:

http://code.google.com/p/analytics-api-samples/source/browse/trunk/src/tracking/javascript/v5/social/ga_social_tracking.js

Hay un problema en todo esto, y que no podremos saber en los reportes sociales, si las visitas que vienen desde referrers locales, son a través de enlaces compartidos desde los botones de nuestra o web, o de cualquier usuarios que haya compartida una página nuestra. Por lo que os aconsejo enviar siempre el parámetro destino_opc , pasándole algún parámetro opción por ejemplo ?origen_social_web=true o lo que más os convenga, para poder después cuantificar las visitas que vuelvan a nuestra web desde enlaces compartidos desde nuestra propia web.

Muchos de los widget que existen, contemplan la opción de hacer la medición con Google Analytics de forma automática sin que tengamos que hacer la implementación a mano, como es el caso de Addthis, para hacerlo tan solo tenéis que introducir este código modificando el código de vuestra propiedad para empezar a recoger los datos:

<script type="text/javascript">var addthis_config = {
         data_ga_property: 'UA-123456-1',
         data_ga_social : true
}; 
</script>

Comments

2 responses to “Mide los elementos sociales on-site de tu sitio web con Google Analytics”

  1. David Durán Avatar
    David Durán

    Gracias tocayo, es de mucha ayuda tu artículo!

    1. thyngster Avatar
      thyngster

      Gracias David, de verdad que se agradecen estos comentarios de agradecimiento =)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.