La couche de données

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

Par exemple, si vous déclenchez une campagne lorsque la valeur de purchase_total est supérieure à 100 $ou si, en fonction de des événements spécifiques, tels que lorsqu'un utilisateur clique sur un bouton, votre couche de données peut être configurés 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 des informations ajoutées au la couche de données de manière organisée et prévisible, plutôt que par le biais d'une analyse variables, informations sur les transactions, catégories de pages et autres signaux disséminés sur l'ensemble de votre page. Une implémentation de la couche de données contenant des variables et associées, vous aurez ainsi l'assurance que des données pertinentes sont disponibles lorsque vos les tags en ont besoin.

Installation

Pour les installations de pages Web Tag Manager, vous devez créer une couche de données. La le code surligné ci-dessous montre où la couche de données est établie, avant le tag Le gestionnaire est chargé.

<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 intégrations gtag.js standards où la balise a été copiée du produit et ajouté à une page Web, le code établissant la couche de données est fournies. 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 illustré dans l'exemple 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 toutes les données en file d'attente les messages push au niveau de la couche. Tag Manager traite les messages selon le principe "premier entré, premier sorti". Chaque message est traité un par un, dans l'ordre de sa réception. Si le message est un événement, les balises avec des conditions de déclenchement qui ont été remplies se déclenche avant que Tag Manager ne passe au message suivant.

Si un appel gtag() ou dataLayer.push() est effectué par le code sur une page, dans une dans un modèle, 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. Cela signifie que toute les valeurs mises à jour de la couche de données ne seront pas nécessairement disponibles pour le prochain événement. Pour gérer ces cas de figure, vous devez ajouter un nom d'événement à un message tel quel envoyées à la couche de données, puis écoutez le nom de l'événement avec un paramètre Déclencheur 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 spéciale de couche de données appelée event utilisé par les écouteurs d'événements JavaScript pour déclencher des balises lorsqu'un utilisateur interagit avec les éléments du site Web. Par exemple, vous pouvez déclencher une conversion balise de suivi lorsqu'un utilisateur clique sur un bouton de confirmation d'achat. Événements possibles : appelé chaque fois qu'un utilisateur interagit avec des éléments du site Web tels que des liens, des boutons, les défilements, etc.

Cette fonctionnalité est obtenue 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'});

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

Utiliser dataLayer.push() pour envoyer des données d'événement lorsqu'une action que vous souhaitez effectuer se produit à mesurer. 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 des informations telles que les valeurs saisies ou sélectionnées dans un formulaire, les métadonnées associées avec une vidéo que regarde le visiteur, la couleur d'un produit (une voiture, par exemple) ; personnalisées par le visiteur, les URL de destination des liens sur lesquels les utilisateurs ont 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 Pour définir des variables de couche de données dynamiques, procédez comme suit:

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

Où 'variable_name' est une chaîne qui indique le nom de la 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 utilise un outil de personnalisation de produit, vous pouvez utiliser les URL dynamiques suivantes Variable de couche de données:

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

Une seule transmission, plusieurs variables

Vous pouvez transmettre 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() après la couche de données est instanciée à chaque chargement de page, puis transfère les variables à la couche de données. Si vous souhaitez que ces variables de couche de données soient disponibles pour gestionnaire lorsque le conteneur est chargé, ajoutez un appel dataLayer.push() au-dessus de le 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 sera conservée que le visiteur reste sur la page actuelle. Variables de couche de données pertinentes sur plusieurs pages (par exemple, visitorType) doivent être déclarés dans la couche de données sur chaque de votre site Web. Même si vous n'avez pas besoin de placer le même ensemble de variables la couche de données sur chaque page, vous devez utiliser une convention d'attribution de noms cohérente. Dans Autrement dit, si vous définissez la catégorie de la page sur la page d'inscription à l'aide d'une variable appelé pageCategory, vos pages produit et d'achat doivent utiliser la méthode la variable pageCategory également.

Dépannage

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

Ne remplacez pas la variable window.dataLayer:lorsque vous utilisez les données (par exemple, dataLayer = [{'item': 'value'}]), il écrasera tous les valeurs existantes dans dataLayer. Les installations Tag Manager doivent instancier la couche de données aussi haut que possible dans le code source, au-dessus du conteneur à l'aide de window.dataLayer = window.dataLayer || [];. Une fois dataLayer déclaré, utilisez dataLayer.push({'item': 'value'}) pour lui ajouter des valeurs, et si ces doivent être disponibles dans Tag Manager lors du chargement de la page, l'appel dataLayer.push() doit être situé au-dessus du code du conteneur Tag Manager, bien.

Le nom de l'objet dataLayer est sensible à la casse:si vous essayez de transférer une variable ou un événement sans la casse appropriée, l'envoi 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. Toute la couche de données les noms de variables doivent être placés entre 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 des variables différentes pour un même concept sur des pages différentes, vos balises ne seront pas se déclencher systématiquement dans tous les endroits souhaités.

Mauvaise:

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

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

Bonne:

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

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

Renommer la couche de données

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

<!-- 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>

<!-- 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ées, toutes les références à votre couche de données (lorsque vous déclarez les 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és pour refléter votre nom de la 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 sera appelée avec ce paramètre défini sur modèle de données abstrait. Ce modèle de données abstrait peut obtenir et définir les valeurs d'une clé et permet de réinitialiser la couche de données.

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

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

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