(Dernière mise à jour juin 2014) Google Analytics nous offre un moyen astucieux de suivre les interactions sociales. Avec un simple plugin, vous pouvez suivre le nombre de +1 et de Likes que vos pages accumulent.
Ce guide vous montre comment activer le marquage des interactions sociales avec Google Tag Manager et Universal Analytics. Les instructions sont pour Facebook Likes, Google+ +1s (désormais obsolète depuis Google Analytics suit automatiquement les +1), Tweets Twitter et épingles Pinterest.
Notez que si vous utilisez une API tierce (par exemple AddThis), ces astuces ne fonctionneront probablement pas. Vous devrez utiliser les fonctions API elles-mêmes pour activer le suivi.
Configurer des macros d’interaction sociale
Eh bien, tout d’abord, vous aurez besoin d’un tas de macros pour collecter les données de vos actions sociales.
Commençons donc avec Google Tag Manager.
Pas:
- Créer une nouvelle version de conteneur
- Créez une nouvelle macro de persuasion Data Layer Variable et nommez-la Réseau social
- Ajouter réseau social comme nom de variable
- Enregistrer la macro
- Créez une nouvelle macro de variable de couche de données et nommez-la Action sociale
- Ajouter Action sociale comme nom de variable
- Enregistrer la macro
- Créez une nouvelle macro de variable de couche de données et nommez-la Cible sociale
- Ajouter socialTarget comme nom de variable
- Enregistrer la macro
Alors maintenant, vous avez créé trois macros importantes, qui facilitent toutes le suivi des interactions sociales via Google Tag Manager. Réseau passera le nom du réseau social auquel appartient l’action (par exemple Facebook), Action passera le nom de l’action effectuée (par exemple J’aime), et Cibler passera le nom de la page sur laquelle l’action s’est produite (par exemple http://www.example.com/post1).
Configuration de la balise d’envoi
Pour que les événements d’interaction sociale apparaissent dans Google Analytics, ils doivent être envoyés (d’oh encore). Pour envoyer une interaction sociale, vous devez créer une balise qui aura les macros que nous venons de créer comme arguments. Cette balise est ensuite configurée pour se déclencher lors d’une action sociale.
- Créer une nouvelle balise Universal Analytics
- Donnez-lui un nom (comme Envoyer sur les réseaux sociaux)
- Ajoutez votre ID de suivi (il est préférable de le stocker sous forme de macro)
- Choisir Social comme type de piste
- Ajoutez vos macros comme arguments (voir l’image ci-dessous pour des indices)
- Ensemble {{event}} est égal à socialInt comme règle de tir (nous y reviendrons bientôt)
- Enregistrer la balise
Ici, nous créons une nouvelle balise qui abrite les arguments de l’interaction sociale. La règle de déclenchement est amorcée pour attendre un événement appelé socialIntque nous enverrons à partir de nos balises d’action sociale.
Configurez Facebook comme
Je n’entrerai pas dans la façon d’ajouter un bouton Facebook à votre page, vous devrez le faire vous-même. Facebook a un excellent guide et outil derrière ce lien qui vous aidera à créer le code nécessaire.
Cependant, une fois que vous avez votre bouton en place, vous devez en quelque sorte suivre les clics. Cela se fait en utilisant un fonction de rappel. Un rappel est une fonction exécutée immédiatement après la fin d’un événement.
Voici comment créer la fonction de rappel dans GTM.
Pas:
- Créez une nouvelle balise HTML personnalisée (ou utilisez une seule balise pour tous vos rappels de partage social)
- Donnez-lui un nom (ex. Partages sociaux)
- Ajoutez le code suivant :
<script> if (typeof FB !== 'undefined'){ FB.Event.subscribe('edge.create', function(href) { dataLayer.push({ 'event': 'socialInt', 'socialNetwork': 'Facebook', 'socialAction': 'Like', 'socialTarget': href }); } ); } </script>- Se déclenche après le chargement de DOM ({{event}} est égal à gtm.dom)
- Enregistrer la balise
OK, alors voici votre fonction de rappel Facebook Like. En cliquant sur le bouton J’aime, cette fonction est appelée. Avant que le contrôle ne soit rendu à la page, l’événement déclencheur de la Envoyer sur les réseaux sociaux étiquette (socialInt) est poussé dans la couche de données. Après cela, les trois arguments requis sont également transmis. La valeur pour socialTarget est hrefqui est l’un des paramètres de la fonction de rappel, et qui représente l’URL de la page sur laquelle l’événement s’est produit.
En utilisant FB.Event.Subscribe, vous pouvez écouter un certain nombre d’événements différents (par exemple, envoi de message, connexion). Vérifiez les options disponibles dans le guide de développement Facebook.
Configurer Google +1
METTRE À JOUR: Notez que cette fonctionnalité est pratiquement obsolète, car Google Analytics et Universal Analytics effectuent tous deux automatiquement le suivi des +1.
Encore une fois, je ne vais pas vous dire comment ajouter le bouton à votre page. C’est très simple, et vous pouvez trouver un bon guide ici.
Avec Google+, vous devez spécifier le rappel comme argument dans la balise du bouton. Avec Facebook, c’était automatisé. Notez qu’il existe un certain nombre d’événements pour lesquels vous pouvez spécifier un rappel : les clics, l’interaction commence (lorsque quelqu’un survole ou clique sur le bouton) et l’interaction se termine (lorsque quelqu’un ferme la bulle +1). J’ai juste choisi le clic car c’est le moyen le plus simple de suivre (bien qu’un peu inexact).
J’ai choisi envoyerPlus comme nom de la fonction de rappel. Un exemple de code de bouton serait alors :
<g:plusone href="http://example.com" size="standard" annotation="none" callback="sendPlus"></g:plusone>Notez que la référence des développeurs a le rappel comme rappel de donnéesmais cela semble fonctionner aussi.
Maintenant, pour configurer la fonction de rappel.
- Créez une nouvelle balise HTML personnalisée (ou utilisez une seule balise pour tous vos rappels sociaux)
- Donnez-lui un nom (ex. Google Plus 1)
- Ajoutez le code suivant :
<script> function sendPlus(g) { dataLayer.push({ 'event': 'socialInt', 'socialNetwork': 'Google', 'socialAction': '+1', 'socialTarget': g.href }); }; </script>- Mettre le feu sur toutes les pages ({{url}} correspond à RegEx .*)
- Enregistrer la balise
C’est fondamentalement la même chose qu’avec Facebook.
Cette fonction de rappel détourne le clic sur le bouton +1 et envoie les éléments nécessaires à la couche de données avant de rendre le contrôle à la page.
Configurer des tweets
Pour configurer une fonction de rappel de Tweet, vous devrez utiliser événements d’intention Web. Ils ajoutent des fonctionnalités JavaScript supplémentaires (telles que la possibilité de déclarer une fonction de rappel) à votre bouton Tweet.
Initialisez les widgets Twitter avec le code suivant dans votre élément HEAD :
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="https://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")); Vous n’avez pas à apporter de modifications au code de votre bouton Tweet (à condition qu’il ne soit pas implémenté via une API tierce, telle que AddThis.
Dans votre balise HTML personnalisée de partage sur les réseaux sociaux, ajoutez le code suivant :
if (typeof twttr !== 'undefined') { twttr.ready(function (twttr) { twttr.events.bind('click', clickEventToAnalytics); }); } function clickEventToAnalytics() { dataLayer.push({ 'event': 'socialInt', 'socialNetwork': 'Twitter', 'socialAction': 'tweet', 'socialTarget': window.location.href }); } Ici, vous liez l’événement CLICK à la fonction clickEventToAnalytics. Il y a un tas d’événements différents à votre disposition, et vous pouvez les trouver dans le documentation des développeurs.
Notez comment j’utilise la variable JavaScript globale window.location.href comme cible cette fois.
Configurer Pinterest Pin It
Pinterest est un peu problématique, car lorsque vous chargez le script pinit.js, il remplace tout code que vous avez pu utiliser dans les balises de lien. Ceci est problématique car Pinterest ne fournit aucune fonction de rappel, de sorte que la poussée de partage social devrait être ajoutée directement au code du lien. Avec pinit.js, toutes les modifications que vous faites sont effacées lors du chargement de la page.
Cependant, vous pouvez suivre vos épingles à l’aide du suivi automatique des événements. Avec un Link Click Listener en place, créez une balise HTML personnalisée avec le contenu suivant :
<script> dataLayer.push({'event': 'socialInt', 'socialNetwork': 'Pinterest', 'socialAction': 'Pin It', 'socialTarget': window.location.href}); </script>La règle de tir pour cela est la suivante :
{{event}} est égal à gtm.linkClick
{{classes d’éléments}} contient pin_it_button
Ainsi, une fois que le bouton Pin It est cliqué (le lien a “pin_it_button” dans sa longue liste de noms de classe), cette balise HTML personnalisée pousse l’événement dans la couche de données, après quoi votre balise d’événement de partage social est déclenchée.
Mise en œuvre des tests
Vous avez donc maintenant vos fonctions de rappel qui fournissent les données, les macros qui stockent les données et la balise Universal Analytics qui envoie les données. Magnifique!
Enregistrez votre version de conteneur et publiez-la.
Allez maintenant sur une page de votre site où se trouvent les boutons. Utilisez un débogueur comme Firebug ou les outils de développement de Chrome et chargez la page. Faites attention au Réseau onglet dans votre débogueur, et cliquez sur J’aime ou +1. Vous devriez voir quelque chose se produire, à savoir une requête GET à www.google-analytics.com. Consultez les en-têtes de cette requête et vous devriez voir quelque chose comme ceci :
Ici vous pouvez voir les paramètres de la requête.
sa est l’action sociale (J’aime)
sn est un réseau social (Facebook)
St est Social Target (URL de la page)
Bien sûr, n’oubliez pas de vérifier Google Analytics lui-même (l’affichage des données peut prendre un certain temps).
