5e épisode de notre série de trucs & astuces Google Analytics, avec une traduction et un enrichissement d’une méthode inventée par Brian Clifton, l’auteur du très complet Advanced Web Metrics with Google Analytics, principalement consacré à l’utilisation de Google Analytics.

Comment mesurer le remplissage ou la complétion d’un formulaire avec Google Analytics ?

L’astuce consiste à générer une page vue virtuelle lors de la perte du focus (sortie) d’un des champs du formulaire préalablement rempli par l’internaute.

On peut alors connaître le nombre de consultations uniques, le nombre de vues de cette page et ainsi en déduire le sens de lecture du formulaire et les champs sources d’erreur pour les internautes.

Comment arriver à ces analyses ?

Une consultation unique d’une des pages virtuelles équivaut en faite à une visite unique d’un champ avec complétion. Cela signifie qu’un internaute modifiant une ou plusieurs fois un même champ ne générera qu’une consultation unique de la page virtuelle.

Une vue d’une des pages virtuelles équivaut à une visite d’un champ avec complétion ou déjà complété. Dans ce cas là, à chaque visite du champ par l’internaute, que ce soit pour le compléter ou pour le modifier, le nombre de vue sera incrémenté.

Ainsi, un internaute modifiant une fois son adresse email après l’avoir complété générera une consultation unique mais deux vues de la page virtuelle correspondant au champ email.

Pour en savoir plus sur les pages vues virtuelles et leur création, vous pouvez lire notre dernière astuce Google Analytics.

Prenons l’exemple du tracking de ce formulaire :

Vous allez devoir ajouter un événement sur chacun des champs de ce formulaire. Les événements s’ajoutent aux champs comme des paramètres et disposent de différents déclencheurs.

Dans le cas des champs de type texte, nous allons utiliser le déclencheur « onBlur»  qui a la propriété de se déclencher uniquement lorsque l’internaute sort du champ en cours pour, par exemple, aller au champ suivant.

Avant de déclencher l’événement, il va falloir vérifier si le champ n’est pas vide pour ne pas générer de pages vues virtuelles inutilement.

Voici comment tester si le champ d’un formulaire n’est pas vide :

Le code du champ confirmation de l’email devra, au final, ressembler à celui-là :

On pourra alors savoir le nombre de vues et le nombre de consultations uniques de ce champ.

Qu’en est-il des champs autres que les champs textes ?

Les autres types de champs les plus courants sont :

- Les boutons radios
- Les cases à cocher
- Les listes déroulantes
- Les textarea

Le manière de tracker les champs de type textarea est la même que pour les champs de type « text» .

Pour les boutons radios et les listes déroulantes, il suffit de passer le déclencheur de l’événement de « onBlur»  à « onChange» . L’événement associé à un déclencheur de type onChange ne s’exécutera que lorsqu’il y a un changement de choix de l’internaute.

Voici un exemple de code de boutons radios trackés :

Lorsque l’internaute changera d’avis, pour la réception de son catalogue dans notre exemple, on générera une page vue virtuelle s’il passe du choix « oui»  à « non»  et une page vue virtuelle différente s’il passe de « non»  à « oui» . Notez qu’il n’y a pas besoin de tester si le champ est vide ou non puisque le choix « oui»  est cochée par défaut et qu’on ne peut pas décocher un bouton radio.

Maintenant, un exemple de liste déroulante trackée :

Ici dès que l’internaute passera du choix France sélectionné par défaut au choix d’un autre pays, une page vue sera générée.

Pour les cases à cocher, c’est un peu plus difficile car il faut générer une page vue différente si la case est déjà cochée ou non afin de savoir le nombre de visiteur ayant coché puis décoché la case. Pour cela, on utilise le déclencheur onClick et on réalise un test avant de déclencher l’événement. On n’utilise plus le déclencheur onChange, car, avec ce dernier, on ne peut pas savoir le statut initial pré-click du champ vu que les cases à cocher peuvent être décochées et offrent, en général, un choix multiple à la différence des boutons radios.

Il ne reste plus qu’à adapter et copier ces codes pour l’ensemble des autres champs du formulaire.

Voici un exemple de graphique qui pourrait être créé à partir des données de Google Analytics pour le champ de confirmation de l’email :

On remarque que le nombre de vue est plus élevé que le nombre de consultation unique ce qui est généralement le cas. En effet, il est rare, que sur l’ensemble des internautes qui arrivent sur la page d’un formulaire, aucun ne revienne sur un des champs qu’il a complété.

On peut déduire de ces données, hors comportement atypique, que 26% des internautes renseignent un email non valide et le modifient.

Grâce aux données récupérées via les autres champs, on peut connaître aussi le sens de lecture du formulaire.
Il suffit d’analyser les pages antérieures et postérieures à chacune des pages virtuelles associées à un champ pour savoir le champ rempli avant et après.

Cela peut nous donner, dans notre exemple, ce genre de comportement :

Enfin, grâce au nombre d’entrées sur la page du formulaire et au nombre d’arrivées sur la page de confirmation de saisie, on peut connaître le taux de conversion du formulaire.

Pourquoi on utiliserait pas le suivi d’événement, défini comme plus efficient que la génération de pages vues virtuelles dans l’astuce précédente ?

Nous avons vu que les pages virtuelles avaient, malgré tout, un avantage comparé aux événements qui est qu’elles sont considérées comme des pages normales.

On a donc accès à toutes les possibilités offertes aux pages comme le temps passé par page donc ici le temps passé pour la complétion de chaque champ et à la définition d’un d’entonnoir de conversion avec l’ensemble des pages virtuelles du formulaire et comme objectif, la page de confirmation.

Le choix de la méthode reste, au final, entre vos mains et dépend bien sûr encore et toujours, de vos besoins !

L’interactivité croissante des sites Internet améliore l’expérience des internautes mais complique la vie des analystes web. Grâce, notamment, à l’arrivée de technologie comme l’Ajax ou le Flex, on ne peut plus se limiter simplement à comptabiliser les pages vues, sans quoi, on perdrait une grande partie des interactions entre l’internaute et le site internet. Les outils de mesure d’audience ont évolué avec l’arrivée de ces technologies alors pourquoi se priver de tracker toutes ces nouvelles interactions ?

C’est l’objet de cette 5ème astuce de notre série sur Google Analytics où nous allons apprendre à mesurer les actions d’un visiteur au sein d’une page, et notamment à utiliser le suivi d’événements de Google Analytics, arrivé avec la nouvelle version du code de suivi ga.js.

Il existe en effet deux possibilités sur Google Analytics pour tracker les actions d’un visiteur au sein d’une page :

Première possibilité : la génération d’une page vue virtuelle (trackPageview)

Seconde possibilité : la génération d’un événement (trackEvent)

1. La génération d’une page vue virtuelle

La génération d’une page vue virtuelle est la méthode historique pour tracker les clics ou actions au sein d’une page (utilisation de la fonction trackPageview accompagnée d’un libellé spécifique). Les pages vues, qu’elles soient réelles ou virtuelles ont l’avantage de pouvoir être définies comme objectif dans GA. Cependant le nombre de pages vues totales de votre site ne sera plus votre nombre de pages vues réelles mais votre nombre de pages vues réelles et virtuelles. L’autre inconvénient est qu’on peut difficilement accéder aux statistiques des pages vues virtuelles (il faut passer par la catégorie « Contenu»  puis « Page les plus consultées»  et enfin « Recherche» ). Il est aussi impossible de les regrouper par catégorie autrement qu’en utilisant une nomenclature propre. Si vous avez tout de même besoin d’utiliser cette solution, veillez à nommer explicitement vos noms de pages vues virtuelles en ajoutant toujours un préfixe tel que « /virtuelle/nomDeVotrePage»  de façon à pouvoir les décompter de votre nombre de pages vues totales (via un segment avancé) par la suite.

Prenons un cas concret où l’on souhaite tracker les clics sur les visuels d’un carrousel afin de savoir qu’elles sont ceux les plus populaires.

Voici un exemple de génération d’une page vue virtuelle qu’on aurait pu utiliser dans ce cas :

2. La génération d’un événement

Passons maintenant en revue la seconde méthode, basée sur un modèle orienté objet, qui est la génération d’un événement. Son principal avantage est qu’elle permet de catégoriser les événements suivant quatre paramètres :

• La catégorie (requis) : le nom du groupe d’événement à tracker (vidéos, carrousel…)
• L’action (requis) : Le type d’interaction entre l’internaute et le site internet (clic, téléchargement…)
• Le label (optionnel) : Le nom de l’élément sur lequel porte l’interaction (visuel1, visuel2 etc.)
• La valeur (optionnel) : Une donnée numérique associée à l’interaction que l’on souhaite faire remonter (nous n’allons pas l’utiliser ici)

Notez bien que les noms de ces paramètres sont là à titre indicatif et qu’on peut les adapter à nos besoins.

Son second avantage est que la comptabilisation des événements ne viendra pas s’ajouter à votre nombre de pages vues.

De plus, le suivi des événements dispose d’un espace dédié dans l’interface de Google Analytics que vous trouverez dans la catégorie « Contenu»  puis « Suivi des événements» .

Voici un exemple de génération d’événement, toujours dans le cas du tracking d’un carrousel :

On voit aisément la différence avec la génération d’une page vue virtuelle…

Avec cette méthode on pourra retrouver tous nos carrousels dans la catégorie « Carrousel» , puis sélectionner notre carrousel « pagePresentationOffre»  et enfin pouvoir comparer les performances de tous les visuels de ce carrousel en un coup d’œil. Le seul inconvénient de cette méthode est qu’on ne peut pas définir un événement en tant qu’objectif…

Cette méthode permet facilement de déterminer des profils d’utilisateurs se comportant de telle ou telle manière sur le site lorsqu’ils accomplissent tel ou tel événement.
Par exemple, nous avons implémenté le suivi d’événement sur le site support de notre livre Web conversion afin de tracker les clics sortants vers les distributeurs de notre ouvrage. On remarque qu’Amazon, bien qu’incitant plus de monde à cliquer, attire des visiteurs qui sont statistiquement resté moins longtemps sur notre site que ceux qui ont cliqué sur Fnac ou Dunod !

Attention : que ce soit pour l’une ou l’autre méthode, le code de suivi Google Analytics doit toujours être positionné avant la génération d’une page vue virtuelle ou d’un événement. Veillez aussi à ce que les noms de vos paramètres soient les plus explicites possibles, le reporting et l’analyse n’en seront que plus rapides !

N’hésitez pas à réagir, je serai ravi de vous répondre.