La couche de données

La couche de données est un objet utilisé par Google Tag Manager et gtag.js pour transmettre des informations aux balises. Des événements ou des variables peuvent être transmis via la couche de données, et des déclencheurs peuvent être configurés en fonction des valeurs des variables.

Par exemple, si vous déclenchez une balise de remarketing lorsque la valeur de purchase_total est supérieure à 100 $, ou en fonction d'événements spécifiques, comme lorsqu'un utilisateur clique sur un bouton, vous pouvez configurer votre couche de données pour que ces données soient disponibles pour vos balises. L'objet de la couche de données est structuré au format JSON. Exemple :

{
  event: "checkout_button",
  gtm: {
    uniqueEventId: 2,
    start: 1639524976560,
    scrollThreshold: 90,
    scrollUnits: "percent",
    scrollDirection: "vertical",
    triggers: "1_27"
  },
  value: "120"
}

Les balises Google sont conçues pour référencer les informations ajoutées à la couche de données de manière organisée et prévisible, plutôt que d'analyser les variables, les informations sur les transactions, les catégories de pages et d'autres signaux dispersés sur votre page. Une implémentation de couche de données remplie de variables et de valeurs associées permet de s'assurer que les données pertinentes sont disponibles lorsque vos balises en ont besoin.

Installation

Pour les installations de pages Web Tag Manager, vous devez créer une couche de données. L'exemple de code suivant montre où la couche de données est établie, avant le chargement de Tag Manager.

<script>
window.dataLayer = window.dataLayer || [];
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

Dans les implémentations gtag.js standards où la balise a été copiée à partir du produit et ajoutée à une page Web, le code permettant d'établir la couche de données est fourni. Dans les implémentations personnalisées de la balise Google, ajoutez le code de la couche de données au début de votre script, comme indiqué dans l'exemple de code suivant :

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());

  gtag('config', 'TAG_ID');
</script>

Traitement des informations de la couche de données

Lorsqu'un conteneur est chargé, Tag Manager commence à traiter tous les messages push de la couche de données en file d'attente. Tag Manager traite les messages dans l'ordre d'arrivée : chaque message est traité individuellement, dans l'ordre dans lequel il a été reçu. S'il s'agit d'un événement, toutes les balises dont les conditions de déclenchement ont été remplies se déclenchent avant que Tag Manager ne passe au message suivant.

Si un appel gtag() ou dataLayer.push() est effectué par le code d'une page, dans un modèle personnalisé ou dans une balise HTML personnalisée, le message associé est mis en file d'attente et traité après l'évaluation de tous les autres messages en attente. Par conséquent, il n'est pas garanti que les valeurs mises à jour de la couche de données soient disponibles pour le prochain événement. Pour gérer ces cas, vous devez ajouter un nom d'événement à un message lorsqu'il est transmis à la couche de données, puis détecter ce nom d'événement avec un déclencheur d'événement personnalisé.

Important : Ne déployez pas le code basé sur gtag.js à l'aide de balises HTML personnalisées. Utilisez plutôt les modèles de balises natifs de Tag Manager pour Google Ads, Analytics, et Floodlight.

Important : N'utilisez pas de balises HTML personnalisées pour configurer les paramètres de consentement dans Tag Manager. Étant donné qu'ils doivent être appliqués avant le déclenchement des balises pertinentes dans un conteneur Tag Manager, vous devez appliquer les API Consent Tag Manager pour configurer le comportement par défaut et de mise à jour. L'utilisation des API Consent Tag Manager garantit que les mises à jour du consentement sont traitées avant tout élément en file d'attente dans la couche de données, de sorte que toutes les balises déclenchées par le même événement voient le même état de consentement.

Point clé : Vous pouvez utiliser Google Tag Assistant pour inspecter l'état de votre couche de données à tout moment dans une chaîne d'événements.

Utiliser une couche de données avec des gestionnaires d'événements

L'objet dataLayer utilise une commande event pour lancer l'envoi d'événements.

La balise Google et Tag Manager utilisent une variable de couche de données spéciale appelée event, qui est utilisée par les écouteurs d'événements JavaScript pour déclencher des balises lorsqu'un utilisateur interagit avec des éléments de site Web. Par exemple, vous pouvez déclencher une balise de suivi des conversions lorsqu'un utilisateur clique sur un bouton de confirmation d'achat. Les événements peuvent être appelés chaque fois qu'un utilisateur interagit avec des éléments de site Web tels que des liens, des boutons, des défilements, etc.

Pour ce faire, appelez dataLayer.push() lorsqu'un événement se produit. La syntaxe pour envoyer un événement avec dataLayer.push() est la suivante :

dataLayer.push({'event': 'event_name'});

Où event_name est une chaîne qui décrit l'événement, par exemple 'login', purchase, ou search.

Utilisez dataLayer.push() pour envoyer des données d'événement lorsqu'une action que vous souhaitez mesurer se produit. Par exemple, pour envoyer un événement lorsqu'un utilisateur clique sur un bouton, modifiez le gestionnaire onclick du bouton pour appeler dataLayer.push() :

<button onclick="dataLayer.push({'event': 'login'});">Button 1</button>

Vous pouvez transmettre des variables de couche de données à la couche de données de manière dynamique pour capturer des informations telles que les valeurs saisies ou sélectionnées dans un formulaire, les métadonnées associées à une vidéo que le visiteur regarde, la couleur d'un produit (par exemple, une voiture) personnalisée par le visiteur, les URL de destination des liens sur lesquels il a cliqué, etc.

Comme pour les événements, cette fonctionnalité est obtenue en appelant l'API push() pour ajouter ou remplacer des variables de couche de données dans la couche de données. La syntaxe de base pour définir des variables de couche de données dynamiques est la suivante :

dataLayer.push({'variable_name': 'variable_value'});

Où 'variable_name' est une chaîne indiquant le nom de la variable de couche de données à définir, et 'variable_value' est une chaîne indiquant la valeur de la variable de couche de données à définir ou à remplacer.

Exemple : Pour définir une variable de couche de données avec une préférence de couleur lorsqu'un visiteur utilise un outil de personnalisation de produit, vous pouvez transmettre la variable de couche de données dynamique suivante :

dataLayer.push({'color': 'red'});

Un seul push, plusieurs variables

Vous pouvez transmettre plusieurs variables et événements à la fois :

dataLayer.push({
  'color': 'red',
  'conversionValue': 50,
  'event': 'customize'
});

Important : Si vous transmettez une variable portant le même nom qu'une variable existante à la couche de données, la valeur existante sera remplacée par la nouvelle valeur.

Rendre les variables de couche de données persistantes

Pour rendre les variables de couche de données persistantes entre les pages Web, appelez dataLayer.push() une fois la couche de données instanciée à chaque chargement de page, puis transmettez les variables à la couche de données. Si vous souhaitez que ces variables de couche de données soient disponibles pour Tag Manager lorsque le conteneur est chargé, ajoutez un appel dataLayer.push() au-dessus du code du conteneur Tag Manager, comme indiqué ci-dessous.

<script>
window.dataLayer = window.dataLayer || [];

dataLayer.push({
 'event': 'Pageview',
 'pagePath': 'https://www.googleanalytics.dev/pancakes',
 'pageTitle': 'Pancake Event Signup',
 'visitorType': 'customer'
});
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

Chaque variable déclarée dans l'objet de la couche de données ne persiste que tant que le visiteur reste sur la page actuelle. Les variables de couche de données qui sont pertinentes sur plusieurs pages (par exemple, visitorType) doivent être déclarées dans la couche de données sur chaque page de votre site Web. Bien que vous n'ayez pas besoin de placer le même ensemble de variables dans la couche de données sur chaque page, vous devez utiliser une convention d'attribution de noms cohérente. En d'autres termes, si vous définissez la catégorie de page sur la page d'inscription à l'aide d'une variable appelée pageCategory, vos pages de produit et d'achat doivent également utiliser la variable pageCategory.

Dépannage

Voici quelques conseils de dépannage pour la couche de données :

Ne remplacez pas la variable window.dataLayer : lorsque vous utilisez directement la couche de données (par exemple, dataLayer = [{'item': 'value'}])), elle remplace toutes les valeurs existantes dans dataLayer. Les installations de Tag Manager doivent instancier la couche de données aussi haut que possible dans le code source, au-dessus de l'extrait de conteneur, à l'aide de window.dataLayer = window.dataLayer || [];. Une fois le dataLayer déclaré, utilisez dataLayer.push({'item': 'value'}) pour y ajouter des valeurs supplémentaires. Si ces valeurs doivent être disponibles pour Tag Manager lorsque la page se charge, cet appel dataLayer.push() doit également se trouver au-dessus du code du conteneur Tag Manager.

Le nom de l'objet dataLayer est sensible à la casse : si vous essayez de transmettre une variable ou un événement sans respecter la casse appropriée, le push ne fonctionnera pas.

datalayer.push({'pageTitle': 'Home'});    // Bad (datalayer in lowercase)
dataLayer.push({'pageTitle': 'Home'});    // Good (dataLayer in camel case)

dataLayer.push doit être appelé avec des objets JavaScript valides. Tous les noms de variables de couche de données doivent être placés entre guillemets.

dataLayer.push({new-variable: 'value'});      // Bad - no quote marks
dataLayer.push({'new-variable': 'value'});    // Good - proper quote marks

Veillez à ce que les noms de variables soient cohérents sur toutes les pages : si vous utilisez des noms de variables différents pour le même concept sur différentes pages, vos balises ne pourront pas se déclencher de manière cohérente dans tous les emplacements souhaités.

Déconseillé :

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitor_type': 'high-value'});

Conseillé :

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitorType': 'high-value'});

Renommer la couche de données

Le nom par défaut de l'objet de la couche de données initié par la balise Google ou Tag Manager est dataLayer. Si vous préférez utiliser un autre nom pour votre couche de données, vous pouvez le faire en modifiant la valeur du paramètre de la couche de données dans votre balise Google ou votre extrait de conteneur Tag Manager avec le nom de votre choix.

gtag.js

Ajoutez un paramètre de requête nommé "l" à l'URL pour définir le nouveau nom de la couche de données, par exemple l=myNewName. Mettez à jour toutes les instances de dataLayer dans l'extrait de balise Google avec le nouveau nom.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID&l=myNewName"></script>
<script>
  window.myNewName = window.myNewName || [];
  function gtag(){myNewName.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'TAG_ID');
</script>

Tag Manager

Remplacez la valeur du paramètre de la couche de données (mise en surbrillance ci-dessous) dans votre extrait de conteneur par le nom de votre choix.

Important : Ne remplacez pas la valeur du paramètre non mise en surbrillance.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','myNewName','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

Une fois renommé, toutes les références à votre couche de données (c'est-à-dire lorsque vous déclarez la couche de données au-dessus de l'extrait ou lorsque vous transmettez des événements ou des variables de couche de données dynamiques à la couche de données avec la commande .push()) doivent être ajustées pour refléter le nom personnalisé de votre couche de données :

<script>
  myNewName = window.dataLayer || [];
  myNewName.push({'variable_name': 'variable_value'});
</script>

Important : N'utilisez qu'une seule couche de données par page

Un seul objet dataLayer est accepté par page. Google Tag Manager et gtag.js s'appuient sur un seul tableau JavaScript global nommé window.dataLayer pour recevoir, mettre en file d'attente et traiter tous les événements et variables dans l'ordre dans lequel ils sont ajoutés. Les extraits de conteneur associent leurs écouteurs et leur logique de traitement spécifiquement à ce tableau unique. Tenter d'utiliser plusieurs instances de couche de données ou de réinitialiser incorrectement la couche de données (par exemple, en la remplaçant par window.dataLayer = [] après le chargement de GTM) peut entraîner des problèmes importants :

• Les balises peuvent ne pas se déclencher : les événements et les variables transmis à une instance de couche de données secondaire ou non surveillée seront ignorés par Google Tag Manager.
• Collecte de données incohérente : les données de suivi peuvent être divisées en tableaux distincts et isolés, ce qui entraîne des informations incomplètes ou incorrectes dans vos balises Analytics et marketing.
• Problèmes de débogage : il peut être difficile de diagnostiquer les problèmes de balisage, car le flux de données de suivi est imprévisible.

Bonne pratique : Instanciez toujours la couche de données à l'aide de window.dataLayer = window.dataLayer || []; une fois par page, généralement en haut de l'élément <head> de la page, avant l'extrait GTM ou gtag.js. Utilisez toujours dataLayer.push() pour ajouter des événements ou des variables ultérieurs. Ne remplacez ni ne réattribuez jamais la variable window.dataLayer.

Méthodes de couche de données personnalisées

Si vous transmettez une fonction à la couche de données, elle sera appelée avec cet ensemble défini sur un modèle de données abstrait. Ce modèle de données abstrait peut obtenir et définir des valeurs dans un magasin de clés-valeurs, et permet également de réinitialiser la couche de données.

Important : Pour utiliser des méthodes de couche de données personnalisées, vous devez utiliser .push pour envoyer des données à la variable dataLayer directement. Si vous utilisez gtag, la fonction sera interprétée comme une commande non valide et ignorée.

set

La fonction set du modèle de données abstrait vous permet de définir des valeurs à récupérer via get.

window.dataLayer.push(function() {
  this.set('time', new Date());
});

get

La fonction get du modèle de données abstrait vous permet de récupérer les valeurs qui ont été définies.

window.dataLayer.push(function() {
  const existingTime = this.get('time');
  if (existingTime !== null) {
    // Change behavior based on whether or not this value exists...
  } else {
    // ...
  }
})

réinitialiser

La fonction reset du modèle de données abstrait vous permet de réinitialiser les données de la couche de données. Cette fonction est particulièrement utile pour une page qui restera ouverte et dont la taille de la couche de données continuera de croître au fil du temps. Pour réinitialiser la couche de données, utilisez le code suivant :

window.dataLayer.push(function() {
  this.reset();
})