Comment configurer l'analyse de suivi des formulaires avec Google Tag Manager et Google Analytics

Publié: 2022-04-12

Le taux de conversion est l'une des mesures les plus simples et en même temps les plus importantes de l'efficacité marketing. Il indique combien d'utilisateurs ont effectué une action ciblée : ont effectué un achat, se sont inscrits à des e-mails, ont demandé un appel, etc. Pour enregistrer et analyser les ventes du commerce électronique, nous avons Google Analytics, qui est relativement facile à configurer. Cependant, des efforts supplémentaires sont nécessaires pour suivre les formulaires soumis sur un site.

En effet, les formulaires sont de différents types et utilisent différentes technologies pour envoyer des données au serveur. Une fois les données envoyées avec succès, certains champs du formulaire sont mis à jour. D'autres affichent une fenêtre contextuelle. Un troisième type redirige l'utilisateur vers une page de remerciement. La méthode de suivi des formulaires dépend de la technologie utilisée.

Dans cet article, nous vous expliquons comment collecter des données de formulaire de différentes manières et les transférer vers Google Analytics.

Table des matières

Méthode 1. Page de remerciement séparée
Méthode 2. Envoyer le déclencheur de formulaire dans Google Tag Manager
- Étape 1. Activer les variables de formulaire
- Étape 2. Ajustez la gâchette
- Étape 3. Vérifiez si le déclencheur fonctionne
- Étape 4. Créez la balise
- Étape 5. Configurez votre cible dans Google Analytics
Méthode 3. Déclencheur de disponibilité d'élément dans Google Tag Manager
Méthode 4. Suivre les formulaires qui utilisent AJAX
- Étape 1. Créez une balise pour vérifier le fonctionnement de votre formulaire
- Étape 2. Créer une variable de couche de données
- Étape 3. Créer le déclencheur
Méthode 5. Événements DataLayer comme déclencheur
Combien de temps les utilisateurs passent à remplir vos formulaires

Méthode 1. Page de remerciement séparée

Si l'utilisateur est redirigé vers une page distincte avec une URL différente après avoir rempli le formulaire, le suivi des visites vers cette URL est la méthode la plus simple pour suivre la soumission du formulaire. Il vous suffit de créer une cible de type « Landing Page » dans Google Analytics.

Supposons que vous souhaitiez suivre les inscriptions à un webinaire. La page de remerciement après une inscription réussie ressemble à ceci : https://www.site.com/registration/thankyou

Dans le panneau d'administration, dans Afficher les paramètres , sous Cibles, cliquez sur Cible, puis sur Personnalisé . Spécifiez le nom de la cible, sélectionnez le type de cible et saisissez l'adresse de la page de remerciement :

Panneau d'administration de Google Analytics

Ce qu'il est important de prendre en compte : l'URL de votre page de remerciement doit être unique, c'est-à-dire qu'il ne doit y avoir qu'une seule page sur le site avec une telle adresse, et les utilisateurs ne doivent pas pouvoir accéder à cette page sans remplir le formulaire. Sinon, Google Analytics peut enregistrer des données inexactes sur la réalisation de votre objectif.

bonus pour les lecteurs

Meilleurs cas de marketing OWOX BI

Télécharger maintenant

Méthode 2. Envoyer le déclencheur de formulaire dans Google Tag Manager

Si vos programmeurs ont correctement configuré la transmission de données à partir d'un formulaire au moyen du bouton d'envoi, vous pouvez utiliser le déclencheur Google Tag Manager intégré pour les soumissions de suivi de formulaire. À en juger par les commentaires sur Internet, cette situation se rencontre rarement, mais cela vaut la peine d'essayer.

Avec cette méthode, lorsqu'un utilisateur remplit et envoie un formulaire, le déclencheur envoie un événement gtm.formSubmit au tableau dataLayer.

Remarque : Avant d'accéder aux paramètres, assurez-vous que la balise Page View est activée dans Google Tag Manager pour toutes les pages du site.

Étape 1. Activer les variables de formulaire

Pour cela, ouvrez le menu Variables dans GTM, cliquez sur Configurer , et sélectionnez toutes les variables dans la section Formulaires :

Étape 2. Ajustez la gâchette

Vous avez besoin d'un identifiant de formulaire ou d'un attribut de classe de formulaire pour créer un déclencheur. Vous pouvez les voir dans le code HTML en cliquant avec le bouton droit sur votre formulaire et en cliquant sur Explorer l'élément dans Firefox ou Afficher le code dans Chrome :

Dans notre exemple, l'identifiant du formulaire est send-request-form, que nous utiliserons lors de la configuration du déclencheur.

Allez dans le menu Triggers , cliquez sur New , ouvrez Trigger Settings et sélectionnez Submit Form :

Choisir le type de déclencheur dans Google Tag Manager

Dans la fenêtre qui s'ouvre, vous verrez deux cases à cocher :

Attendre les balises – Si vous activez cette option, le formulaire ne sera pas envoyé tant que toutes les balises qui lui sont associées ne seront pas activées ou que le délai spécifié n'aura pas expiré.
Vérifier la validation – Il est préférable d'activer cette option. Sinon, le déclencheur se déclenchera même si l'utilisateur n'a pas rempli les champs obligatoires.

Après avoir activé la vérification des erreurs, des paramètres supplémentaires s'affichent. Si vous activez le déclencheur, indiquez l'URL de la page qui contient votre formulaire. Et si vous activez le déclencheur, indiquez l'ID du formulaire que nous avons mentionné ci-dessus :

Trouvez un nom pratique et compréhensible pour le déclencheur, tel que Soumettre une demande, et enregistrez-le.

Étape 3. Vérifiez si le déclencheur fonctionne

Avant de publier des modifications dans un conteneur, utilisez le mode aperçu dans Google Tag Manager. Ouvrez la page avec le formulaire, remplissez-le et appuyez sur envoyer. Dans la console de débogage, un événement gtm.formSubmit devrait apparaître.

Si cet événement n'apparaît pas, cette méthode de suivi ne fonctionnera pas pour vous. Dans ce cas, essayez l'une des autres méthodes décrites dans cet article.

Si l'événement apparaît, il est encore nécessaire d'effectuer un test supplémentaire pour vérifier si le déclencheur fonctionne correctement. Ouvrez un formulaire, laissez un champ obligatoire vide et soumettez le formulaire. Si un événement gtm.formSubmit apparaît à nouveau dans la console de débogage, le déclencheur intégré ne fonctionne pas correctement et ne vous aidera pas. Si l'événement n'a pas été transféré, tant mieux ! Passez aux étapes suivantes.

Étape 4. Créez la balise

Vous devez maintenant créer une balise qui enverra des informations à Google Analytics indiquant que le formulaire a été envoyé. Pour ce faire, allez dans le menu Balises , cliquez sur Nouveau, ouvrez Configuration des balises et sélectionnez Google Analytics – Universal Analytics.

Pour plus de clarté, vous pouvez nommer la balise de la même manière que le déclencheur. Ensuite, remplissez les champs suivants :

Type de balise : sélectionnez {{Paramètres Google Analytics}}
Type de piste - sélectionnez "Événement"
Catégorie - identique à la balise et au déclencheur pour plus de commodité
Intervention – Envoi
Libellé - par exemple, {{Form ID}})
Non-interaction - laissez "Faux"

Si vous souhaitez activer la balise, sélectionnez le déclencheur que vous avez créé à l'étape 3 et cliquez sur Enregistrer :

Formulaire de configuration des balises dans Google Tag Manager

C'est prêt! Vous pouvez vérifier le fonctionnement de la balise générée lors de la soumission d'un formulaire à l'aide du mode d'aperçu de Google Tag Manager ou à l'aide du rapport d'événements en temps réel dans Google Analytics.

Étape 5. Configurez votre cible dans Google Analytics

Une fois que vous avez publié le conteneur avec les modifications, vous devez configurer la cible dans Google Analytics pour envisager de soumettre des formulaires en tant que conversions. Pour ce faire, ajoutez votre propre objectif dans les paramètres d'affichage de Google Analytics. Sélectionnez le type d'événement et renseignez les champs Catégorie, Action et Raccourci comme vous l'avez fait lors de la configuration de la balise dans Google Tag Manager :

panneau d'administration dans Google Analytics

Enregistrez la cible. Fait. Vous avez mis en place le suivi des formulaires sans modifier aucun code sur votre site !

Méthode 3. Déclencheur de disponibilité d'élément dans Google Tag Manager

Si une fenêtre apparaît sur le site avec un remerciement ou un message de soumission réussie après l'envoi d'un formulaire, vous pouvez essayer un autre déclencheur GTM intégré. Il se déclenche lorsqu'un élément particulier apparaît à l'écran (dans notre cas, une fenêtre contextuelle) et envoie un événement gtm.elementVisibility au dataLayer.

Pour configurer ce déclencheur, vous devez connaître le sélecteur CSS de l'élément surveillé. Pour trouver ce sélecteur, cliquez avec le bouton droit sur la fenêtre et sélectionnez Afficher le code . Vous recherchez la ligne suivante :

Pour copier le sélecteur CSS, faites un clic droit sur la ligne et sélectionnez Copier - Copier le sélecteur :

Dans notre exemple, le sélecteur ressemble à ceci : #webinar_marketing_automation > div.

Créez ensuite un nouveau trigger en sélectionnant le type Element Visibility :

Remplissez les champs suivants :

Nom du déclencheur - par exemple, "Obtenir l'enregistrement du webinaire"
Méthode de sélection – Sélecteur CSS
Sélecteur d'élément – Insérez la valeur que vous avez copiée à partir du code HTML de la fenêtre contextuelle.
Règle de déclenchement - Si vous avez un formulaire sur la page, laissez l'option "Une fois par page". S'il existe plusieurs formulaires et qu'un message apparaît, vous pouvez sélectionner "Une fois par élément".

Sélecteur d'élément dans le menu Google Tag Manager

Cochez ensuite la case "Enregistrer les modifications DOM".
Conditions d'activation du déclencheur - En sélectionnant "Certains événements de visibilité", vous pouvez spécifier la page sur laquelle le message ou le texte contextuel apparaît.
Enregistrez le déclencheur.

options avancées dans le menu de Google Tag Manager

Après avoir créé le déclencheur Element Availability, vous devez ajuster les mêmes paramètres que ceux décrits en détail dans la méthode 2 :

Ajoutez une nouvelle balise à GTM qui enverra les données de soumission de formulaire à Google Analytics et joignez-y le déclencheur créé.
Prévisualisez le fonctionnement de la balise lorsque le formulaire est soumis.
Dans Google Analytics, définissez la cible de l'événement pour suivre les conversions.

Méthode 4. Suivre les formulaires qui utilisent AJAX

Si les formulaires de votre site Web utilisent la technologie AJAX, les données sont transférées du navigateur vers le serveur en arrière-plan et la page ne se recharge pas. Pour configurer le suivi de la soumission des formulaires AJAX, vous pouvez utiliser ce script de Lunametrics :

    <script id="gtm-jq-ajax-listen" type="text/javascript"> (function() { 'use strict' var $; var n = 0; init(); function init(n) { // Ensure jQuery is available before anything if (typeof jQuery !== 'undefined') { // Define our $ shortcut locally $ = jQuery; bindToAjax(); // Check for up to 10 seconds } else if (n < 20) { n++; setTimeout(init, 500); } } function bindToAjax() { $(document).bind('ajaxComplete', function(evt, jqXhr, opts) { // Create a fake element for magically simple URL parsing var fullUrl = document.createElement('a'); fullUrl.href = opts.url; // IE9+ strips the leading slash from a.pathname because who wants to get home on time on Friday anyways var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname; // Manually remove the leading question mark, if there is one var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search; // Turn params and headers into objects for easier reference var queryParameters = objMap(queryString, '&', '=', true); var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':'); // Blindly push to the dataLayer because this fires within GTM dataLayer.push({ 'event': 'ajaxComplete', 'attributes': { // Return empty strings to prevent accidental inheritance of old data 'type': opts.type || '', 'url': fullUrl.href || '', 'queryParameters': queryParameters, 'pathname': pathname || '', 'hostname': fullUrl.hostname || '', 'protocol': fullUrl.protocol || '', 'fragment': fullUrl.hash || '', 'statusCode': jqXhr.status || '', 'statusText': jqXhr.statusText || '', 'headers': headers, 'timestamp': evt.timeStamp || '', 'contentType': opts.contentType || '', // Defer to jQuery's handling of the response 'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '') } }); }); } function objMap(data, delim, spl, decode) { var obj = {}; // If one of our parameters is missing, return an empty object if (!data || !delim || !spl) { return {}; } var arr = data.split(delim); var i; if (arr) { for (i = 0; i < arr.length; i++) { // If the decode flag is present, URL decode the set var item = decode ? decodeURIComponent(arr[i]) : arr[i]; var pair = item.split(spl); var key = trim_(pair[0]); var value = trim_(pair[1]); if (key && value) { obj[key] = value; } } } return obj; } // Basic .trim() polyfill function trim_(str) { if (str) { return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); } } })(); /* * v0.1.0 * Created by the Google Analytics consultants at http://lunametrics15.staging.wpengine.com * Written by @notdanwilkerson * Documentation: http://lunametrics15.staging.wpengine.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/ * Licensed under the Creative Commons 4.0 Attribution Public License */ </script>
<script id="gtm-jq-ajax-listen" type="text/javascript"> (function() { 'use strict' var $; var n = 0; init(); function init(n) { // Ensure jQuery is available before anything if (typeof jQuery !== 'undefined') { // Define our $ shortcut locally $ = jQuery; bindToAjax(); // Check for up to 10 seconds } else if (n < 20) { n++; setTimeout(init, 500); } } function bindToAjax() { $(document).bind('ajaxComplete', function(evt, jqXhr, opts) { // Create a fake element for magically simple URL parsing var fullUrl = document.createElement('a'); fullUrl.href = opts.url; // IE9+ strips the leading slash from a.pathname because who wants to get home on time on Friday anyways var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname; // Manually remove the leading question mark, if there is one var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search; // Turn params and headers into objects for easier reference var queryParameters = objMap(queryString, '&', '=', true); var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':'); // Blindly push to the dataLayer because this fires within GTM dataLayer.push({ 'event': 'ajaxComplete', 'attributes': { // Return empty strings to prevent accidental inheritance of old data 'type': opts.type || '', 'url': fullUrl.href || '', 'queryParameters': queryParameters, 'pathname': pathname || '', 'hostname': fullUrl.hostname || '', 'protocol': fullUrl.protocol || '', 'fragment': fullUrl.hash || '', 'statusCode': jqXhr.status || '', 'statusText': jqXhr.statusText || '', 'headers': headers, 'timestamp': evt.timeStamp || '', 'contentType': opts.contentType || '', // Defer to jQuery's handling of the response 'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '') } }); }); } function objMap(data, delim, spl, decode) { var obj = {}; // If one of our parameters is missing, return an empty object if (!data || !delim || !spl) { return {}; } var arr = data.split(delim); var i; if (arr) { for (i = 0; i < arr.length; i++) { // If the decode flag is present, URL decode the set var item = decode ? decodeURIComponent(arr[i]) : arr[i]; var pair = item.split(spl); var key = trim_(pair[0]); var value = trim_(pair[1]); if (key && value) { obj[key] = value; } } } return obj; } // Basic .trim() polyfill function trim_(str) { if (str) { return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); } } })(); /* * v0.1.0 * Created by the Google Analytics consultants at http://lunametrics15.staging.wpengine.com * Written by @notdanwilkerson * Documentation: http://lunametrics15.staging.wpengine.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/ * Licensed under the Creative Commons 4.0 Attribution Public License */ </script>

Ce code vérifie si votre formulaire utilise vraiment AJAX, puis crée la variable et le déclencheur dans Google Tag Manager.

Étape 1. Créez une balise pour vérifier le fonctionnement de votre formulaire

Dans Google Tag Manager, ouvrez Balises , cliquez sur Nouveau , sur Configuration des balises , puis sélectionnez HTML personnalisé . Copiez le code ci-dessus et collez-le dans la zone de texte. Spécifiez toutes les pages comme déclencheurs :

Activez ensuite l'aperçu GTM, ouvrez la page du formulaire, remplissez le formulaire et soumettez-le.

Couche de données dans Google Tag Manager

Si dans la console de débogage un événement ajaxComplete apparaît (comme dans la capture d'écran ci-dessus), alors votre formulaire utilise AJAX et cette méthode de suivi vous convient. Dans ce cas, lisez plus loin.

Étape 2. Créer une variable de couche de données

Si vous cliquez sur l'événement ajaxComplete dans la console de prévisualisation, puis ouvrez l'onglet Couche de données, vous verrez quelles informations sont transmises au tableau de niveau de données après l'envoi du formulaire.

Nous sommes intéressés par la ligne de réponse dans ce code ; il contient un texte indiquant que le formulaire a été soumis avec succès :

Cette ligne peut être utilisée pour créer la variable et le déclencheur dans Google Tag Manager. Ouvrez la section Variables dans GTM, cliquez sur Créer , et sur l'écran Configuration de variable, sélectionnez Variable de couche de données. Dans le champ Data Layer Variable Name, écrivez attributs.response (il est possible de nommer deux variables de la même manière) et enregistrez les paramètres.

Pourquoi saisir attributs.response au lieu de response ? Parce qu'attributs est un objet qui contient la clé de réponse et sa valeur. Ce faisant, nous indiquons à GTM le chemin exact vers les données qui nous intéressent.

Après avoir créé une variable, il est nécessaire de la vérifier. Pour cela, soumettez un formulaire en mode aperçu. Cliquez sur l'événement ajaxComplete et ouvrez l'onglet Variables dans Google Tag Manager. Si vous voyez la variable attributs.response et le texte sur l'envoi réussi du formulaire, cela signifie que vous avez tout configuré correctement.

Étape 3. Créer le déclencheur

Dans la section Configuration du déclencheur, cliquez sur Créer, puis sur Configuration du déclencheur et sélectionnez le type d'événement Utilisateur . Spécifiez ajaxComplete dans le champ Nom de l'événement. Ensuite, comme condition d'activation du déclencheur, sélectionnez Certains événements personnalisés et enregistrez une condition : la variable attributs.response contient {entrez votre texte personnalisé sur l'envoi réussi du formulaire}.

Après cela, il reste :

Ajout d'une nouvelle balise de suivi des événements à GTM qui enverra les informations de soumission du formulaire à Google Analytics et y attachera le déclencheur créé.
Utilisation du mode Aperçu pour vérifier le fonctionnement de la balise lors de la soumission d'un formulaire.
Définition de la cible de l'événement pour suivre les conversions dans Google Analytics.

Nous avons décrit ces paramètres en détail ci-dessus dans la section Méthode 2. Envoyer le déclencheur de formulaire dans Google Tag Manager.

Méthode 5. Événements DataLayer comme déclencheur

Le suivi des formulaires à l'aide de la méthode dataLayer .push est, à notre avis, la solution la plus fiable et la plus polyvalente. Le seul inconvénient est que si vous ne comprenez pas le code, vous aurez besoin de l'aide de développeurs.

Préparer les spécifications techniques pour les développeurs
Faites une liste des paramètres que vous souhaitez transférer dans le dataLayer une fois le formulaire soumis avec succès. Demandez à vos développeurs d'ajouter ce code à toutes les pages contenant des formulaires que vous souhaitez surveiller :

dataLayer.push({
'événement':'Formulaires',
'variable' : 'valeur'
})

Où:

Event est le nom d'un événement. Vous pouvez le remplacer par n'importe quel événement qui vous convient.
Variable est un ensemble de toutes les variables que vous souhaitez transférer avec un événement.

Une fois que vos programmeurs ont configuré la méthode dataLayer.push pour tous les formulaires, vous pouvez vérifier son fonctionnement. Pour cela, incluez un aperçu dans Google Tag Manager et remplissez le formulaire sur votre site Web. Dans la console de débogage, il devrait y avoir un nouvel événement (dans notre exemple, il s'appelle OWOX). Lorsque vous cliquez sur un événement et que vous accédez à l'onglet dataLayer, vous verrez tous les paramètres transférés vers le tableau de données :

Dans l'exemple de notre événement dans la capture d'écran ci-dessus (téléchargement d'un fichier PDF depuis le blog), nous considérons comment configurer le suivi avec GTM.

Commencez par créer toutes les variables utilisateur requises : eventCategory, eventAction, eventLabel, etc. Sélectionnez ensuite le type de variable dans la section Variables définies par l'utilisateur et saisissez un nom de variable entre accolades : {{eventCategory}} :

Créez ensuite un déclencheur de type Événement personnalisé. Dans les paramètres, spécifiez le nom de l'événement et configurez le déclencheur pour qu'il se déclenche sur tous les événements personnalisés :

Menu de configuration du déclencheur dans Google Tag Manager

Créez ensuite une balise qui transmettra les événements à Google Analytics. Définissez le type de balise sur Google Analytics – Universal Analytics et définissez le type de suivi sur Événement.

De plus, remplissez ces champs :

Catégorie – {{eventCategory}}
Action – {{eventAction}}
Étiquette : {{eventLabel}}

Ensuite, sélectionnez une variable {{Paramètres Google Analytics}} et le déclencheur que vous avez créé à l'étape précédente :

Tout est prêt. Il ne reste plus qu'à vérifier si la balise fonctionne en mode aperçu GTM et dans les rapports Google Analytics en temps réel.

Combien de temps les utilisateurs passent à remplir vos formulaires

Maintenant que vous pouvez savoir combien d'utilisateurs ont rempli le formulaire avec succès, il sera utile de savoir quels problèmes ont été rencontrés par ceux qui ne l'ont pas rempli.

Vos développeurs doivent ajouter au dataLayer les noms et les valeurs de tous les paramètres requis pour l'analyse des formulaires. Cela vous aidera à suivre :

Délai entre l'ouverture de la page et l'activation du champ
Temps entre l'activation du champ et la désactivation du champ
Délai entre l'activation du premier champ et la première soumission du formulaire
Délai entre l'activation du premier champ et la soumission réussie du formulaire
Délai entre l'activation du premier champ et l'échec de la soumission du formulaire
Il est temps d'obtenir une réponse du serveur concernant la soumission réussie d'un formulaire
Il est temps d'obtenir une réponse du serveur concernant l'échec de la soumission d'un formulaire
Délai entre l'activation du formulaire et le moment où un utilisateur quitte le formulaire (sans le soumettre avec succès)

Une fois que vous avez configuré la collecte de ces données dans Google Analytics, vous pourrez importer ces données dans Google BigQuery, par exemple en utilisant OWOX BI. Ensuite, vous pouvez créer n'importe quel rapport d'analyse de formulaire dans Google Sheets à l'aide du module complémentaire gratuit OWOX BI BigQuery Reports.

Ces rapports vous aideront à trouver et à résoudre les problèmes d'utilisation de vos formulaires et ainsi à augmenter votre taux de conversion.

Voici quelques exemples de tels rapports et les questions auxquelles ils peuvent répondre :

1. Lors de l'interaction avec quels champs de formulaire les utilisateurs rencontrent-ils le plus souvent une erreur ?

2. Combien de temps les utilisateurs passent-ils à remplir le formulaire ?

3. Combien de temps les utilisateurs passent-ils à remplir le formulaire et de quoi dépend-il ?

PS Si vous avez besoin d'aide pour configurer l'analyse des formulaires et créer un système de mesures personnalisé pour votre entreprise, envoyez-nous un e-mail à [email protected] ou remplissez le formulaire de contact sur le site Web d'OWOX.