Interactions avec les réseaux sociaux - Suivi Web (ga.js)

Ce document explique comment utiliser Google Analytics pour obtenir des métriques d'interaction sur des réseaux autres que Google, tels que Facebook et Twitter. Utilisez ce document pour configurer Analytics pour vos boutons de partage sur les réseaux sociaux si vous êtes propriétaire d'un site, développeur de plug-ins de gestion de contenu ou si vous êtes un opérateur de réseau social et que vous souhaitez fournir automatiquement des rapports sur les interactions sur les réseaux sociaux aux utilisateurs de vos boutons de partage.

Introduction

Par défaut, Google Analytics fournit des rapports intégrés sur le bouton +1. Cela signifie que si vous avez implémenté ga.js et un bouton +1 sur la même page, toutes les interactions +1 sur les réseaux sociaux sont automatiquement comptabilisées. Pour en savoir plus sur les statistiques +1 dans Analytics, y compris pour obtenir des conseils de dépannage, consultez l'article À propos de l'analyse des réseaux sociaux dans le centre d'aide.

Afin d'obtenir des analyses et des rapports sur les interactions sur les réseaux sociaux pour d'autres réseaux comme Facebook ou Twitter, vous devez intégrer Google Analytics à chaque bouton de réseau. Avec l'outil Analyse du plug-in Réseaux sociaux, les interactions enregistrées incluent aussi bien un "J'aime" sur Facebook que un "Tweet" sur Twitter. Si le suivi des événements permet également d'effectuer le suivi des interactions générales avec le contenu, l'analyse des réseaux sociaux fournit un framework cohérent pour enregistrer ces interactions. Les utilisateurs des rapports Google Analytics ont ainsi accès à un ensemble cohérent de rapports leur permettant de comparer les interactions sur plusieurs réseaux sociaux.

Pour voir un exemple pratique d'intégration d'Analytics avec les boutons Facebook et Twitter, consultez l'exemple de code de l'outil Analyse des réseaux sociaux.

Configurer l'analyse des réseaux sociaux

Pour configurer le suivi des interactions sur les réseaux sociaux, vous devez utiliser la méthode _trackSocial, qui envoie les données sur les interactions sur les réseaux sociaux à Google Analytics. La méthode doit être appelée une fois qu'un utilisateur a effectué une interaction sur les réseaux sociaux. Chaque réseau social utilise un mécanisme différent pour déterminer à quel moment l'interaction a lieu, ce qui nécessite généralement une intégration à l'API pour ce bouton de réseau.

Les détails spécifiques à l'intégration de l'analyse des réseaux sociaux varient selon les réseaux sociaux. Par conséquent, le reste de ce guide décrit les bonnes pratiques générales pour configurer l'analyse du plug-in Réseaux sociaux pour chacun de ces réseaux. Nous vous recommandons de consulter la documentation destinée aux développeurs pour chaque réseau afin de connaître l'implémentation propre au réseau.

Voici une description de la méthode _trackSocial:

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

où les paramètres représentent les éléments suivants:

  • network

    Obligatoire. Chaîne représentant le réseau social suivi (par exemple, Facebook, Twitter ou LinkedIn).

  • socialAction

    Obligatoire. Chaîne représentant l'action sur un réseau social suivie (par exemple, "J'aime", "Partager" ou "Tweet".

  • opt_target

    Facultatif. Chaîne représentant l'URL (ou la ressource) qui reçoit l'action. Par exemple, si un utilisateur clique sur le bouton J'aime sur une page d'un site, la opt_target peut être définie sur le titre de la page ou sur un ID permettant d'identifier la page dans un système de gestion de contenu. Dans de nombreux cas, la page pour laquelle vous cliquez sur J'aime est la même que vous. Par conséquent, si ce paramètre est undefined ou omis, le code de suivi utilise par défaut document.location.href.

  • opt_pagePath

    Facultatif. Chaîne représentant la page en fonction du chemin d'accès (paramètres compris) à partir de laquelle l'action s'est produite. Par exemple, si vous cliquez sur un bouton J'aime sur https://developers.google.com/analytics/devguides/, opt_pagePath doit être défini sur /analytics/devguides. Presque toujours, le chemin de la page est la source de l'action sur un réseau social. Par conséquent, si ce paramètre est undefined ou omis, le code de suivi utilise par défaut location.pathname plus location.search. En règle générale, vous ne devez définir ce paramètre que si vous suivez les pages vues virtuelles en modifiant le paramètre facultatif du chemin de la page à l'aide de la méthode _trackPageview de Google Analytics.

Actions Facebook

D'après le SDK JavaScript Facebook, le moyen le plus simple de configurer un bouton J'aime sur votre page consiste à utiliser le code suivant:

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

J'aime

Pour enregistrer les "J'aime" avec Google Analytics, abonnez-vous à l'événement edge.create de Facebook et créez une fonction de rappel afin d'exécuter le code de suivi Google Analytics.

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

Lorsqu'un utilisateur aime votre page, la fonction de rappel est exécutée et reçoit l'URL de la ressource concernée. La ressource est ensuite transmise en tant que valeur à la méthode _trackSocial afin que Google Analytics puisse générer des rapports sur le réseau, l'action et l'URL J'aime.

N'aime pas

Les API Facebook vous permettent également de vous abonner à d'autres événements intéressants, comme Je n'aime pas.

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

Partages

Vous pouvez également vous abonner aux partages.

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

Tweets Twitter

D'après la documentation sur les boutons Tweet et les événements JavaScript des intents Web, afin d'implémenter un bouton Twitter sur votre page et de détecter les interactions des utilisateurs, le code suivant doit être utilisé :

<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>

Pour suivre les événements du bouton de tweet avec Google Analytics, vous devez utiliser les événements JavaScript des intents Web de Twitter et lier une fonction de rappel à Intent Event. Il est important d'encapsuler les liaisons d'événements dans une fonction de rappel pour s'assurer que tout est chargé avant les événements de liaison.

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);
});

Lorsqu'un utilisateur envoie un tweet, la fonction de rappel reçoit un objet qui peut généralement être utilisé pour obtenir l'URL de la ressource tweetée. Une fois le code JavaScript de Twitter chargé, le lien du tweet annoté est transformé en iFrame, et l'URL du tweet est encodée et ajoutée en tant que paramètre de requête à l'URL de l'iFrame. L'objet d'événement transmis à notre rappel contient une référence à cet iFrame. Nous pouvons l'utiliser pour obtenir l'URL de la ressource tweetée.

La fonction de rappel ci-dessus s'assure que la référence de l'iFrame est bien un iFrame, puis tente d'extraire la ressource tweetée en consultant le paramètre de requête url.

Voici un exemple de fonction permettant d'extraire un paramètre de requête à partir d'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;
}

Le paramètre est renvoyé s'il se trouve dans la chaîne de requête. Si aucun paramètre n'est localisé, la fonction renvoie undefined, qui est transmis à la méthode _trackSocial, ce qui entraîne le comportement par défaut de la méthode.

Bonnes pratiques d'intégration

De nombreux sites ajoutent des boutons de réseaux sociaux à l'aide de plug-ins de gestion de contenu. Si vous êtes l'auteur de ces plug-ins, nous vous recommandons vivement d'intégrer l'analyse du plug-in Réseaux sociaux pour enregistrer automatiquement ces interactions. De même, si vous êtes développeur pour un réseau social, vous pouvez faciliter le suivi des interactions des utilisateurs sur les réseaux sociaux dans Google Analytics en l'intégrant à l'outil Analyse des réseaux sociaux.

Pour vous aider, cette section décrit les bonnes pratiques à suivre pour intégrer Analytics du plug-in Réseaux sociaux afin que votre produit ou CMS effectue automatiquement le suivi des interactions sur les réseaux sociaux. Pour obtenir un exemple concret de l'ensemble de ces bonnes pratiques, consultez l'exemple de code "Analyse du plug-in Réseaux sociaux".

Instanciation et utilisation de la file d'attente _gaq

La dernière version du code de suivi Google Analytics peut être chargée de manière synchrone et asynchrone. Pour permettre aux développeurs d'appeler des méthodes qui n'ont pas encore été chargées, Google Analytics fournit une file d'attente de commandes _gaq, vers laquelle les méthodes de suivi peuvent être poussées _gaq.push();.

Une fois le code de suivi chargé, toutes les commandes de la file d'attente sont exécutées. Lorsque vous intégrez le code de suivi JavaScript Google Analytics dans votre plug-in ou produit, vous devez toujours vous assurer que cette file d'attente de commandes est instanciée et que votre intégration transmet la commande _trackSocial à ce tableau.

var _gaq = _gaq || [];

Cela garantit de manière raisonnable que la méthode sera appelée, que la page du site Web destinataire utilise l'extrait de code de suivi traditionnel ou asynchrone.

Configurations utilisateur

Si vous développez un plug-in qui intègre l'analyse du plug-in Réseaux sociaux, nous vous conseillons de fournir les options suivantes, qui permettent aux utilisateurs de définir quand ils se serviront de votre plug-in:

Définir le paramètre facultatif de chemin de la page : le dernier paramètre de la méthode _trackSocial consiste à remplacer l'URL actuelle à partir de laquelle une interaction sur les réseaux sociaux s'est produite. L'objectif final est que les mêmes URL soient signalées entre le suivi des pages et l'outil Analyse du plug-in Réseaux sociaux. Étant donné que certains utilisateurs peuvent remplacer l'URL par défaut de la page suivie par le suivi des pages vues, ils ont également besoin d'un moyen de remplacer l'URL dans "Analyse du plug-in Réseaux sociaux" afin d'obtenir des rapports cohérents.

Voici un exemple de la manière dont vous pouvez autoriser les utilisateurs à définir ces options, ainsi que la manière dont votre code doit y répondre.

// 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) {}
}

Dans l'exemple ci-dessus, si la fonction trackFacebook est appelée avec le paramètre opt_pagePath défini, la valeur par défaut du chemin de la page sera remplacée par le chemin d'approvisionnement du paramètre. Sinon, la valeur de ce paramètre sera définie sur undefined. et le code de suivi Google Analytics utilise la valeur par défaut du paramètre non défini.

Remarque: Dans cet exemple, quelques vérifications ont également été ajoutées pour s'assurer qu'aucune erreur de script ne se produit si l'API Facebook n'a pas été chargée. En tant que développeur responsable, vous devez veiller à gérer les erreurs de manière appropriée.

Plusieurs coachs électroniques

Certains utilisateurs Google Analytics nomment leur objet de suivi pour distinguer plusieurs outils de suivi sur la même page. Bien que nous n'encourageons pas l'utilisation de plusieurs outils de suivi sur la même page de site Web, vous pouvez envisager d'en gérer plusieurs.

Vous trouverez ci-dessous un exemple d'itération et d'appel de la méthode _trackSocial pour chaque objet de suivi. Elle utilise la méthode _getTrackers qui renvoie un tableau de tous les objets de suivi sur la page.

Dans cet exemple, lorsque l'événement Facebook est déclenché, la méthode _trackSocial de chaque objet tracker est envoyée vers la file d'attente de commandes Google Analytics _gaq. 

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) {}
}