Registrar clics en botones sociales con Google Analytics

Google Analytics cuenta con un sistema de registro de eventos general que se puede utilizar para realizar un seguimiento de las interacciones del usuario con tu web. Por ejemplo, cuándo hace click sobre el botón para compartir en facebook, twitter o cualquier otra red social. Sin embargo, Google Analytics ofrece un método específico para el tracking de interacciones sociales, el Social Analytics, que hoy vamos a aprender a utilizar.

Sintaxis

El social analytics utiliza la función ga, que es la función general de Google Analytics. Para el tracking social la sintaxis de esta función para es:

ga('send', 'social', socialNetwork, socialAction, socialTarget[, configObject]);

Veamos cada uno de los parámetros:

‘send’: string. Obligatorio. El primer parámetro es el parámetro comand de analytics que para este caso ha de ser obligatoriamente igual a send.
‘social’: string. Obligatorio. El segundo parámetro es el parámetro hitType y en este caso ha de ser obligatoriamente igual a social.
socialNetwork: string. Obligatorio. Identifica la red social de destino. Por ejemplo, facebook, twitter, pinterest, etc.
socialAction: string. Obligatorio. Identifica la acción social realizada. Por ejemplo, like, share, tweet, etc.
socialTarget: string. Obligatorio. Identifica el objetivo de la interacción social, generalmente es una URL. Por ejemplo, la URL de la página compartida.
configObject: object. Opcional. Se puede pasar un objeto javascript con cualquiera de los parámetros aceptados por analytics.js.

Como sintaxis alternativa podemos utilizar un objeto con todos los parámetros para el comando send. Por ejemplo, este código:

ga('send', 'social', 'facebook', 'like', 'http://miweb.com/gran-tutorial' );

Sería equivalente a:

ga('send', {
  'hitType' : 'social',
  'socialNetwork' : 'facebook',
  'socialAction' : 'like',
  'socialTarget' : 'http://miweb.com/gran-tutorial'
} );

Integración con los botones oficiales de redes sociales

Cada red social tiene su propia API y, en consecuencia, no hay una integración universal del tracking social de Google Analytics para todas ellas. En el que caso del botón oficial de Google +1, ya está integrado en el Social Analytics y no es necesario hacer nada, para las demás debes ejecutar la función ga, tal y como hemos descrito antes, en el momento que el usuario realiza la interacción social; para interceptar ese momento es necesario seguir las instrucciones de cada red social.

Por ejemplo, si utilizamos el botón oficial de «Me gusta» en Facebook tenemos que seguir las instrucciones de Facebook JavaScript SDK. Según estas instrucciones, el evento edge.create tiene lugar cuándo el usuario hace click en el botón «Me gusta» y podemos utilizar el método FB.Event.subscribe para intervenir durante este evento. Para integrarlo con Social Analytics podríamos hacer algo así:

FB.Event.subscribe( 'edge.create', function( targetUrl ) {

  ga( 'send', 'social', 'facebook', 'like', targetUrl );

} );

Implementación en botones personalizados

Si no utilizas los botones oficiales sino los tuyos propios, la cosa es un poco más fácil, al menos no tienes que buscar un solución para cada red social. Por ejemplo, puedes tener estos tres botones para compartir en Facebook, Twitter, y Google Plus:

<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fmifabulosaweb.com" class="share" data-social-network="Facebook" data-social-action="Like" data-social-target="http%3A%2F%2Fmifabulosaweb.com">Compartir en Facebook</a>
<a href="https://twitter.com/intent/tweet?url=http%3A%2F%2Fmifabulosaweb.com&text=MiFabulosaWeb" class="share" data-social-network="Twitter" data-social-action="Tweet" data-social-target="http%3A%2F%2Fmifabulosaweb.com">Tweet</a>
<a href="https://plus.google.com/share?url=http%3A%2F%2Fmifabulosaweb.com" class="share" data-social-network="GooglePlus" data-social-action="+1" data-social-target="http%3A%2F%2Fmifabulosaweb.com">+1</a>

Ahora simplemente podríamos ejecutar el código de Social Analytics cuándo el usuario haga click en esos enlaces:

<script>
(function() {
 
    // seleccionar todos los enlaces con clase "share"
    var slink = document.querySelectorAll("a.share");
    for (var a = 0; a < slink.length; a++) {
 
        // Obtener los datos asociados
        var socialNetwork = slink[a].getAttribute( "data-social-network" );
        var socialAction = slink[a].getAttribute( "data-social-action" );
        var socialTarget = slink[a].getAttribute( "data-social-target" );

        // ejecutar nuestra función al hacer click
        slink[a].onclick = ga( 'send', 'social', socialNetwork, socialAction, socialTarget );
    }
 
}());
</script>

Tras la implementación de este código podrás tener informes en Google Analytics que muestran las interacciones sociales que los usuarios han realizado desde tu página web o aplicación. Recuerda definir correctamente los parámetros socialNetwork y socialAction, luego te servirán para segmentar y analizar los informes generados.

Como siempre, espero que os sea útil.