Mesurer dans Google Analytics les clics sur les boutons de partage de réseaux sociaux

Les statistiques Google Analytics des clics sur les boutons de partage

Le nouveau menu Réseaux sociaux dans Google Analytics

Une fois que vous aurez bien configuré le tracking des clics sur ces jolis boutons qui ont fleuri sur votre site (j'explique comment faire ci-dessous), vous pourrez contempler les résultats dans Google Analytics.

Il vous faudra pour cela utiliser la nouvelle interface (Google Analytics v5). Rendez-vous dans le menu Visiteurs > Réseaux sociaux puis cliquez sur Intérêt et interaction, Activité ou Pages.

Le premier rapport Intérêt et interaction (engagement) indique combien vous avez obtenu de visites incluant une action sur un bouton social, et pour chaque combinaison {"source sociale", "action"} le comportement des visiteurs (nombre de pages par visite, temps moyen passé sur le site, pourcentage de nouvelles visites et taux de rebond.

Ce rapport permet d'identifier si les internautes qui cliquent sur chacun de ces boutons se comportent de façon différente sur votre site, en gros s'ils ont un meilleur "engagement" sur votre site. Voici un exemple fourni par Google sur leur blog :

Google Analytics peut afficher des détails sur le nombre de clics sur les boutons Facebook (J'aime, Envoyer), Twitter, Google +1 ou d'autres, et sur l'engagement des visiteurs ayant cliqué

Les autres rubriques du menu donnent accès aux statistiques suivantes :

• Activité (social actions) : rapport simplifié sur les interactions de vos visiteurs avec vos boutons, c'est-à-dire le nombre de clics sur le bouton +1 de Google, le nombre de Tweets, le nombre de J'aime, etc.
• Pages : rapport listant les pages de votre site recueillant le plus d'interactions (clics sur ces boutons)

Comment faire du tracking des boutons sociaux dans Google Analytics

Intérêt du "tracking social"

Vous avez compris que pour avoir les rapports présentés ci-dessus, il faut avoir configuré au préalable le tracking.

• pour le tracking du bouton +1 de Google : il se fait tout seul automatiquement si vous utilisez le code de suivi asynchrone (dans ce cas vous n'avez rien à faire).
• pour le tracking des autres boutons (Facebook, Twitter, LinkedIn, Delicious, etc.) : il faut ajouter des lignes de code dans vos pages.

Toutes les explications sur ce tracking sont détaillées dans l'aide aux développeurs (en anglais : Social Interaction Tracking) mais dans ma grande bonté je vous les ai traduites ci-après en français :-)

Note : même si vous pourriez tracker tous ces clics avec les événements Google Analytics, il est recommandé d'utiliser le tracking social qui apporte un framework adapté à la mesure des interactions sociales.

La fonction _trackSocial()

Pour enregistrer toutes ces interactions, vous devez utiliser la nouvelle fonction _trackSocial() qui enregistre les clics sur les boutons de partage sur les réseaux sociaux (ou de Unlike si vous avez moins de chance !). Par exemple pour enregistrer dans Google Analytics un clic sur un bouton J'aime pour l'URL https://www.webrankinfo.com/, il faut générer cet appel :

_gaq.push(['_trackSocial', 'facebook', 'like', 'https://www.webrankinfo.com/']);

Les 2 premiers paramètres sont obligatoires : le nom du réseau social et le libellé de l'action (dans cet exemple "facebook" et "like"). Le 3ème paramètre est un identifiant représentant la page pour laquelle l'interaction est faite : en règle générale il s'agit de la page en cours, si bien qu'il n'est pas nécessaire de le remplir (Google Analytics récupère alors l'URL de la page via document.location.href). Il existe un 4ème paramètre dont l'utilité est encore plus rare, je vous renvoie à la doc officielle si vous souhaitez en savoir plus.

Tracking des boutons J'aime, "Je n'aime plus" et Partager de Facebook

D'après la documentation Facebook JavaScript SDK, le moyen le plus simple d'intégrer un bouton Like dans votre page est d'utiliser le code suivant :

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

Clics sur Like

Pour mesurer les clics sur Like dans Google Analytics, il faut détecter l'événement Facebook edge.create et créer une fonction de callback pour exécute le code de suivi Google Analytics :

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

Quand un internaute Aime une de vos pages, la fonction de callback est exécutée et récupère l'URL de la ressource qui est likée. Cette ressource est passée par valeur à la méthode _trackSocial afin que Google Analytics puisse enregistrer l'information et fournir les rapports sur le réseau social, l'action et l'URL qui a été Likée.

Clics "Je n'aime plus" (unlike)

L'API Facebook vous permet aussi de détecter d'autres événements intéressants comme par exemple les annulations de J'aime (en anglais on parle des unlikes).

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

Partages

Vous pouvez aussi détecter les partages (shares).

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

Tracking des tweets via le bouton Tweeter

D'après la documentation Twitter, voici comment vous devriez intégrer un bouton Twitter sur votre page :

  <script src="https://platform.twitter.com/widgets.js" type="text/javascript"></script>
  <a href="https://code.google.com/apis/analytics"
     data-url="https://code.google.com/apis/analytics"
     class="twitter-share-button">Tweet</a>

Pour tracker les clics sur ce bouton dans Google Analytics, vous devez associer une fonction de callback à l'événement tweet.

twttr.events.bind('tweet', function(event) {
  if (event) {
    var targetUrl;
    if (event.target && event.target.nodeName == 'IFRAME') {
      targetUrl = extractParamFromUri(event.target.src, 'url');
    }
    _gaq.push(['_trackSocial', 'twitter', 'tweet', targetUrl]);
  }
});

Quand un internaute clique effectivement sur le bouton de tweet, la fonction de callback récupère un objet que l'on peut exploiter pour obtenir l'URL de la ressources qui est tweetée. Quand le code JavaScript Twitter se charge, il transforme le lien "Tweet" et ses paramètres dans une iFrame et l'URL tweetée se retrouve encodée et ajoutée à l'URL de l'iframe en tant que paramètre de requête. L'objet d'événement passé à notre fonction de callback contient une référence à cette iframe si bien que nous pouvons l'utiliser pour récupérer l'URL de la ressource que l'internaute tweete.

La fonction de callback ci-dessous s'assure que la référence de l'iframe est effectivement une iframe et tente ensuite d'extraire l'URL de la ressource en train d'être tweetée en cherchant le paramètre urldans la requête.

Voilà un exemple de fonction qui extrait un certain paramètre contenu dans une URI :

function extractParamFromUri(uri, paramName) {
  if (!uri) {
    return;
  }
  var uri = uri.split('#')[0];  // Remove anchor.
  var parts = uri.split('?');  // Check for query params.
  if (parts.length == 1) {
    return;
  }
  var query = decodeURI(parts[1]);

  // Find url param.
  paramName += '=';
  var params = query.split('&');
  for (var i = 0, param; param = params[i]; ++i) {
    if (param.indexOf(paramName) === 0) {
      return unescape(param.split('=')[1]);
    }
  }
}

Si le paramètre est trouvé dans la chaîne de caractères (URI), il est retourné par la fonction. Dans le cas contraire, la fonction renvoie la valeur undefined, qui est ensuite passée à la méthode _trackSocial (comportement par défaut de cette méthode).

Vous trouverez d'autres explications et des codes d'exemple en anglais sur code.google.com. Bon courage !

Si vous avez apprécié ce tutoriel, vous adorerez ma formation Google Analytics pour le référencement :-)