Guide complet sur le data layer dans Google Tag Manager
Rédigé par
Uliana Lesiv
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 lors de la configuration de Google Tag Manager 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 !
Qu’est-ce que le data layer dans Tag Manager?
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.
Cas d’utilisation du data layer
Vous devez créer un data layer si vous souhaitez :
- Mettre en place un suivi fiable. Sans data layers, vous extrayez les données directement du DOM HTML (la norme utilisée pour ajouter, obtenir, modifier ou supprimer des éléments HTML sur votre site Web), puis vous envoyez les données directement au conteneur GTM. Le problème est que le DOM HTML peut changer, ce qui entraîne l'arrêt du déclenchement des balises et de la collecte des données.
- Vous ne rencontrerez pas ce problème avec le data layer puisque le conteneur GTM extrait les données du data layer de la page, qui est bien plus stable que le DOM HTML. L'enregistrement des données ne s'arrête que si quelqu'un brise le data layer de la page.
C'est pourquoi la bonne configuration d'un dataLayer Google Tag Manager est primordiale pour bâtir une infrastructure de mesure pérenne. Cette couche de données devient le langage commun et standardisé qui permet à vos outils marketing de lire et d'exploiter les interactions de vos utilisateurs sans craindre la moindre refonte technique de l'interface.
- Enrichir les données des tags dans des conditions spécifiques. Supposons que vous souhaitiez envoyer des données sur la valeur de l'événement d'achat uniquement si l'utilisateur a payé plus de 50$. Au lieu de rechercher des variables éparpillées, des détails de transaction, des catégories de page et d'autres signaux sur votre page, l'utilisation d’un data layer remplie de variables pertinentes et de leurs valeurs (dans notre cas, valeur d'achat > 50$) permet de garantir que les données nécessaires sont facilement accessibles chaque fois que vos balises en ont besoin. Cela s'avère particulièrement essentiel si vous cherchez à récupérer la valeur des conversions Google Ads avec précision et à l'attribuer dynamiquement à vos campagnes.
Comment fonctionne le data layer?
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.
Syntaxe et exemple du data layer
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' }];Initialiser dataLayer
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 |
Méthode 1: Déclaration Data layer
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.
Méthode 2: dataLayer.push
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.
Exemple et documentation sur la couche de données du commerce électronique
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 :
- Faites une copie du document, supprimez les événements dont vous n'avez pas besoin et/ou ajoutez les événements dont vous avez besoin et l'échantillon de charge utile.
- Utilisez le même format de données pour tous les événements. Il est préférable de suivre le format GA4.
- S'il ne s'agit pas d'un événement évident (par exemple, afficher un article ou ajouter au panier), décrivez en détail le moment où il doit être déclenché. Cela évitera des allers-retours inutiles entre vous et les développeurs.
- Les données utilisateur peuvent être utilisées dans pratiquement toutes les plateformes de marketing, il est important qu'elles soient disponibles dans la couche de données - leur utilisation améliorera considérablement les résultats de votre suivi.
- Essayez d'éviter les événements de la couche de données qui sont envoyés avant que l'utilisateur ne soit redirigé vers une autre page. Cela peut entraîner la perte de ces données, car les événements peuvent ne pas être réellement envoyés avant la redirection. Par exemple, si vous souhaitez envoyer un événement Lead après qu'un utilisateur a soumis un formulaire, puis que l'utilisateur est renvoyé vers la page de remerciement, la meilleure pratique consiste à envoyer cet événement dans la couche de données de la page de remerciement, plutôt qu'au moment où l'utilisateur soumet le formulaire.
- Si vous avez déjà des événements de la couche de données sur votre site, il est préférable d'utiliser des noms personnalisés pour les nouveaux événements de la couche de données et de ne pas modifier les anciens événements afin de ne pas affecter le suivi existant au cours du processus. En d'autres termes, si vous avez déjà, par exemple, add_to_cart dans la couche de données, il est préférable de créer un nouvel événement add_to_cart_v2 plutôt que de modifier l'ancien et de reconfigurer ensuite les balises en fonction des nouveaux événements.
- Veillez à vérifier la couche de données après que les développeurs ont mis en œuvre cette mesure. Parfois, même de petites erreurs dans la charge utile peuvent entraîner des problèmes de suivi.
Comment créer un Data layer dans Tag Manager?
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 :
Cad d’utilisation 1: Variables Data layer comme points de données
Exemple de code
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’
});Configuration GTM
- 1.Pour la configuration des variables, dans le conteneur GTM, allez dans Variables → cliquez sur « New » dans « User-Defined Variables ».
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 ».
Cas d’utilisation 2: Data layer pour déclencher des évènements
Exemple de code
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'
});Configuration GTM
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 ».
Cas d’utilisation 3: Variable Data layer comme variables et déclencheurs d’évènements
Exemple de code
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'
}
}];Configuration GTM
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 existe-t-il dans le GTM côté serveur?
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 server-side tracking GTM 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 :
Utilisation de Google Analytics 4
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.
Utilisation de Data Tag/Data Client
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. |
Envoyer la variable data layer dans Google Analytics 4
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 ».
Configurez Google Tag dans GTM
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 ».
Créer une dimension personnalisée dans GA4
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 :
- Nom de la dimension – le nom que vous souhaitez voir apparaître dans les rapports.
- Portée – choississez une portée d’évènement, d’utilisateur ou d’élément.
- Paramètre d’évènement - ajoutez le nom de la variable ou de l'événement tel que spécifié dans l'extrait de la couche de données (veuillez noter que les données du champ sont sensibles à la casse).
Cliquez sur « Save ».
Testez la configuration du data layer
Mode débogage GTM
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 :
Google Analytics 4
Pour vérifier si Google Analytics capture les données, allez dans « Admin » → « DebugView ».
Dépannage du data layer
Problème 1: La transmission du Data layer ne fonctionne pas
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.
Solution : utiliser la casse appropriée pour les noms d’objets et les guillemets
- Vérifiez si "dataLayer" est en casse camel.
Bon exemple :
dataLayer.push({'variable_name': 'variable_value'});Mauvais exemple :
datalayer.push({'variable_name': 'variable_value'});- Assurez-vous que tous les noms de variables sont entre guillemets.
Bon exemple :
dataLayer.push({'variable_name': 'variable_value'});Mauvais exemple :
dataLayer.push({variable_name': 'variable_value'});Problème 2 : Les tags ne se déclenchent pas
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.
Solution: des noms de variable cohérents
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'});Récapitulatif
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 recommandons d'utiliser la méthode dataLayer.push pour implémenter le data layer.
- Après l'implémentation du data layer, vous pouvez l'utiliser comme points de données, déclencheurs d'événements ou les deux.
- Si vous utilisez le suivi côté serveur, combinez le suivi côté client et côté serveur pour implémenter le data layer.
- Always check the setting in GTM Debug Mode.
- Vérifiez toujours le paramètre en mode débogage GT.
- Ajoutez des dimensions personnalisées dans GA 4 (si vous utilisez cet outil) pour voir les données dans les rapports GA4.
- Rappelez-vous les fréquentes erreurs qui provoquent le dysfonctionnement du data layer : utilisez les bonnes majuscules et des noms de variables cohérents dans tout le code que vous ajoutez, ainsi que lors de la configuration du suivi dans GTM
Vous souhaitez passer au server-side?
Essayer gratuitement
Commentaires