Comment suivre le comportement des utilisateurs avec les événements Google Analytics

Longue histoire courte; vous venez de repenser votre site Web et vous avez utilisé toutes les meilleures pratiques que vous connaissez. Le site Web se charge rapidement, et la nouvelle interface a assurément une apparence bien meilleure.

Mais avez-vous envisagé comment mesure votre nouveau design? Comment saurez-vous si la nouvelle fenêtre contextuelle que vous venez d'ajouter a conduit à la conversion ou nuit à l'expérience? Quelle est la fréquence d'affichage du popup et combien de personnes l'abandonnent? Combien d'utilisateurs naviguent sur le site à partir du menu hors-toile que vous venez également d'ajouter? Combien de personnes voient le curseur de l'image 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 utiliser l'API de suivi des événements de Google Analytics (quel nom long!) Pour trouver les réponses..

Commencer

Si vous n'êtes pas encore un utilisateur de Google Analytics, créez un compte et suivez les instructions d'intégration pour générer un script de suivi pour votre site Web. En règle générale, l'extrait de code qui vous est donné ressemblera à l'exemple ci-dessous avec le UA-XXXXXX-X être l'ID de suivi unique de votre site Web.

(fonction (i, s, o, g, r, a, m) i ['GoogleAnalyticsObject'] = r; i [r] = i [r] || fonction () (i [r] .q = i [r] .q || []). push (arguments), i [r] .l = 1 * nouvelle Date (); a = s.createElement (o), m = s.getElementsByTagName (o) [ 0]; a.async = true; a.src = g; m.parentNode.insertBefore (a, m);) (fenêtre, document, 'script', 'http://www.google-analytics.com/ analytics.js ',' ga '); ga ('créer', 'UA-XXXXXX-X', 'auto'); ga ('envoyer', 'pageview'); 

Pour cet exercice, vous devrez également installer une extension Chrome, le débogueur Google Analytics, pour déboguer ultérieurement les scripts Google Analytics sur notre site..

Le débogueur Google Chrome est activé

Une fois que ceux-ci sont installés, nous pouvons commencer par notre premier exemple..

Suivi d'un clic

Imaginez que nous ayons quelques boutons (ou des liens d'ancrage conçus comme des boutons). Nous ajoutons le premier au-dessus du pli dans notre zone dite «héros» et un second bouton juste avant le pied de page. Comme vous pouvez le voir ci-dessous, chaque bouton pointe vers la même page, possède différentes classes de style et un identifiant unique. Dans ce cas, nous pouvons utiliser «l'API de suivi des événements» pour savoir quel bouton reçoit le plus de clics..

 Acheter maintenant  Acheter maintenant

L'utilisation du suivi des événements est relativement facile, car elle n'exige pas de convention en termes de définition de l'événement. Nous devons d’abord lier les boutons au Cliquez sur un événement.

var buttons = document.querySelectorAll ('. btn'); buttons.forEach (function (btn) btn.addEventListener ('clic', fonction (événement) ););

Puis on ajoute Géorgie() qui est une fonction exposée dans les scripts Google Analytics que nous avons ajoutés précédemment et qui est la même fonction que nous utilisons pour enregistrer une "pageview". De même, nous suivons un événement en utilisant le envoyer commande avec un événement définir comme hitType argument avec un certain nombre de paramètres requis, à savoir:

• eventAction: spécifie l'interaction utilisateur ou l'état de l'interface utilisateur, par exemple. Cliquez sur, jouer, pause, etc.
• eventCategory: spécifie l'objet à suivre, par exemple. Vidéos, Boutons, Pop-ups, etc.
• eventLabel: une étiquette ou un identifiant unique de l'événement. Nous ajoutons cette variable pour classer plusieurs instances du même objet..

Comme mentionné, Google ne définit pas de règles strictes. vous pouvez les appliquer comme bon vous semble sur votre site Web. Dans notre cas, nous définissons ces variables comme suit:

var buttons = document.querySelectorAll ('. btn'); buttons.forEach (function (btn) btn.addEventListener ('click', fonction (event) ga ('send', 'event', eventAction: 'click', eventCatégorie: 'boutons d'achat', eventLabel: event .target.id // buy-now-above || buy-now-below);););

L'extension Google Analytics Debugger étant active, nous pouvons cliquer sur l'un de nos boutons et examiner la console DevTools pour voir si le suivi fonctionne:

Le suivi envoie des données à Google Analytics

Et une fois que Google Analytics aura reçu les données, elles seront enregistrées sous le Temps réel> Événements et Comportement> Événements.

Sur cette capture d'écran, nous constatons que notre bouton "Acheter maintenant" situé en dessous du pli reçoit plus de clics que celui ci-dessus..

Suivi d'un carrousel

Notre deuxième exemple impliquera un curseur d'image, ou carrousel. Vous aurez probablement rencontré des arguments pour et contre l’utilisation de carrousels sur des sites Web; «Les gens n'interagissent pas réellement avec les carrousels» ou «les gens n'interagissent qu'avec la première diapositive». Mais ces arguments s'appliquent-ils à votre site Web? Sans données appropriées, il est difficile de dire.

Intégrons Google Analytics Events à notre carrousel, que nous avons construit à l'aide de Slick.js. Ce plugin jQuery fournit une poignée d’événements jQuery personnalisés, ce qui est exactement ce dont nous avons besoin pour exécuter le suivi des événements Google Analytics. Veuillez vous reporter à la documentation Slick pour plus de détails sur la construction du carrousel..

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

Notre carrousel est composé de cinq diapositives. Comme pour notre premier exemple, nous avons également ajouté un identifiant unique pour chacune des diapositives (par exemple,. slide-1, diapositive 2, diapositive 3, etc.) que nous passerons dans le eventLabel paramètre. Le but ici est de découvrir:

1. si les utilisateurs voient le carrousel au-delà de la première diapositive 
2. et pour collecter le nombre de vues pour chaque diapositive. 

Pour ce faire, nous pouvons utiliser les événements Slick.js glisser et après le changement.

Glisser

le glisser Comme son nom l'indique, l'événement est déclenché lorsque l'utilisateur navigue dans le carrousel à l'aide du geste de balayage. Dans ce cas, nous définissons la eventAction paramètre à glisser ainsi que.

$ ('carrousel'). on ('swipe', fonction (événement, nappe, direction) ga ('send', 'event', eventCategory: 'Carousel', eventAction: 'swipe', eventLabel: $ ( ceci) .find ('.slick-active') .attr ('id') // diapositive 1, diapositive 2, diapositive 3, etc.););

après les changements

le après les changements est l'événement déclenché lorsque la diapositive est modifiée; autrement dit, lorsque l'utilisateur visualise la diapositive suivante ou précédente dans le carrousel. Dans ce cas, nous définissons la eventAction à vue pour “nouvelle vue de diapositive”.

$ ('carrousel'). on ('afterChange', fonction (événement, nappe, direction) ga ('send', 'event', eventCategory: 'Carousel', eventAction: 'view', eventLabel: $ ( ceci) .find ('.slick-active') .attr ('id') // diapositive 1, diapositive 2, diapositive 3, etc.););

Une fois les données collectées par Google Analytics, nous saurons bientôt combien d'utilisateurs interagissent avec notre carrousel, le nombre de vues reçues par chaque diapositive et combien d'utilisateurs utilisent un geste de balayage pour utiliser le carrousel..

Comme nous pouvons le voir ci-dessus, notre carrousel a reçu un total de 19 vues, dont 14 sont exécutées par le geste de balayage..

Et après?

Nous venons de voir deux exemples d'intégration de Google Analytics Events Tracking dans notre page Web afin de collecter des données d'interaction utilisateur. Ces chiffres nous donnent une solide référence pour déterminer si le nouveau design est plus performant que l'ancien, nous aidant ainsi à améliorer l'expérience utilisateur pour notre site Web..

Je vous encourage à consulter la documentation pour approfondir votre utilisation de l'API Google Analytics Events Tracking..

Ressources supplémentaires

• API Google Analytics Events Tracking
• Démystifier Google Analytics sur les Tuts+
• Exploration de l'utilisation du carrousel sur les sites Web de commerce électronique mobiles