Google Tag Manager (GTM) est un excellent outil pour améliorer l'analyse et le suivi des sites web. Et le data layer est l'une des fonctionnalités qui permet de faire passer le suivi au niveau supérieur.
Un data layer est un objet JavaScript qui collecte des détails sur les interactions des utilisateurs sur votre site web. Grâce à lui, vous pouvez collecter pratiquement toutes les données, depuis les vues des produits jusqu'au système d'exploitation de l'utilisateur. L'utilisation des data layers dans GTM vous permet de configurer des tags et des déclencheurs de suivi plus ciblés, offrant ainsi un meilleur aperçu du comportement des utilisateurs.
Nous avons donc créé un guide complet sur le data layer qui couvrira de nombreux aspects de sa mise en œuvre et de son utilisation dans Google Tag Manager. Nous vous expliquerons ce qu'est un data layer, ses cas d'utilisation, sa mise en œuvre sur le site web, comment le créer dans Tag Manager, comment tester la configuration et les erreurs courantes lors de la mise en place.
C'est parti !
Le data layer est un objet JavaScript utilisé pour transmettre des données aux tags. Il vous permet de transférer des événements ou des variables et de définir des déclencheurs en fonction de valeurs de variables spécifiques. Le data layer est utilisée à la fois dans Google Tag Manager et gtag.js.
Le data layer est un intermédiaire entre votre site Web et Google Tag Manager, fonctionnant comme un hub pour stocker des données structurées pour votre conteneur.
Vous devez créer un data layer si vous souhaitez :
Vous pouvez spécifier exactement quelles données vous souhaitez stocker dans cette couche. Il existe deux méthodes pour créer le data layer et le remplir avec les paramètres nécessaires au suivi, que nous examinerons dans la section suivante.
GTM lit et prend les valeurs nécessaires dans le data layer et les envoie à des outils d'analyse tels que Google Analytics, Google Ads, Facebook Pixel, etc.
Dans Google Tag Manager, le dataLayer est un tableau, comme indiqué par les « [] », et il contient un objet, représenté par les « { } », comme indiqué dans le script ci-dessous :
dataLayer = [{}];Les éléments d’un data layer sont appelés variables et sont formatés sous forme de paires « clé » : « valeur » (placées dans « { } »).
GTM utilise une variable de data layer appelée « event », qui est également utilisée par les détecteurs d'événements JavaScript pour déclencher des tags lorsqu'un utilisateur interagit avec des éléments d'un site web. Ainsi, d'après l'exemple ci-dessous, « event » est la « clé » et « register » est la « valeur ».
dataLayer = [{'event' : 'register' }];Pour les variables, la syntaxe est la même que pour les événements. Dans l'exemple ci-dessous, nous prenons le pays souhaité pour le suivi - « pays » (« variable_name ») est « clé » et « états-unis » est « valeur » (« variable_value »).
dataLayer = [{'country' : 'united states' }];Il existe deux méthodes pour implémenter le data layer : la déclaration et le push du data layer données. Nous allons décrire comment utiliser les deux méthodes, mais vous pouvez passer directement à celle qui vous convient le mieux.
En résumé, nous recommandons d'utiliser dataLayer.push car elle est plus populaire et couvre la plupart des besoins. De plus, cette méthode est plus sûre à utiliser, car elle ne perturbera pas les événements dans Google Tag Manager, alors qu'une mauvaise configuration des déclarations de data layer peut facilement causer des problèmes.
| Déclaration Data Layer | dataLayer.push | |
| Fonctionne le mieux pour | Valeurs nécessaires avant le chargement de page | Envoi d'informations dans le dataLayer pour les événements autres que l'événement de chargement de la page |
| Heure d'envoi de la variable de data layer | Avant l’exécution | Pendant l’exécution |
| Emplacement dans le code | Au-dessus de l'extrait de code du conteneur Google Tag Manager | N’importe où dans le code |
| Aller à la déclaration Data layer | Aller à dataLayer.push |
Pour utiliser cette méthode, l'extrait de code du data layer doit être placé au-dessus de l'extrait de code du conteneur Google Tag Manager. Dans ce cas, le data layer s'initialise avant le Tag Manager.
Dans l'ensemble, ce n'est pas une méthode populaire ou recommandée pour créer un data layer, mais elle fonctionnera si vous souhaitez créer des points de données avant le chargement du conteneur GTM et utiliser ces points de données pour la gestion des tags.
A modifié « variable_name » : « variable_value » aux paramètres nécessaires et collé le code sur la page du site Web avant le snippet GTM.
dataLayer = [{
'variable_name': 'variable_value'
}];
...
Remarque : Utiliser l'opérateur « = » pour affecter les valeurs de l'objet au tableau dataLayer.
La méthode push ajoute des éléments d'objet au data layer de manière dynamique. Contrairement à la méthode de déclaration de data layer, avec les données push, vous pouvez placer l'extrait de code du data layer n'importe où dans le code.
Cela peut être un peu déroutant, mais « dataLayer » est également une variable JavaScript accessible par toute fonction interagissant avec l'objet window. Ainsi, pour éviter les conflits avec tout autre tableau JavaScript local nommé « dataLayer », la meilleure solution consiste à utiliser le préfixe « window.dataLayer ».
Vous devrez donc utiliser le code ci-dessous pour la méthode dataLayer.push. Au lieu de « variable_name » : « variable_value », ajoutez les paramètres requis.
window.datalayer = window.dataLayer || [];
window.dataLayer.push({
'variable_name' : 'variable_value'
});Dans le bloc de code ci-dessus, le dataLayer est défini sur un dataLayer existant s'il existe déjà ; sinon, un nouveau dataLayer est créé sous la forme d'un tableau vide. L'opérateur || (OU) garantit que l'affectation a lieu si l'une de ces conditions est remplie.
De cette façon, vous éviterez de créer plusieurs déclarations, qui peuvent écraser dataLayer.
Pour de nombreux CMS de commerce électronique, il existe des plugins (y compris des plugins de Stape) qui peuvent créer une couche de données pour les événements de commerce électronique standard. Dans certains cas, cela peut ne pas suffire. Par exemple, si vous avez besoin d'événements supplémentaires ou de données supplémentaires dans les événements de la couche de données. Ou si vous utilisez une plateforme entièrement personnalisée.
Dans ce cas, vous devez contacter vos développeurs pour qu'ils créent des événements de couche de données avec la charge utile dont vous avez besoin. Cette tâche est généralement assez simple pour les développeurs et ne prend pas beaucoup de temps, bien qu'elle dépende de l'architecture de votre site ou de votre plateforme.
Quelques lignes directrices utiles :
Vous pouvez accéder aux éléments de votre tableau de data layer dans Google Tag Manager de différentes manières. Pour exploiter les données dans Google Tag Manager, assignez-les à une variable ou utilisez-les comme déclencheur d'événement. Ces variables ou événements peuvent ensuite être intégrés à vos tags, déclencheurs ou autres variables.
Ci-dessous, nous présentons trois cas d'utilisation du data layer et leur configuration dans GTM :
Prenons par exemple la valeur d’achat de t-shirts orange.
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
‘product_name’ : ‘orange t-shirt’,
'purchase_value' : '5',
‘purchase_currency’ : ‘EUR’
});
2. Choississez « Data layer variable » comme type de variable.
3. Ajoutez le nom de la variable data layer et cliquez sur « Save ».
Remarque : le champ est sensible à la casse, assurez-vous donc que le nom correspond au nom de la valeur dans le code que vous avez ajouté à la page. Dans notre cas, il s'agit de « purchase_value ».
Comme exemple de code, nous prenons la variable dataLayer qui déclenche l'événement « register » lorsqu'une personne remplit les données requises pour l'inscription et clique sur « Register ».
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event' : 'register'
});1. Allez dans Google Tag Manager Triggers → cliquez « New ».
2. Choisissez le type de déclencheur Custom event.
3. Dans le « Event name », ajoutez le nom de la même manière que le nom de la valeur dans le code, car ce champ est sensible à la casse. Cliquez sur « Save ».
L'exemple de variable data layer ci-dessous déclenche des événements d'achat et crée des informations d'achat.
dataLayer = [{
'event': 'purchase',
'purchase_info': {
'purchase_amount': 5,
'purchase_curency': 'EUR'
}
}];Vous pouvez utiliser les variables du code à la fois comme variables et comme déclencheurs d'événements dans Google Tag Manager. Vérifiez le processus de configuration des étapes précédentes pour les variables et les événements.
Le data layer n'existe pas dans le Google Tag Manager côté serveur comme il existe dans le GTM côté client.
Cependant, le sGTM possède un objet appelé Client qui vérifie les requêtes HTTP provenant du GTM web. Si la requête contient des données spécifiques, le Client transforme les données de la requête en données d'événement. Les tags sont également utilisés pour envoyer les données du conteneur GTM web au serveur GTM.
Pour remplir les points de données du conteneur GTM du serveur, vous devez choisir la méthode que vous utiliserez pour envoyer les données du Web au GTM du serveur ; parmi les plus populaires, on trouve :
Cette méthode est particulièrement efficace si vous mettez en place un suivi côté serveur pour Google Ads ou Floodlight, car les deux reposent uniquement sur les tags GA4.
1. Dans Web GTM, créez un tag avec la configuration « Google Analytics: GA4 event ».
2. Vous trouverez des champs prédéfinis pour ces données, et vous pourrez attribuer des variables de data layer à chaque paramètre individuellement.
L'avantage principal de l'utilisation de Data Tag/Data Client est qu'il envoie automatiquement le data layer et d'autres données courantes du web au serveur GTM.
1. Créez un nouveau tag dans le conteneur web GTM et choisissez « Data Tag » comme configuration de tag
Remarque : Vous devez ajouter le Data Tag à la galerie GTM.
2. Dans la configuration du tag, cochez les deux cases « Send common data » et « Send all from DataLayer ».
Le système analysera automatiquement les données dans le GTM web et transmettra toutes les informations disponibles au GTM serveur.
| Consultez notre article de blog sur la création d’un data layer pour le Google Tag Manager côté serveur pour en savoir plus sur le processus de configuration. |
Remarque : ci-dessous, nous décrivons comment configurer Google Tag pour envoyer des données ; si vous avez déjà configuré Google Tag, il n'est pas nécessaire de créer une nouveau tag. Il vous suffit de sauter les étapes ci-dessous et de passer directement à la section sur la création d'une dimension personnalisée.
Dans ce cas, il vous suffit d'ajouter des paramètres comme dans le code du data layer dans la section « Shared event settings ».
1. Dans la section "Tags" de GTM, cliquez sur "New" et choisissez "Google Tag" comme type de tag.
2. Ajoutez votre identifiant de mesure GA4 et, dans la section « Shared event settings », répertoriez les paramètres que vous avez ajoutés à votre code.
3. Comme déclencheur, choississez « Page View – All Pages ».
Il existe une liste de paramètres standard. Si les données que vous souhaitez suivre à l'aide du data layer ne figurent pas dans les événements recommandés par Google Analytics, vous devez les ajouter manuellement dans votre compte GA4 en tant que dimensions personnalisées. Après l'avoir ajouté, il apparaîtra dans les rapports GA4.
1. Dans le compte Google Analytics, cliquez sur « Admin » → « Custom definitions ».
2. Cliquez sur « Create custom dimension » et remplissez le paramètre requis :
Cliquez sur « Save ».
Pour vérifier si Google Tag Manager intercepte la variable, vous devez suivre quelques étapes simples similaires au débogage habituel dans GTM.
1. Clique sur « Preview » et ajoutez l'URL du site web que vous déboguez.
2. Passez à la section de l'onglet « Variable » et si tout fonctionne, vous verrez les données nécessaires dans cet onglet.
Si vous rencontrez des problèmes avec le mode débogage dans GTM, consultez nos guides :
Pour vérifier si Google Analytics capture les données, allez dans « Admin » → « DebugView ».
Si vous constatez que les variables ou les événements ne sont pas transmis, c'est probablement parce que vous n'utilisez pas la casse appropriée pour les noms d'objets ou que vous avez oublié les guillemets.
Bon exemple :
dataLayer.push({'variable_name': 'variable_value'});Mauvais exemple :
datalayer.push({'variable_name': 'variable_value'});Bon exemple :
dataLayer.push({'variable_name': 'variable_value'});Mauvais exemple :
dataLayer.push({variable_name': 'variable_value'});Si vous ne parvenez pas à déclencher les tags à tous les endroits nécessaires sur le site Web, vérifiez les noms des variables sur les différentes pages.
L'erreur la plus fréquente est l'utilisation de majuscules et de minuscules incohérentes dans les noms de variables sur les différentes pages. Vous devez donc vérifier les noms.
Bon exemple :
// Homepage:
dataLayer.push({'variable_name': 'variable_value'});
// Product page:
dataLayer.push({'variable_name': 'variable_value'});Mauvais exemple :
// Homepage:
dataLayer.push({'variable_name': 'variable_value'});
// Product page:
dataLayer.push({'variable Name': 'variable_value'});Le data layer de Google Tag Manager (GTM) est un composant essentiel de GTM. Il nous permet de capturer les interactions des utilisateurs avec votre site web tout en fournissant des données supplémentaires sur l'interaction ou son contexte. Le data layer est essentiel si vous souhaitez créer une meilleure structure de données.
Le concept de data layer est assez difficile à mettre en œuvre, et il faudra très probablement faire appel à des développeurs pour construire une infrastructure de suivi complexe.
Voici un bref récapitulatif :
Nous en sommes ravis ! Cliquez sur Essayer gratuitement pour vous inscrire et découvrir toutes les possibilités.
Abonnez-vous pour les mises à jour:
Pas de spam!
Uliana est Content Manager chez Stape, spécialisée en analytique et configurations d'intégration. Elle simplifie les concepts de suivi complexes en insights clairs.
Commentaires