Comment traquer le comportement de l’utilisateur avec les événements Google Analytics

() translation by (you can also view the original English article)

Pour faire court ; vous venez juste de refondre votre site Internet, et vous avez fait usage de toutes les pratiques exemplaires, dont vous êtes au courant. Le site web se charge rapidement, et il a l'air beaucoup plus agréable avec la nouvelle interface.

Mais avez-vous pensé à comment mesurer votre nouveau design ? Comment saurez-vous si le nouveau popup que vous venez d’ajouter génère de la conversion, ou nuit à l’expérience ? Combien de fois le popup s’est-il affiché et combien de personnes l’ont abandonné ? Combien d’utilisateurs naviguent sur le site à partir du menu off-canvas que vous venez aussi d’ajouter ? Combien de personnes ont vu le diaporama sur la page d’accueil au-delà de la première diapositive ? Les questions sont nombreuses et variées.

Dans ce tutoriel, je vais vous montrer comment tirer parti de Google Analytics Event Tracking API (quel long nom !) pour trouver les réponses.

Pour commencer

Si vous n’êtes pas déjà un utilisateur de Google Analytics, créez un compte et suivez les instructions d’onboarding pour générer un script de suivi pour votre site Web. En général, on vous donne un extrait de code qui ressemblera à l’exemple ci-dessous avec UA-XXXXXX-X étant l’ID de suivi unique de votre site Web.

(function(i, s, o, g, r, a, m) {
  i['GoogleAnalyticsObject'] = r;
	i[r] = i[r] || function() {
		(i[r].q = i[r].q || []).push(arguments)
	}, i[r].l = 1 * new Date();
	a = s.createElement(o),
	m = s.getElementsByTagName(o)[0];
	a.async = true;
	a.src = g;
	m.parentNode.insertBefore(a, m);
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga( 'create', 'UA-XXXXXX-X', 'auto' );
ga( 'send', 'pageview' );

Pour cet exercice, vous aurez également besoin d’installer une extension Chrome, Google Analytics Debugger, pour déboguer les scripts Google Analytics sur notre site plus tard.

Une fois que nous avons configuré tout cela, nous pouvons commencer notre premier exemple.

Traquer un clic

Imaginez que nous avons deux boutons (ou des liens stylés comme des boutons). Nous ajoutons l’un au-dessus du pli dans notre région que l'on appelle « hero » et un second bouton juste avant le pied de page. Comme vous pouvez le voir ci-dessous, chaque bouton pointe sur la même page, a diverses classes de style et un ID unique. Dans ce cas, nous pouvons utiliser le « Event Tracking API » pour savoir quel bouton reçoit plus de clics.

<!-- The buy now button that appear above the fold -->
<a href="./purchase.html" class="btn btn--buy-now" id="buy-now-above">Buy Now</a>

<!-- The buy now button that appear below the fold -->
<a href="./purchase.html" class="btn btn--buy-now" id="buy-now-below">Buy Now</a>

Utiliser l'Events Tracking est relativement facile, car cela ne nécessite strictement pas les conventions en termes de définition de l'événement. Tout d’abord, nous avons besoin de lier les boutons à l’événement click.

var buttons = document.querySelectorAll('.btn');
buttons.forEach( function( btn ) {
   btn.addEventListener('click', function(event) {

   });
} );

Ensuite nous ajoutons ga() qui est une fonction exposée par les scripts de Google Analytics que nous avons ajoutés précédemment, et qui est la même fonction que nous utilisons pour enregistrer une « vue de page ». De même, nous traquons un événement à l’aide de la commande send avec event défini comme argument hitType ainsi qu’un certain nombre de paramètres requis, à savoir :

eventAction : spécifie l’interaction de l’utilisateur ou de l'état de l’interface utilisateur par exemple click, play, pause, etc..
eventCategory : spécifie l’objet pour suivre par exemple des Videos, Buttons, Pop-ups, etc.
eventLabel : un label unique ou ID de l’événement. Nous ajoutons cette variable pour catégoriser de multiples instances du même Object.

Comme mentionné, Google ne fixe pas de règles strictes ; vous pouvez les appliquer de la manière qui vous semble la meilleure sur votre site Internet. Dans notre cas, nous avons réglé ces variables comme suit :

var buttons = document.querySelectorAll('.btn');
buttons.forEach( function( btn ) {
   btn.addEventListener('click', function(event) {
      ga('send', 'event', {
         eventAction: 'click',
         eventCategory: 'Buy Now Buttons',
         eventLabel: event.target.id // buy-now-above || buy-now-below
      });
   });
} );

Avec l’extension Google Analytics Debugger active, nous pouvons cliquer sur un de nos boutons et examiner la DevTools Console pour voir si le traqueur fonctionne :

Google Analytics Log in DevTools Console — Le traqueur envoie des données à Google Analytics

Et une fois que Google Analytics a reçu les données, il sera enregistré sous Temps réel > Événements et Comportement > Événements.

Event Record in Google Analytics — Sur cette capture d’écran, nous trouvons que notre bouton « Buy Now » en-dessous du pli reçoit plus clics que celui au-dessus.

Traquer un carrousel

Notre deuxième exemple impliquera un diaporama, ou carrousel. Vous ferez probablement face à des arguments pour et contre l’utilisation des carrousels sur des sites Web ; « les gens en fait, n'interagissent pas avec carrousels » ou « les gens interagissent seulement avec la première diapositive ». Mais ces arguments s’appliquent-ils à votre site web ? Sans données adéquates, il est difficile de le dire.

Nous allons intégrer Google Analytics Events dans notre carrousel, que nous avons construit à l’aide de Slick.js. Ce plugin jQuery offre une poignée d'événements jQuery personnalisés qui sont juste ce qu’il faut exécuter Google Analytics Event Tracking. S’il vous plaît jetez un oeil sur la documentation Slick pour plus de détails sur la façon de construire le carrousel.

Notre carrousel est simplifié pour les besoins de la démo.

Notre carrousel est composé de cinq diapositives. De la même manière que pour notre premier exemple, nous avons également ajouté un ID unique pour chacune des diapositives (p. ex. slide-1, slide-2, slide-3, etc.) que nous passerons dans le paramètre eventLabel. Le but ici est de savoir :

Si les utilisateurs voient le carrousel au-delà de la première diapositive
et de recueillir le nombre de vues pour chaque diapositive.

Pour ce faire, nous pouvons utiliser les événements swipe et afterChange de Slick.js.

Swipe

L’événement swipe, comme son nom l’indique, se déclenche lorsque l’utilisateur navigue dans le carrousel en utilisant le geste de balayage. Dans ce cas, nous avons appliqué le paramètre eventAction à swipe.

$('.carousel').on('swipe', function(event, slick, direction) {
   ga('send', 'event', {
      eventCategory: 'Carousel',
      eventAction: 'swipe',
      eventLabel: $( this ).find( '.slick-active' ).attr('id') // slide-1, slide-2, slide-3, etc.
   });
});

afterChanges

Le afterChanges est l’événement déclenché quand la diapositive est changée ; en d’autres termes, lorsque l’utilisateur affiche la diapositive suivante ou précédente dans le carrousel. Dans ce cas, nous avons réglé l’eventAction sur view pour la « nouvelle vue de diapositive ».

$('.carousel').on('afterChange', function(event, slick, direction) {
   ga('send', 'event', {
      eventCategory: 'Carousel',
      eventAction: 'view',
      eventLabel: $( this ).find( '.slick-active' ).attr('id') // slide-1, slide-2, slide-3, etc.
   });
});

Une fois que Google Analytics a recueilli les données, nous allons bientôt découvrir combien d’utilisateurs interagissent avec notre carrousel, le nombre de vues que chaque diapositive reçoit, et combien d’utilisateurs utilisent un geste de balayage sur le carrousel.

Comme nous pouvons le voir ci-dessus, notre carrousel reçoit un total de 19 vues, 14 d'entre elles se font par le geste de balayage.

Quoi ensuite ?

Nous venons de voir deux exemples d’intégration de Google Analytics Events Tracking dans notre page web pour la collecte de données sur l’interaction utilisateur. Ces chiffres nous donnent une solide référence pour juger si le nouveau design performe mieux que l’ancien, au bout du compte ils nous aident à améliorer l'UX pour notre site Web.

Je vous encourage à consulter les docs pour améliorer davantage votre utilisation de Google Analytics Events Tracking API.