Il existe une nouvelle version mise à jour de cet article pour la nouvelle version de Google Tag Manager. Je vous conseille fortement de le lire également !
J’apprécie vraiment les sessions de questions-réponses ad hoc que mes articles de blog ont inspirées. Je ne l’ai pas assez dit, mais je suis vraiment, VRAIMENT reconnaissant envers les gens qui prennent leur temps pour commenter mes publications, même si c’est juste pour dire un petit “Salut!”. La principale raison pour laquelle j’aime recevoir des commentaires de blog est qu’ils se transforment souvent en articles de blog. Sérieusement, si vous êtes un blogueur souffrant du blocage de l’écrivain, jetez un œil à vos commentaires. Il y a un richesse d’idées de contenu juste là.
On me pose souvent des questions sur le suivi des formulaires et Google Tag Manager. Il s’agit également d’un thème récurrent dans la communauté Google+ GTM. Une partie de moi (la partie prétentieuse) veut attribuer cela au fait que j’ai négligé d’ajouter une section pour la balise Form Submit Listener dans mon message de suivi des événements automatiques. C’est alors que le moi rationnel entre en jeu et dit que c’est en fait parce que le suivi des formulaires est sacrément difficile. Il y a tellement de choses qui peuvent mal tourner, tellement de variables à examiner, tellement de choses différentes à suivre, tellement de formulaires différents sur une seule page, tellement de technologies différentes créant les formulaires, tellement… vous obtenez la dérive.
Ce guide est donc destiné à couvrir certains des cas d’utilisation les plus avancés pour le suivi des formulaires dans GTM, tout en fournissant des exemples pertinents de macros et de règles GTM pour rendre les conseils exploitables.
1. Suivi des formulaires : les bases
Pour suivre un formulaire dans Google Tag Manager, le mieux est de créer une balise Form Submit Listener. Cela écoutera ensuite les événements de soumission de formulaire (à condition qu’ils ne soient pas empêchés par des scripts en conflit) et poussera un {{event}} est égal à gtm.formSubmit événement dans la couche de données avec laquelle vous pouvez travailler.
Si vous vous sentez un peu confus, vous devriez d’abord lire les bases : suivi automatique des événements, macros et règles. Justin Cutroni a un excellent article sur le suivi automatique des événements, et il couvre également les bases du suivi des formulaires.
Alors, commençons. Avant de faire quoi que ce soit, créons la balise Form Submit Listener.
-
Créer une nouvelle balise de type Form Submit Listener
-
Définir la règle de déclenchement pour qu’elle se déclenche sur toutes les pages
Maintenant, vous avez de la place pour improviser ici. Tout d’abord, il n’est pas du tout nécessaire que la balise se déclenche sur toutes les pages. Si vous voulez optimiser les choses, vous ne pouvez le faire se déclencher que sur les pages avec des formulaires.
De plus, comme vous pouvez le voir, il y a deux cases à cocher que vous pouvez cocher, si vous le souhaitez :
-
Attendre les balises – Ceci introduit un timeout de X millisecondes (2000 par défaut) à l’événement submit. Cela permet à toutes les balises qui utilisent l’événement de soumission de formulaire comme déclencheur de se déclencher. Si le délai d’attente s’est écoulé avant que les balises dépendantes ne se soient déclenchées, l’événement de soumission du formulaire se terminera et vous risquez de manquer certains résultats. Néanmoins, je ne vous recommande pas d’augmenter ce délai, car si vos balises dépendantes ne se déclenchent pas dans les 2 secondes, la faute en est à elles, pas à GTM ou à votre formulaire.
-
Vérifier la validation – Fondamentalement, si le formulaire ne valide pas (c’est-à-dire que l’événement de soumission est interrompu par une fonction de validation), la balise ne se déclenchera pas. Il serait judicieux de vérifier cela, à moins que vous ne sachiez qu’il existe des problèmes de propagation d’événements, par exemple lorsqu’un gestionnaire de soumission personnalisé est utilisé.
L’écouteur de soumission de formulaire attend un événement de soumission de formulaire sur la page. Une fois qu’un formulaire est soumis avec succès, un événement de couche de données GTM gtm.formSoumettre est poussé dans la couche de données. Si l’option « Attendre les balises » est cochée, toutes les balises utilisant cet événement comme déclencheur seront d’abord déclenchées (si elles se déclenchent dans le délai spécifié), et ce n’est qu’alors que la soumission sera terminée. Après cela, vous pouvez utiliser la règle {{event}} est égal à gtm.formSubmit pour toutes les balises qui doivent être déclenchées lorsqu’un formulaire est soumis.
C’est donc le point de départ de notre voyage. Un auditeur solitaire de soumission de formulaire, sa maigre existence réduite à attendre qu’un formulaire soit soumis, prêt à remplir les fonctions qui lui ont été assignées par un administrateur GTM sadique.
2. Macros utiles
Comme toujours, une configuration GTM élégante et fonctionnelle dépend de la façon dont vous utilisez les macros. Aux fins de cet article, voici un tas de macros que vous trouverez utiles.
{{élément}}
Type de macro: Variable d’événement automatique
Type de variables: Élément
Description: capture l’objet de formulaire soumis
{{identifiant de l’élément}}
Type de macro: Variable d’événement automatique
Type de variables: identifiant de l’élément
Description: capture la valeur de l’attribut ID de l’envoi de
{{URL de l’élément}}
Type de macro: Variable d’événement automatique
Type de variables: URL de l’élément
Description: capture la valeur de l’attribut ACTION du formulaire soumis
{{valeur du champ}}
Type de macro: JavaScript personnalisé
Javascript:
function() { var inputField = document.getElementById("myFormField"); return inputField.value || ""; } Description: Renvoie la valeur de l’élément dont l’ID est myFormField (changez ceci à votre goût)
{{Élément sélectionné}}
Type de macro: JavaScript personnalisé
Javascript:
function() { var selectId = document.getElementById("mySelectList"); try { var options = selectId.options; for (var i = 0;i < options.length;i++){ if(options[i].selected) { return options[i].value; } } } catch(e) {} return ""; } Description: Renvoie la VALEUR de l’élément sélectionné dans la liste de sélection dont vous spécifiez l’ID avec la variable selectId
{{bouton coché}}
Type de macro: JavaScript personnalisé
Javascript:
function() { var radioName = "myRadioButtons"; try { var buttons = document.getElementsByName(radioName); for (var i = 0;i < buttons.length;i++){ if(buttons[i].checked) { return buttons[i].value; } } } catch(e) {} return ""; } Description: Renvoie la VALEUR de l’élément coché parmi les boutons radio dont l’attribut NAME est spécifié dans la variable nomradio
{{chaîne de boutons cochés}}
Type de macro: JavaScript personnalisé
Javascript:
function() { var inputs = document.getElementsByTagName("input"), selectedRadios = ""; for (var i = 0;i < inputs.length;i++) { if(inputs[i].type==="radio" && inputs[i].checked) { selectedRadios += inputs[i].value +" "; } } return selectedRadios.replace(/\s$/,""); } Description: Renvoie une chaîne concaténée de toutes les valeurs des boutons radio cochés sur la page
{{tableau de boutons cochés}}
Type de macro: JavaScript personnalisé
Javascript:
function() { var inputs = document.getElementsByTagName("input"), selectedRadios = []; for (var i = 0;i < inputs.length;i++) { if(inputs[i].type==="radio" && inputs[i].checked) { selectedRadios.push(inputs[i].value); } } return selectedRadios; } Description: Renvoie un tableau de toutes les valeurs des boutons radio cochés sur la page
Vous pouvez également appliquer les deux macros précédentes aux cases à cocher en modifiant contributions[i].type===”radio” à contributions[i].type===”case à cocher”.
3. Capturer la valeur du champ
Souvent, vous avez une situation où vous souhaitez envoyer la valeur d’un champ avec votre hit Google Analytics. Vous souhaitez peut-être segmenter vos événements entre les personnes qui ont soumis value1 et celles qui ont soumis value2. Ou vous pouvez utiliser une valeur de champ spécifique comme règle de déclenchement ou de blocage pour vos autres balises.
Quel que soit le cas, voici comment récupérer la valeur d’un champ spécifique de votre formulaire. N’oubliez pas que vous n’êtes pas autorisé à envoyer des informations personnellement identifiables telles que des noms, des adresses e-mail ou des numéros de téléphone à Google Analytics !.
La méthode facile:
Le moyen le plus simple de le faire est de créer le {{valeur du champ}} macro que j’ai introduite dans le chapitre précédent. Cela nécessite que le champ dont vous souhaitez récupérer la valeur ait un attribut ID, par exemple <input type="text" id="lunch">.
Vous ajouterez ensuite cette macro à votre balise d’événement (ou balise de règle ou de page vue ou similaire), et lorsque la balise se déclenche sur {{event}} est égal à gtm.formSubmitla macro renverra la valeur de l’élément de formulaire dont vous avez spécifié l’ID précédemment.
La méthode PRO:
Si vous avez plusieurs formulaires, chacun avec un champ unique (avec un ID unique) que vous souhaitez suivre, vous n’avez pas besoin de créer une macro distincte pour chaque formulaire. Changez simplement la déclaration de variable dans la macro en var inputField = document.getElementById({{recherche d’ID de champ}});. Ensuite, créez une nouvelle macro Lookup Table, dans laquelle vous renvoyez l’ID du champ dont vous souhaitez récupérer la valeur, selon que l’utilisateur se trouve sur une page spécifique, si le formulaire a un ID spécifique ou quelque chose de similaire. Voici un exemple, où l’ID du champ dépend de l’ID de l’élément de formulaire :
Si vous n’avez pas d’attribut ID auquel accéder, vous devrez faire preuve de créativité. Habituellement, cela signifie également que vous devrez recourir à des scripts sujets aux erreurs, donc je suggère vraiment que vous demandiez à vos développeurs d’introduire des attributs ID dans vos champs. Cependant, voici quelques idées (elles remplacent la déclaration de variable dans l’original {{valeur du champ}} macro). Notez que le [0] après les fonctions fait référence au premier index du tableau. Donc, si vous voulez le deuxième élément d’entrée, vous utiliserez [1]pour le tiers que vous utiliseriez [2] etc.
Obtenir le premier élément d’entrée du formulaire soumis :
var inputField = {{element}}.getElementsByTagName("input")[0];
Obtenir le premier élément d’entrée avec “myInput” comme attribut NAME (<input type="text" name="myInput">):
var inputField = document.getElementsByName("myInput")[0];
Obtenir le premier élément d’entrée avec “myInput” comme attribut CLASS (<input type="text" class="myInput">):
var inputField = document.getElementsByClassName("myInput")[0];
Etc. N’hésitez pas à faire preuve de créativité avec JavaScript.
4. Capturer la valeur de la liste déroulante
Pour obtenir la valeur sélectionnée d’une liste déroulante (élément SELECT), vous devrez utiliser une macro qui parcourt tous les éléments OPTION de votre liste SELECT et renvoie celui qui est sélectionné. La macro utilisée ici a été introduite plus tôt dans cet article ({{Élément sélectionné}}).
La méthode facile:
La méthode simple, encore une fois, utilise l’attribut ID de l’élément SELECT. Par exemple, vous pourriez avoir une liste telle que :
<select id="myList"> <option value="home">Home</option> <option value="work">Work</option> </select>Vous modifieriez la déclaration de variable dans le {{Élément sélectionné}} macro à var selectId = document.getElementById(“myList”);. Ensuite, le script parcourt tous les éléments OPTION de cette structure SELECT et renvoie la valeur de l’option qui a été sélectionnée.
La méthode PRO:
Naturellement, vous pouvez appliquer la même magie de table de consultation qu’avec la méthode de valeur de champ ci-dessus. Si votre élément SELECT n’a pas d’attribut ID, vous devrez faire preuve de créativité. Voici quelques idées pour la déclaration de variable.
Accédez à la première liste SELECT de la page :
var selectId = document.getElementsByTagName("select")[0];
Accédez à la première liste SELECT du formulaire soumis :
var selectId = {{element}}.getElementsByTagName("select")[0];
5. Capturer la ou les valeurs du bouton radio sélectionné(s)
Un cas très solide pour la récupération de valeur est lorsque vous avez un choix de boutons radio. Par exemple, dans l’exemple ci-dessous, vous souhaiterez peut-être déclencher une balise différente (avec différentes dimensions personnalisées) selon que l’utilisateur a choisi l’assurance habitation ou maladie.
L’astuce avec l’élément de bouton radio est une utilisation cohérente (et unique) de l’attribut NAME. Si vous spécifiez chaque groupe de boutons radio avec leur propre attribut NAME unique, ce script fonctionnera parfaitement.
La méthode facile:
Utilisez le {{bouton coché}} d’avant, et remplacer « mes boutons radio » avec la valeur d’attribut NAME du groupe de boutons radio que vous souhaitez analyser.
Ce script parcourt tous les boutons radio avec l’attribut NAME donné et renvoie la valeur du bouton coché. Comme vous pouvez le voir, cela ne fonctionnera que si vos groupes de boutons ont des attributs NAME uniques.
La méthode PRO:
Parfois, vous avez plusieurs groupes de boutons radio sur votre formulaire et vous souhaitez envoyer ou traiter les boutons sélectionnés de chacun d’eux dans une seule balise. Voici comment:
Concaténer une chaîne de toutes les valeurs de bouton radio sélectionnées (macro JavaScript personnalisée)
function() { var inputs = document.getElementsByTagName("input"), selectedRadios = ""; for (var i = 0;i < inputs.length;i++) { if(inputs[i].type==="radio" && inputs[i].checked) { selectedRadios += inputs[i].value +" "; } } return selectedRadios.replace(/\s$/,""); } Ce script parcourt TOUS les boutons radio du formulaire et renvoie une chaîne concaténée des valeurs des boutons cochés, par exemple « homme 30 maison » pour trois groupes de boutons radio.
Enregistrer les valeurs dans un objet pour un traitement ultérieur (macro JavaScript personnalisée)
function() { var inputs = document.getElementsByTagName("input"), selectedRadios = []; for (var i = 0;i < inputs.length;i++) { if(inputs[i].type==="radio" && inputs[i].checked) { selectedRadios.push(inputs[i].value); } } return selectedRadios; } Cela renvoie un tableau de valeurs, extraites de chaque bouton radio coché trouvé sur la page. Vous pouvez ensuite traiter ce tableau dans une autre macro (ou la même), ou lui faire une autre magie. Je préfère cela à la méthode de chaîne concaténée, car vous avez plus à travailler lorsque vous utilisez des structures de tableau JavaScript.
6. Capturer les valeurs de case à cocher sélectionnées
L’astuce avec les cases à cocher est que vous avez presque toujours plusieurs valeurs cochées. Cela signifie que si vous souhaitez envoyer des informations dans votre événement sur les cases cochées, vous devrez toujours recourir à des méthodes telles que celles présentées ci-dessus pour le bouton radio (la méthode PRO). Donc, pour récupérer les valeurs de vos cases cochées, utilisez le ou les scripts ci-dessus, mais au lieu de
if(inputs[i].type==="radio"...)
vous devrez utiliser
if(inputs[i].type==="checkbox"...)
pour accéder à vos cases à cocher.
L’autre méthode:
Que diriez-vous si vous voulez juste faire une recherche de valeur ? Par exemple, si vous vouliez déclencher une balise si le formulaire inclut l’opt-in pour le spam… je veux dire les e-mails promotionnels occasionnels ?
Dans ce cas, vous devez créer une macro JavaScript personnalisée qui ressemble à ceci :
function() { var checkbox = document.getElementById("spamReq"); return checkbox.checked || false; } Cette macro renvoie “true” si la case est cochée, et “false” si ce n’est pas le cas ou si le script rencontre une erreur.
L’autre méthode PRO:
Qu’en est-il si vous n’avez pas d’attribut ID auquel accéder (imbécile) ? Eh bien, il existe de nombreuses façons d’identifier la bonne case à cocher. Vous pouvez rechercher le nième élément d’entrée sur un formulaire (par exemple, le 15e élément du formulaire soumis est la case à cocher) avec quelque chose comme :
var checkbox = {{element}}.getElementsByTagName("input")[14]; S’il s’agit de la SEULE case à cocher du formulaire, vous pouvez obtenir son statut de vérification (vrai/faux) avec quelque chose comme ceci :
function() { var inputs = {{element}}.getElementsByTagName("input"); for(var i = 0;i < inputs.length;i++) { if(inputs[i].type==="checkbox") { return inputs[i].checked; } } return false; } Notez que vous pouvez également tirer parti du querySelector() méthode comme celle-ci (le support du navigateur n’est pas aussi bon qu’avec getElementsByTagName()):
function() { var check = document.querySelector('input[type="checkbox"]'); return check ? check.checked : undefined; } La méthode de désespoir ultime serait d’utiliser les propriétés les plus fragiles de l’élément DOM, telles que previousSibling.innerText || previousSibling.textContent pour voir quel texte précède directement la case à cocher (comme “Oui” dans l’exemple précédent). Cependant, je ne vous dirai pas comment faire cela ici car je ne pense pas que ce soit une méthode très propre ou robuste. Vous rencontrerez beaucoup de problèmes si vous essayez de vous accrocher à quelque chose d’aussi fragile que le contenu du texte.
7. Un élément de formulaire – plusieurs formulaires (ASP.NET)
Oh man, oh MAN, est-ce que je déteste travailler avec des pages ASPX. La pile technologique de Microsoft rend souvent très frustrant le travail avec des pages HTML, car les pages créées dynamiquement dépendent largement de la qualité du modèle de page maître.
Vous rencontrerez souvent une situation où la page entière est enveloppée dans un élément FORM. Il s’agit du wrapper de formulaire d’une page ASPX, et il est utilisé pour créer le contenu dynamique que vous voyez entièrement rendu dans votre navigateur. Cependant, pour GTM, cela pose problème. S’il y a plus d’un formulaire sur la page, ce qui est très souvent le cas, vous aurez du mal à déterminer quel formulaire a été envoyé lorsqu’un bouton d’envoi est cliqué. Vous voyez, gtm.formSoumettre est déclenché lorsque le wrapper de formulaire est envoyé, et les soumissions peuvent avoir été lancées à partir de l’un des formulaires réels de la page. Comment saurez-vous jamais si la soumission provient du champ de recherche du site, du formulaire de contact ou du champ d’abonnement à la newsletter ?
Les solutions de contournement ne sont pas idéales, mais elles devront faire l’affaire pour l’instant. À un moment donné, j’aimerais avoir la possibilité de passer par le {{un événement}} l’histoire de la macro. Heck, je veux accéder aux versions historiques de TOUTES les variables de la couche de données ! Jusque-là, je devrai recourir aux méthodes décrites ci-dessous.
Identifier la forme correcte à l’aide d’un écouteur de clic:
Cette méthode utilise l’écouteur de clic pour identifier le bouton de soumission sur lequel on a cliqué, puis utilise ces informations comme règle de déclenchement/blocage dans la balise qui réagit à la soumission du formulaire. Pour m’aider ici, j’utilise les informations que j’ai recueillies lors de mon test d’ordre de tir de l’écouteur GTM. Là j’ai remarqué qu’en cas de conditions de course, gtm.click est toujours activé avant gtm.formSoumettre.
Dans cet exemple, j’ai deux formulaires sur la page : une zone de recherche de site avec un ID de bouton d’envoi siteSearchButtonet un formulaire de contact avec l’ID du bouton d’envoi contactSubmitButton.
Tout d’abord, vous devrez créer une balise HTML personnalisée qui se déclenchera sur {{event}} est égal à gtm.click. Oui, vous aurez besoin d’un écouteur de clics actif. Ajoutez le code suivant dans :
<script> dataLayer.push({'clickedButton': {{element id}}}); </script>Cela pousse l’ID du bouton cliqué dans la couche de données. Ainsi, si quelqu’un effectue une recherche sur le site, la valeur poussée serait siteSearchButton, et si quelqu’un envoie un formulaire de contact, la valeur poussée serait contactSubmitButton.
Ensuite, j’aurai besoin d’une macro Data Layer Variable pour accéder à cette valeur. Alors créez-en un :
Enfin, dans votre balise d’événement pour la soumission de recherche de site, vous aurez besoin de la règle suivante :
{{event}} est égal à gtm.formSubmit
{{ID du bouton cliqué}} est égal à siteSearchButton
Inversement, dans votre balise d’événement pour la soumission du formulaire de contact, vous aurez besoin d’une règle comme :
{{event}} est égal à gtm.formSubmit
{{ID du bouton cliqué}} est égal à contactSubmitButton
Cela fonctionne, mais je ne suis pas sûr de sa fiabilité. Il y a toujours la possibilité que seule la balise gtm.click se déclenche ou que seule la balise de soumission de formulaire se déclenche (en raison d’un décalage ou autre), mais jusqu’à présent, je n’ai pas vraiment eu de problème avec cette solution. Le gros bémol c’est que c’est vraiment moche. Vous avez besoin d’un intermédiaire tag pour gérer le déclenchement de votre tag principal, et ça craint vraiment. Je voudrais exploiter toute cette taxonomie d’événements en utilisant uniquement les balises principales, sans avoir recours à des “aides”.
Identifiez le formulaire correct en utilisant {{field value}}:
Une autre méthode que j’ai utilisée pour contourner le problème du wrapper de formulaire consiste à vérifier si un champ de formulaire contient du texte. Si c’est le cas, je peux supposer que le formulaire qui a été soumis était celui avec le texte. Je veux dire, vous ne commenceriez pas à remplir un formulaire, puis passeriez à un autre et enverriez celui-là, n’est-ce pas ? VOUDRIEZ-VOUS? (Veuillez dire non.)
Voici donc une situation où j’ai deux formulaires sur la page (avec un seul wrapper de formulaire). Le premier formulaire est la zone de recherche du site, et le champ de recherche a un ID de Recherche du site. J’ai également un formulaire de contact sur la page, et l’un de ses champs nécessite une adresse e-mail, et son identifiant est e-mail.
J’ai ensuite une macro JavaScript personnalisée (nommée {{formulaire soumis}}) qui ressemble à ceci :
function() { var search = document.getElementById("siteSearch"), contactEmail = document.getElementById("email"); if(search && search.value != "") { return "search"; } else if (contactEmail && contactEmail.value != "") { return "contact"; } return ""; } S’il y a une valeur dans le champ de recherche du site, ce script renvoie la chaîne « search ». S’il y a une valeur dans le champ e-mail du formulaire de contact, ce script renvoie la chaîne « contact ». Si aucun n’est trouvé, le script renvoie une chaîne vide.
Je peux enfin créer…
