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. Les événements ou les variables peuvent être transmis via la couche de données, et les 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, par exemple lorsqu'un utilisateur clique sur un bouton, votre couche de données peut être configurée pour rendre ces données disponibles pour vos balises. L'objet de 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 facilement les informations ajoutées à la couche de données de manière organisée et prévisible, plutôt que d'analyser des variables, des informations sur les transactions, des catégories de pages et d'autres signaux disséminés sur votre page. Une implémentation de couche de données contenant des variables et des valeurs associées garantit que les données pertinentes sont disponibles lorsque vos balises en ont besoin.

Installation

Pour les installations de pages Web avec Tag Manager, vous devez créer une couche de données. Le code en surbrillance ci-dessous 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 depuis le 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 en surbrillance ci-dessous:

<!-- 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 selon le principe du "premier arrivé, premier sorti" : chaque message est traité un par un, dans l'ordre de sa réception. Si le message est un événement, toutes les balises dont les conditions de déclenchement ont été remplies se déclencheront avant que Tag Manager ne passe au message suivant.

Si un appel gtag() ou dataLayer.push() est effectué par du code sur 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é une fois que tous les autres messages en attente ont été évalués. Cela signifie que la disponibilité des valeurs mises à jour de la couche de données pour le prochain événement n'est pas garantie. Pour gérer ces cas de figure, vous devez ajouter un nom d'événement à un message lorsqu'il est transmis à la couche de données, puis écouter ce nom d'événement avec un déclencheur d'événement personnalisé.

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. Elle est utilisée par les écouteurs d'événements JavaScript pour déclencher des balises lorsqu'un utilisateur interagit avec des éléments du 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 du site Web tels que des liens, des boutons, des défilements, etc.

Cette fonctionnalité est possible en appelant dataLayer.push() lorsqu'un événement se produit. La syntaxe permettant d'envoyer un événement avec dataLayer.push() est la suivante:

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

event_name est une chaîne décrivant l'événement (par exemple, 'login', purchase ou search).

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

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

Vous pouvez transmettre dynamiquement des variables de couche de données à cette couche 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 visionnée par le visiteur, 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'});

'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.

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

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

Une seule action, plusieurs variables

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

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

Conserver les variables de couche de données

Pour conserver les variables de couche de données entre les pages Web, appelez dataLayer.push() une fois que la couche de données a été 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 dans Tag Manager lors du chargement du conteneur, 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 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 pour l'ensemble des pages (par exemple, visitorType) doivent être déclarées dans la couche de données sur chaque page de votre site Web. Bien qu'il ne soit pas nécessaire d'insérer 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 la page sur la page d'inscription à l'aide d'une variable appelée pageCategory, vos pages de produits et d'achat doivent également utiliser la variable pageCategory.

Dépannage

Voici quelques conseils pour résoudre les problèmes liés à la couche de données:

N'écrasez pas la variable window.dataLayer:lorsque vous utilisez directement la couche de données (par exemple, dataLayer = [{'item': 'value'}])), toutes les valeurs existantes de dataLayer seront écrasées. Les installations Tag Manager doivent instancier la couche de données aussi haut que possible dans le code source, au-dessus de l'extrait du conteneur, à l'aide de window.dataLayer = window.dataLayer || [];. Une fois la dataLayer déclarée, utilisez dataLayer.push({'item': 'value'}) pour lui ajouter des valeurs supplémentaires. Si ces valeurs doivent être disponibles pour Tag Manager lors du chargement de la page, cet appel dataLayer.push() doit également être 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 la casse appropriée, la transmission 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 la couche de données doivent être entourés de guillemets.

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

Faites en sorte que les noms des variables soient cohérents sur toutes les pages:si vous utilisez différents noms de variables pour le même concept sur différentes pages, vos balises ne pourront pas se déclencher de façon cohérente aux emplacements souhaités.

Non:

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

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

Bon:

// 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 couche de données lancé 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 modifier la valeur du paramètre de la couche de données dans votre balise Google ou votre extrait conteneur Tag Manager en indiquant le nom de votre choix.

gtag.js

Ajoutez un paramètre de requête nommé "l" à l'URL pour définir le nom de la nouvelle couche de données (par exemple, l=myNewName). Mettez à jour toutes les instances de dataLayer dans l'extrait de code de la 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

Dans l'extrait conteneur, remplacez la valeur du paramètre de couche de données (en surbrillance ci-dessous) par le nom de votre choix.

<!-- 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 (par exemple, lors de la déclaration de la couche de données au-dessus de l'extrait, ou lors de l'envoi d'événements ou de variables de couche de données dynamiques à la couche de données à l'aide de la commande .push()) doivent être ajustées pour refléter le nom de votre couche de données personnalisée:

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

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

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

set

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

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

get

La fonction get sur le modèle de données abstrait vous permet de récupérer les valeurs 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 {
    // ...
  }
})

reset

La fonction reset sur le modèle de données abstrait vous permet de réinitialiser les données de la couche de données. Cette approche est particulièrement utile avec une page qui reste ouverte et que la taille du calque de données continue 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();
})