(Mise à jour le 13 août 2017)

Il y a un peu plus d’un an, en avril 2014, j’ai écrit le post “Suivi avancé des formulaires dans Google Tag Manager”, et il est depuis en tête de ma liste des meilleures ventes. Il s’avère que de nombreuses personnes sont à juste titre passionnées par l’idée de rendre les formulaires Web sur leurs sites Web aussi fluides et intuitifs que possible, car un formulaire Web est souvent la seule chose qui se dresse entre un prospect et sa transformation en clientèle.

J’ai pensé qu’il était temps de mettre à jour l’article pour qu’il soit conforme à Google Tag Manager V2. Ce n’est pas une différence majeure, mais j’ai également remodelé une partie du JavaScript. De plus, j’ai rassemblé quelques nouvelles idées explorées dans d’autres articles, alors maintenant tout est regroupé de manière pratique dans ce gros article de blog.

Au cœur de cet article se trouve toujours la méthodologie de récupération des valeurs des champs de formulaire. Vous souhaitez peut-être envoyer une sélection effectuée par l’utilisateur à Google Analytics dans le but de segmenter les données, ou peut-être souhaitez-vous identifier les valeurs qui bloquent le plus souvent une conversion. Quoi qu’il en soit, souvenez-vous de ceci : Google Analytics est très sévère envers IIP (informations personnellement identifiables), et vous devez être très vigilant pour assainir toutes les valeurs que vous collectez. Vous ne voulez pas envoyer rien à Google Analytics qui peut être utilisé pour identifier la personne qui a rempli le formulaire. La valeur la plus typique est un adresse e-mailque vous devez catégoriquement éviter d’enregistrer.

Sans plus tarder, commençons. Tout d’abord, les bases…

1. Suivi des formulaires dans Google Tag Manager

Dans la nouvelle version (V2) de Google Tag Manager, le suivi des formulaires n’est plus isolé comme son propre type de balise “Form Listener”. Au lieu de cela, le suivi automatique des événements s’est déplacé vers les gestionnaires intégrés dans les déclencheurs que vous utilisez pour déclencher les balises.

Lorsque vous créez un Former Déclencheur, il s’activera sur toutes les pages où le Activez ce déclencheur lorsque… le réglage est valide. N’oubliez pas que vous ne voyez ce paramètre que si “Attendre les balises” ou “Vérifier la validation” est coché dans les paramètres du déclencheur.

Si le déclencheur est actif sur une page, il écoutera activement une soumission de formulaire. Les paramètres du déclencheur sont :

1. Attendre les balises – GTM va pause la soumission du formulaire tant que toutes les balises qui utilisent le déclencheur se sont déclenchées ou jusqu’à l’expiration du délai d’attente (2 000 millisecondes par défaut).

2. Vérifier la validation – Si cette case est cochée, GTM ne déclenchera pas le déclencheur si l’action par défaut du formulaire (soumettre et rediriger) est empêchée. Si elle n’est pas cochée, le déclencheur se déclenchera chaque fois qu’un submit événement est enregistré, que l’action par défaut soit empêchée ou non.

3. Activez ce déclencheur lorsque… – Comme mentionné ci-dessus, cette condition sert à établir sur quelles pages GTM doit écouter les soumissions de formulaires. Il n’y a vraiment aucune pénalité de performance à avoir l’écouteur actif sur toutes les pages, mais il y a des cas où Attendre les balises interfère avec d’autres JavaScript sur la page, vous voudrez peut-être n’activer l’écouteur que sur les pages sur lesquelles vous l’avez testé.

4. Lancez ce déclencheur lorsque… – Si vous sélectionnez “Certains formulaires” comme Ce déclencheur se déclenche sur paramètre, ces conditions qui régissent le moment où le déclencheur déclenche l’activation de toutes les balises attachées. Si vous n’avez qu’un seul formulaire sur le site Web, l’utilisation de “Tous les formulaires” ici est justifiée. Mais si vous voulez spécifier que vous ne voulez déclencher la balise que lorsqu’un formulaire avec id="contactForm" doit déclencher la balise, vous devez l’ajouter comme condition ici.

Si vous ne voyez pas de variables telles que “Form ID” ou “Form Classes” dans le menu déroulant Variables, vous devrez les activer, car ce sont des variables intégrées, introduites dans Google Tag Manager V2.

Cependant, il peut y avoir de nombreuses raisons pour lesquelles un déclencheur de formulaire correctement créé ne fonctionne pas. Alors, lisez la suite…

2. Pourquoi le déclencheur de formulaire ne fonctionne pas toujours

Pour que le déclencheur de formulaire fonctionne, le formulaire doit envoyer un formulaire valide événement de soumission qui aussi bulles jusqu’au nœud du document. Pour dégobbler degookifier cette affirmation, cela signifie que :

1. Le formulaire doit envoyer un submit événement de navigateur

2. Cet événement ne doit pas être empêché de se propager au document nœud

Ce sont les conditions. Ils semblent assez simples, mais vous pourriez être surpris du nombre de formulaires qui enfreignent l’un ou l’autre.

Le premier signifie simplement que GTM écoute une norme submit événement de navigateur, qui est le plus souvent envoyé lorsqu’un input ou alors button l’élément est cliqué, où le type d’élément est submit.

La seconde signifie que le submit doit être autorisé à grimper jusqu’au document nœud, où l’écouteur de GTM attend l’événement. Vous voyez, GTM utilise quelque chose appelé délégation événementielle pour écouter les soumissions de formulaire. C’est beaucoup plus économique que d’ajouter un écouteur à tous les formulaires de la page individuellement.

La première condition est le plus souvent violée lorsque le submit l’événement est annulé (voir ci-dessous) ou n’a jamais été envoyé en premier lieu. De nombreux formulaires envoient leurs données avec des requêtes personnalisées (par exemple $.ajax de jQuery ou l’API XMLHttpRequest), et celles-ci empêchent le submit événement de travail, car il est remplacé par un répartiteur personnalisé. Depuis le submit l’événement n’est jamais envoyé, Google Tag Manager n’enregistre jamais une soumission de formulaire.

La deuxième condition est violée lorsque la propagation de l’événement est arrêtée avec return false; dans un gestionnaire jQuery. Un autre moyen courant d’empêcher la propagation consiste à utiliser stopPropagation() au lieu de preventDefault() sur l’objet événement.

J’ai déjà écrit plusieurs fois sur ce phénomène :

• Pourquoi mes auditeurs GTM ne fonctionnent-ils pas ?

• #GTMTips : Résoudre les problèmes avec les auditeurs de GTM

La meilleure façon de résoudre le problème, cependant, est d’ouvrir une ligne de communication avec vos développeurs et de leur dire que GTM nécessite une norme submit événement de navigateur pour se propager jusqu’au document nœud au travail.

Si cela ne peut pas être fait, la meilleure chose à faire est de demander au développeur d’implémenter un dataLayer.push() dans la fonction de rappel qui est invoquée lors d’une soumission réussie. Le morceau de code pourrait être quelque chose comme :

function onFormSuccess(event) {   window.dataLayer = window.dataLayer || [];   window.dataLayer.push({     event: 'formSubmissionSuccess',     formId: 'contactForm'   });   // Rest of the success callback code } 

Cela pousserait formSubmissionSuccess dans le dataLayer comme la valeur de la event clé. Ensuite, vous pouvez créer un déclencheur d’événement personnalisé, qui attend un événement nommé formSubmissionSuccess. L’utilisation de ce déclencheur déclencherait alors une balise lorsque le formulaire est soumis avec succès.

Il existe d’autres solutions de contournement qui impliquent, par exemple, d’interroger la page jusqu’à ce qu’un message de remerciement soit identifié, ou peut-être d’utiliser un écouteur DOM personnalisé. Malheureusement, toutes les solutions de contournement sont beaucoup moins robustes que la fixation du formulaire pour respecter les exigences du déclencheur de formulaire de GTM ou la coutume dataLayer.push() méthode décrite ci-dessus.

3. Variables intégrées

Google Tag Manager introduit un certain nombre de variables intégrées que vous pouvez utiliser pour simplifier le suivi des formulaires. Assurez-vous que toutes les variables “Form” sont cochées avant de continuer.

• Élément de formulaire – renvoie un objet HTML qui contient l’élément de formulaire qui a été soumis. Vous pouvez utiliser cette variable pour approfondir les propriétés d’objet du formulaire lui-même.

• Classes de formulaire – renvoie une chaîne de valeurs dans le class attribut du formulaire soumis.

• ID de formulaire – renvoie une chaîne avec la valeur stockée dans le id attribut du formulaire soumis.

• Cible du formulaire – renvoie une chaîne avec la valeur stockée dans le target attribut du formulaire soumis.

• URL du formulaire – renvoie une chaîne avec la valeur stockée dans le action attribut du formulaire soumis.

• Texte du formulaire – renvoie l’intégralité texte contenu du formulaire qui a été soumis (PAS très utile).

La plupart des solutions suivantes reposent sur ces variables intégrées.

4. Remarque sur la portée

Toutes les variables décrites ci-dessous sont Variables JavaScript personnalisées. Ils sont tous limités, par défaut, au formulaire qui a été soumis avec {{Form Element}}.querySelector.... Si vous souhaitez accéder quelconque formulaire sur la page, soumis ou non, vous devez utiliser la syntaxe suivante :

var form = document.querySelector('#someform'); var field = form.querySelector... 

Gardez cela à l’esprit lorsque vous appliquez les solutions suivantes à votre propre plan de mesure.

5. Capturer la valeur du champ

Il s’agit d’une simple variable JavaScript personnalisée qui capture la valeur que l’utilisateur a saisie dans un champ de formulaire. Notez que les éléments tels que les cases à cocher, les boutons radio et les listes déroulantes fonctionnent un peu différemment, c’est pourquoi ils sont traités dans leurs propres chapitres.

Nom: {{Valeur du champ}}

function() {   var field = {{Form Element}}.querySelector('#inputFieldId');   return field ? field.value : undefined; } 

La description: Cette solution accède au value attribut du champ de formulaire avec ID inputFieldId, tant qu’il se trouve dans le formulaire soumis. Si aucun champ de ce type n’est trouvé, alors indéfini est retourné à la place. Rappelez-vous, faites ne pas collecter des informations personnellement identifiables !

6. Capturer la valeur du bouton radio sélectionné

Cette solution permet de capturer la valeur du bouton radio coché. La solution par défaut est de capturer une seule valeur de bouton radio, c’est-à-dire d’accéder à un seul groupe. Voir le chapitre 9 pour un exemple d’accès à plusieurs valeurs à partir d’éléments similaires.

Nom: {{bouton radio coché}}

function() {   var radioName = "radioName";   var checked = {{Form Element}}.querySelector('[name="' + radioName + '"]:checked');   return checked ? checked.value : undefined; } 

La description: Renvoie la valeur du bouton radio coché dans le groupe portant le nom nomradio. Ce groupe doit exister dans le formulaire soumis. Si aucun bouton coché n’est trouvé, indéfini est retourné.

7. Capturez la valeur de la case à cocher sélectionnée

Le retour de la valeur de la case à cocher sélectionnée dans un groupe se fait exactement de la même manière que la façon dont vous captureriez une valeur de bouton radio. Les deux utilisent le checked propriété pour identifier si un élément est coché.

Utilisez donc la solution du chapitre précédent pour capturer également les valeurs des cases à cocher. N’oubliez pas qu’il ne renvoie que la valeur de première case à cocher dans un groupe qui a été sélectionné. Si l’utilisateur peut cocher plusieurs cases (comme c’est généralement le cas), vous pouvez consulter le chapitre 9 pour obtenir des conseils sur la manière de procéder.

8. Capturer la valeur de l’élément de liste déroulante sélectionné

Pour capturer la valeur de l’élément sélectionné dans une liste déroulante, en vérifiant la value de la liste elle-même ne fonctionnera pas, comme vous vous en doutez intuitivement. Au lieu de cela, vous devez accéder à l’option de la liste qui a été sélectionnée, puis capturer sa valeur.

Nom: {{élément de liste sélectionné}}

function() {   var selectList = {{Form Element}}.querySelector('#selectListId');   return selectList ? selectList.options[selectList.selectedIndex].value : undefined; } 

La description: Tout d’abord, le script récupère la liste déroulante avec ID selectListId. Ensuite, il renvoie la valeur de l’option sélectionnée dans la liste. Si la liste n’existe pas, le script retourne indéfini.

9. Capturez plusieurs valeurs

Parfois, vous souhaiterez capturer plusieurs valeurs d’un groupe spécifié. Un excellent exemple est la case à cocher, où vous pouvez avoir plusieurs cases cochées dans un seul groupe. Voici quelques idées sur la façon de capturer ces valeurs.

Renvoie la chaîne concaténée des valeurs d’éléments cochées

function() {   var groupName = "groupName";   var elems = {{Form Element}}.querySelectorAll('[name="' + groupName + '"]:checked');   var vals = [];   var i, len;   for (i = 0, len = elems.length; i < len; i++) {     vals.push(elems[i].value);   }   return vals.length ? vals.join(' ') : undefined; }  

La description: Cela renvoie une chaîne concaténée de toutes les valeurs d’élément cochées dans le groupe avec le nom nom de groupe. Un exemple serait par exemple « petit déjeuner déjeuner », où l’utilisateur choisit les repas qu’il prend toujours parmi « petit déjeuner », « déjeuner » et « dîner ».

Pour renvoyer uniquement le tableau simple, afin que vous puissiez le traiter davantage dans le tag qui appelle cette variable, modifiez le return déclaration à :

return vals.length ? vals : undefined; 

Si vous souhaitez obtenir les valeurs dans une liste à sélection multiple, utilisez le script suivant. Il renvoie à nouveau les résultats dans une chaîne concaténée, mais en suivant l’astuce du paragraphe précédent, vous pouvez renvoyer un tableau à la place.

Renvoie les valeurs sélectionnées dans une liste de sélection multiple

function() {   var selectList = {{Form Element}}.querySelector('#selectListId');   var options = selectList ? selectList.options : [];   var vals = [];   var i, len;   for (i = 0, len = options.length; i < len; i++) {     if (options[i].selected) {       vals.push(options[i].value);     }   }   return vals.length ? vals.join(' ') : undefined; } 

La description: Cela renvoie une chaîne concaténée de toutes les options sélectionnées dans une liste déroulante à sélection multiple, qui a l’ID selectListId et qui se trouve dans le formulaire soumis.

10. Suivre l’abandon du formulaire

Pour des idées sur la façon de suivre l’abandon de formulaire, consultez cet article que j’ai écrit il y a peu de temps :

Suivre l’abandon de formulaire avec Google Tag Manager

Bounteous a également un joli guide sur la façon de réaliser la même chose, mais avec une approche quelque peu différente.

Mon collègue de Reaktor, Lauri Piispanen, a également amélioré cette solution, et vous pouvez consulter son dépôt GitHub ici.

11. Suivre les horaires des champs de formulaire

Si vous souhaitez suivre le temps qu’un utilisateur passe sur votre formulaire, segmenté par champs individuels, consultez l’article suivant :

Synchronisation des champs de formulaire avec Google Tag Manager

Il utilise User Timings dans Google Analytics pour collecter des données sur le temps que les utilisateurs passent en moyenne dans les champs de votre formulaire.

12. Un élément de formulaire – plusieurs formulaires (ASP.NET)

J’ai décidé de ne pas trop m’attarder sur ce sujet, car il est tellement hacky et peu fiable. Le problème est que, par exemple, sur les sites ASP.NET, un seul contrôle de formulaire principal encapsule la page entière, et les formulaires individuels ne sont que des groupes d’éléments sous ce seul contrôle.

Cependant, la méthode que j’ai suggérée dans le guide précédent est toujours valable. La façon dont cela fonctionne est la suivante :

1. Lancez une balise HTML personnalisée lorsque vous cliquez sur le bouton d’envoi du formulaire

2. Dans cette balise HTML personnalisée, insérez l’ID (ou d’autres données pertinentes) de l’élément cliqué dans la couche de données

3. Créer un déclencheur de soumission de formulaire qui recherche cette valeur dans la couche de données

De cette façon, le déclencheur de soumission de formulaire ne devrait se déclencher que lorsque le formulaire est soumis en raison d’un clic sur le bon bouton de soumission.

J’ai remarqué que cela ne fonctionne pas toujours en raison des conditions de course ou simplement de la fragilité générale de la chaîne d’événements. Néanmoins, c’est quelque chose que vous voudrez peut-être essayer si vous ne pouvez pas demander aux développeurs de vous aider.

Si vous faire avoir une ligne de communication établie avec vos développeurs, la solution est de leur demander de créer/modifier le rappel de réussite de chaque formulaire pour pousser un message personnalisé dataLayer objet lorsqu’un formulaire est soumis. Cet objet doit contenir des informations sur le formulaire qui a été soumis, et vous pouvez ensuite créer un déclencheur d’événement personnalisé basé sur ces informations. Revenez au chapitre 2 pour un exemple d’une telle poussée.

13. Résumé

Ce guide est un peu plus léger que la première édition (du moins, il en a l’impression). C’est parce que le nouveau déclencheur de soumission de formulaire a rendu beaucoup de choses plus faciles, et j’ai également réécrit le JavaScript pour utiliser des méthodes comme querySelector et des propriétés comme selectedIndex pour obtenir le résultat souhaité avec beaucoup moins de tracas.

Une fois qu’IE8 et les versions antérieures auront complètement disparu de la surface de cette terre (j’ai hâte !), nous pourrons utiliser un langage encore plus simple, avec par exemple des pseudo-classes CSS3 comme :checked.

Pensez-vous qu’il manque quelque chose de pertinent dans ce guide ? Fais-moi savoir. Je suis toujours heureux de mettre à jour cela avec de nouvelles solutions. N’oubliez pas de lire également la version précédente du guide et de vérifier les commentaires rubrique aussi ! Beaucoup de bonnes questions et réponses là-bas.