L’inimitable Craig Sullivan m’a donné une idée de suite à mon dernier article sur le suivi des abandons de formulaires. Dans ce court tutoriel, je vais vous montrer comment suivre le temps que les utilisateurs passent sur vos champs de formulaire. Nous allons utiliser le type de hit User Timings et nous enverrons les données pour un seul formulaire. Avec de petites modifications, vous pouvez développer le script pour couvrir plusieurs formulaires sur une page.
Cette solution simple suit le temps que l’utilisateur passe sur chaque champ de formulaire en mesurant la distance entre le focus événement et le blur ou alors change un événement. Le premier se produit lorsqu’un champ de formulaire est saisi, et le second dépend si une valeur a changé (change) ou aucun changement n’a été enregistré (blur).
L’objet de synchronisation envoyé à GA ressemble à ceci :
Catégorie de chronométrage – Timing du champ du formulaire de commentaire
Variable de temps – Champ de formulaire name valeur d’attribut
Étiquette de synchronisation – ‘flou’ ou ‘changer’ selon la façon dont le champ a été quitté
Valeur temporelle – Temps passé sur le terrain en millisecondes
Note! Les temps sont comptés contre le 500 visites / séance limite dans Google Analytics. C’est pourquoi vous devez être prudent lors de la mise en œuvre de cela. Je vous suggère de ne l’implémenter que sur un seul formulaire et pendant une courte période, puis de voir si les sessions des utilisateurs sont mal calculées grâce au dépassement de la limite de 500 accès. Il existe également des limitations supplémentaires par propriété, mais elles ne comptent que pour les hits de synchronisation et pas tous les hits de la session.
La balise HTML personnalisée
La balise HTML personnalisée ressemble à ceci :
<script> (function() { var form = document.querySelector('#commentform'); var fields = {}; var enterField = function(name) { fields[name] = new Date().getTime(); } var leaveField = function(e) { var timeSpent; var fieldName = e.target.name; var leaveType = e.type; if (fields.hasOwnProperty(fieldName)) { timeSpent = new Date().getTime() - fields[fieldName]; if (timeSpent > 0 && timeSpent < 1800000) { window.dataLayer.push({ 'event' : 'fieldTiming', 'timingCategory' : 'Comment Form Field Timing', 'timingVariable' : fieldName, 'timingLabel' : leaveType, 'timingValue' : timeSpent }); } delete fields[fieldName]; } } if (form) { form.addEventListener('focus', function(e) { enterField(e.target.name); }, true); form.addEventListener('blur', function(e) { leaveField(e); }, true); form.addEventListener('change', function(e) { leaveField(e); }, true); } })(); </script>Pour déclencher ce Tag, je vous propose de créer un Déclencheur d’affichage de page qui ne déclenche cette balise que sur les pages où votre formulaire existe.
Ensuite, modifiez la toute première variable var form = document.querySelector('#commentform'); pour sélectionner le formulaire que vous souhaitez suivre. Sur mon site, il s’agit d’un formulaire avec ID #commentform.
Chaque fois qu’un focus événement est détecté, une table de hachage est mise à jour avec le nom du champ de formulaire et l’heure à laquelle le champ a été saisi.
Ensuite, lorsque le champ est quitté, et soit un blur ou alors change est enregistré, le temps passé dans le champ est calculé, puis le nom du champ est supprimé de la table de hachage. Si vous ne supprimez pas le champ, un change enverrait le timing deux fois, car lorsque l’utilisateur modifie la valeur d’un champ et le quitte, un change est envoyé en premier, puis un blur.
Quoi qu’il en soit, n’hésitez pas à modifier la valeur de la variable ‘timingCategory’ dans le dataLayer.push(). J’utilise ‘Comment Form Field Timing’, car c’est ce que je fais ici.
Enfin, si le sélecteur de formulaire que vous utilisez dans la toute première déclaration de variable du script fonctionne, les trois écouteurs sont attachés au formulaire avec leurs rappels respectifs.
C’est le script lui-même. Nous terminerons la configuration dans le chapitre suivant.
Variables de balise de synchronisation, de déclencheur et de couche de données
Pour que la configuration fonctionne, nous avons besoin d’une balise de synchronisation, d’un déclencheur d’événement personnalisé et de quatre variables de couche de données.
Variables de la couche de données
Créez d’abord les variables de couche de données. Vous avez besoin quatre Variables avec les paramètres suivants :
Nom: {{DLV – timingCategory}}
Nom de la variable de la couche de données : timingCategory
Nom: {{DLV – variable de synchronisation}}
Nom de la variable de la couche de données : timingVariable
Nom: {{DLV – timingLabel}}
Nom de la variable de la couche de données : timingLabel
Nom: {{DLV – timingValue}}
Nom de la variable de la couche de données : valeur de synchronisation
Déclencheur d’événement personnalisé
Le déclencheur est un Déclencheur d’événement personnalisé avec les paramètres suivants :
Nom: Événement – fieldTiming
Feu activé / Nom de l’événement : fieldTiming
Balise de synchronisation
Enfin, vous devez créer la balise de synchronisation. Créer une nouvelle balise de type Google Analyticset définissez les paramètres suivants :
Nom: UA – Timing – Champ de formulaire Timing
ID de suivi : UA-XXXXXX-Y (remplacer par votre ID de propriété)
Type de piste : Horaire
Var : {{DLV – variable de synchronisation}}
Catégorie: {{DLV – timingCategory}}
Évaluer: {{DLV – timingValue}}
Étiquette: {{DLV – timingLabel}}
Attachez le déclencheur que vous avez créé dans la section précédente à cette balise.
Et maintenant, vous êtes prêt à partir ! Chaque interaction avec les champs de votre formulaire doit maintenant envoyer le hit Timing. Vous pouvez trouver les résultats dans Google Analytics, en allant sur Comportement -> Vitesse du site -> Horaires de l’utilisateur.
Résumé
Comme je l’ai mentionné, c’est une solution très simple. Il mesure simplement le temps passé sur chaque champ de formulaire et le signale comme un hit de synchronisation de l’utilisateur à Google Analytics. Vous voudrez peut-être le modifier un peu pour qu’il soit plus robuste, et vous devez être conscient de la 500 visites / séance limitation que GA impose aux sessions.
Vous pouvez faire des choses intéressantes avec les données, comme créer un histogramme où il est plus facile de visualiser les champs problématiques. Il serait également intéressant de voir si le temps passé sur un terrain est corrélé à l’abandon du formulaire.
Source : www.simoahava.com
