Portrait Olivier Duffez

Olivier Duffez

Créateur de WebRankInfo,
consultant en référencement

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

Peut-être avez-vous mis sur votre site les fameux boutons de partages sur les réseaux sociaux, mais savez-vous s’ils sont cliqués et par qui ? Comment repérer le comportement sur votre site des internautes qui ont cliqué ? Voici un tutoriel complet en français expliquant comment faire le tracking du social dans Google Analytics.

Les statistiques Google Analytics des clics sur les boutons de partage

Compter les clics sur les boutons de réseaux sociaux de son site

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 :

Statistiques des clics sur les boutons Facebook Twitter Plus 1

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 http://www.webrankinfo.com/, il faut générer cet appel :

_gaq.push(['_trackSocial', 'facebook', 'like', 'http://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="http://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="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
  <a href="http://code.google.com/apis/analytics"
     data-url="http://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 :-)

Cet article vous a-t-il plu ?

Cliquez pour voter !

Laisser un commentaire

Remarques :

  • Si vous souhaitez poser une question ou détailler un problème technique, il ne faut pas utiliser le formulaire ci-dessous qui est réservé aux avis. Posez votre question directement dans le forum Gmail de WebRankInfo. L'inscription est gratuite et immédiate.

  • En postant un avis, vous acceptez les CGU du site WebRankInfo. Si votre avis ne respecte pas ces règles, il pourra être refusé. Si vous indiquez votre adresse email, vous serez informé dès que votre avis aura été validé (ou refusé...) ; votre adresse ne sera pas utilisée pour vous envoyer des mailings et ne sera pas revendue ou cédée à des tiers.

9 commentaires

Emploi Maghreb

Bonjour,
merci pour ce tutoriel. C’est vraiment une très bonne option dans google analytics. Le trafic des réseaux sociaux est de plus en plus important et il est devenu utile d’étudier leur impact.

Répondre
Alternance

Est-ce que l’ajout de code ne peux pas à terme ralentir le chargement de la page ? Car on rajoute du code pour les reseaux sociaux, d’autre pour connaitre le temps de chargement puis d’autre pour les sous domaines ect…

En clair est-ce que google prend en compte le temps de chargement de ses outils dans le temps de chargement d’une page
car adsense / analytics / admanager parfois ça ralenti bien une page

Répondre
MIMATA

Bonjour,

Il ne manquerait pas une } dans le bout de code « twttr.events.bind(‘tweet’, function(event)… » ?

En tout cas merci, je teste ça tout de suite !

Répondre
Olivier Duffez

Oui MIMATA ça manquait, je l’ai corrigé, merci

Répondre
topliens

Je mettrais plutôt un code du style :
targetUrl = extractParamFromUri(event.target.src, 'counturl');
if (!targetUrl) {
targetUrl = extractParamFromUri(event.target.src, 'url');
}

Car si le paramètre « counturl » est renseigné il est plus pertinent que « url ».

Répondre
Abel Franklin

Bonjour,
je vais passer pour une debutante mais je prend le risque…
Ou est ce qu’il faut placer ces codes ?
Dans le head ? ou sous les boutons ?
Merci d’avance
Lea

Répondre
Tonio

Suite à l’appréciation de FBML chez Facebook, je pensais qu’il fallait s’orienter vers l’iframe.

A la vue de cette fonctionnalité, je crois comprendre que l’implémentation de la fonction _trackSocial n’est pas envisageable si on utilise l’iframe (comme sur ce site d’ailleurs !).

Mince, faut que je retourne ma veste et que je m’oriente vers XFBML !

Répondre
Grégory

Bonjour,

Quelle est la différence entre « La fonction _trackSocial() » et « Partages » puique dans la fonction _tracksocial permet de tracker les share déjà.
Serait-ce une notion de callback et donc le script SDK permet d’avoir l’action quand la personne s’est connecté et donc a réellement effectué l’action?

Merci,

Cordialement,

Répondre
Olivier Duffez

Désolé Grégory, je ne sais pas te répondre de façon détaillée et précise, d’ailleurs je ne vois pas bien à quoi tu fais référence quand tu écris « Partages ». Je n’ai pas vu cet intitulé exact dans Google Analytics (qui tracke parfois très mal les principaux réseaux sociaux)

Répondre