Le Blog des consultants Converteo
Ce blog est alimenté par les consultants de Converteo. Découvrez aussi notre site pour plus d’informations sur le cabinet et ses prestations.

Retour aux articles du blog

Google Analytics : Tagger le remplissage d'un formulaire (Astuce N°6)

Posté dans Web analytics
Par Raphaël Fétique
11 septembre 2009
14 commentaires

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 :

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 :

if (document.leNomDeVotreFormulaire.leNomDeElement.value != '') Instruction

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 :


Oui
Non

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.

M'abonner à la newsletter
Recevoir les informations commerciales des sociétés partenaires

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 :
champ-conf-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 :
cpt-formulaire

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 !

14 commentaires sur cet article

  • Julien Coquet
    11 septembre 2009

    Bien l’adaptation de Brian Clifton, Brice 😉

    seul petit hic dans cette histoire: les internautes ne remplissent pas leurs formulaires de manière linéaire (demande à n’importe quel cabinet d’ergonomie).

    Résultat, si l’internaute remplit bien le formulaire en commençant par le champ 1 puis passe directement au champ 3 puis revient sur le champ 2 pour s’y retrouver bloqué(e), on ne saura pas pour autant quel champ a fait capoter le processus.

    En effet, le manque de linéarité et d’analyse du cheminement dans les évènements GA fait qu’on leur préférera les pages vues virtuelles qui elles ont un chemin de navigation – et c’est ici leur gros avantage!

    Pour autant, on n’est pas plus tirés d’affaires, même en considérant l’impact des pages vues uniques par rapport aux pages vues totales pour un champ donné.

    Solution(s)?

    – Regardez plutôt le nombre de clics que recevrait une petite icône (?) à coté de chaque champ pour voir quels champs posent le plus de problèmes.
    – Proposez un libellé bien explicatif à côté de chaque champ

    et surtout…
    – Réduisez le nombre de champ de votre formulaire au strict minimum, vous n’êtes pas la sécurité sociale! 😉 Si les gens aiment votre site, vous aurez toujours moyen de leur demander plus d’infos plus tard. Evidemment si vous êtes un site e-commerce, vous avez besoin de savoir où votre internaute habite ^_^;

    Encore une tartine, désolé, hein? 😉

    Amicalement,

    Julien Coquet

  • Brice Bottegal
    14 septembre 2009

    L’idée du tracking du clic sur le (?) est intéressante en complément de celui sur les champs du formulaire.

    C’est vrai que le principal avantage des pages vues virtuelles sur les événements est qu’elles ont un chemin de navigation.

    On est d’accord aussi que, dans un formulaire, seulement les champs ayant un impact business devraient être présents et leur libellé devrait toujours être le plus explicite possible. Cela facilite, de plus, grandement l’analyse des comportements en aval.

    Ensuite, sur le problème des complétions non linéaires, si c’est un cas isolé, on ne va pas en tenir compte par contre si un cheminement anormal est partagé par un grand nombre d’internaute, on va l’analyser en se mettant à la place d’un visiteur et essayer de le résoudre.

    Bien sûr, il n’existe pas, à ma connaissance, une méthode miracle qui résout tous les problèmes. D’autant plus que certains sont impossibles à résoudre (des facteurs extérieurs intervenant) et que la résolution d’autre prendrait trop de temps comparée à la valeur ajouté apportée.

    Merci pout ta tartine 😉

    Amicalement,

    Brice

  • Thomas Faivre-Duboz
    14 septembre 2009

    « Réduisez le nombre de champ de votre formulaire au strict minimum, vous n’êtes pas la sécurité sociale! »

    Bonjour Julien

    Attention aux affirmations péremptoires… Il est arrivé chez certains de nos clients d’obtenir de meilleurs taux de conversion avec des formulaires contenant plus de champs, parce que certains actes impliquants supposent que l’on demande un minimum d’informations : parfois l’utilisateur ne comprend pas comment on peut résoudre son problème en demandant trop peu d’informations !

  • Julien Coquet
    14 septembre 2009

    bonjour Thomas et Brice,

    ok pour le péremptoire mais il faut l’être un peu dans notre profession 😉

    Pour autant, vous conviendrez que l’acceptation d’un nombre élevé de champs dans un formulaire va de paire avec la motivation de l’internaute à convertir.

    C’est surtout le cas dans le cadre d’achats très réfléchis (voiture, assurance, maison) ou de conversions de niche.

  • Engago Team
    24 septembre 2009

    Génial GA
    Mais moins de champs à remplir est égale à plus de chance que le visiteur complète le formulaire.

    Actuellement on emploie même un formulaire sans controle de champs: mieux de recevoir quelque chose que rien du tout.

  • Sylvain
    29 mars 2010

    Bonjour,
    Comment tracker le clic sur le bouton « validation » du formulaire et générer une page virtuelle de remerciement et non pas un évènement qui ne pourra pas être défini comme objectif de conversion ?
    Est-ce que si je procède de la sorte, c’est OK ?

    Merci pour votre aide.
    Sylvain

  • Sylvain
    29 mars 2010

    Mon code a été écrasé… 🙁
    Comment je peux vous le transmettre ?
    [code]
    //
    [/code]

  • Thomas Faivre-Duboz
    29 mars 2010

    Bonjour Sylvain,

    Il faut appeler le pagetracker._trackpageview au moment ou le formulaire est validé. Vous pouvez m’envoyer votre code à l’adresse tfd (at) converteo (point) com

  • Sylvain
    29 mars 2010

    Merci Thomas. C’est ce que j’avais prévu de faire.
    Je vous envoie mon code par email.

  • Ababacar
    05 août 2010

    Bonjour,
    C’est dommage! je pensais trouver la solution au bas de cette page. Avez -vous finalement réussi à appliquer le code de tracking sur un bouton de validation d’un formulaire ? Je pense que cela peut intéresser beaucoup de monde. Merci de votre aide!

  • Thomas Faivre-Duboz
    05 août 2010

    Bonjour,

    Je ne comprends pas votre question. Nous avons bien sûr réussi à tracker des boutons de validation de formulaire. La méthode dépend du formulaire et de comment il est conçu (scripts de checks avant submit, …).

    Cdt,

  • Benoit Frulot
    20 octobre 2012

    Voici une solution Track Optin(www.trackoptin.com) qui permet de tagguer les formulaires et de constituer un reporting pour les impressions et validation et spécialement pour les critères segmentables, c’est une solution de reporting analytics permettant de projeter l’évolution de chaque critères en graphes d’évolution et répartition pour ces valeurs de modalités.

  • […] – Comment mesurer le remplissage de formulaire avec Analytics http://www.converteo.com/blog-conversion/web-analytics/… […]

Laisser un commentaire

Articles qui pourront vous intéresser
Contactez-nous
Pour obtenir plus d'informations sur nos activités et discuter de vos projets directement avec nos consultants, nous vous invitons à nous contacter.
Nous contacter
En parcourant converteo.com, vous acceptez notre utilisation des cookies.