Google Tag Manager - La couche de données

Une couche de données peut être considérée comme un objet contenant toutes les informations à transmettre et à traiter avec Google Tag Manager. C'est un concept un peu technique. Le terme couche de données est utilisé pour désigner la structure de données utilisée par Google Tag Manager pour stocker, traiter et transmettre des données entre votre site Web / blog et le gestionnaire de balises.

Pour l'élaborer davantage, une couche de données peut alimenter les données dans votre outil d'analyse sur votre visiteur. En prenant une autre perspective pour la définition, la couche de données est en fait une liste d'exigences et d'objectifs commerciaux pour chaque sous-ensemble du contexte numérique.

Prenons un exemple de site Web de commerce électronique, les exigences commerciales peuvent inclure -

Informations transactionnelles, ayant les détails sur ce qui a été acheté
Données des visiteurs, concernant qui a acheté
Autres détails sur l'achat, tels que l'endroit où l'achat a été effectué et à quelle heure
Enfin, les informations sur d'autres facteurs, tels que si le visiteur s'est abonné ou non aux mises à jour par e-mail

Ainsi, en un mot, la couche de données contient des informations qui peuvent être utilisées par différents outils / utilisateurs / parties prenantes selon les besoins.

Dans Google Tag Manager, dataLayer est un tableau JavaScript. Il se compose de paires clé-valeur. Voici un exemple rapide de dataLayer avec différents types de données -

dataLayer = [{
   'products': [{
      'name': 'Western Cotton',
      'tuning': 'High-G',
      'price': 49.75
   },
   {
      'name': 'Fenda Speakers',
      'tuning': 'Drop-C',
      'price': 199
   }],
   'stores': ['Hyderabad', 'Bangloer],
   'date': Sat Sep 13 2017 17:05:32 GMT+0530 (IST),
   'employee': {'name': 'Raghav}
}];

Ici, nous avons différentes valeurs telles qu'un tableau d'objets (les produits), des valeurs numériques (le prix), un tableau de chaînes (magasins), un objet date et un objet (nom).

Par ailleurs, lorsque vous placez le code de conteneur Google Tag Manager sur votre site Web, la couche de données est automatiquement créée.

En soi, la couche de données est un concept assez complexe à comprendre du premier coup. Ce chapitre fournira plus d'informations sur la façon d'interagir avec la couche de données.

Événements de la couche de données

Un exemple rapide d'événement de couche de données peut être, un formulaire d'inscription à la newsletter, qui ne peut pas être facilement suivi avec les écouteurs automatiques GTM. Un développeur de site Web peut vous aider à pousser un événement de couche de données une fois qu'un nouvel abonné a entré son e-mail sur votre site Web. Le code de cet événement devrait ressembler à ceci -

push({‘event’: ‘new_subscriber’});

Si vous le souhaitez, vous pouvez demander à votre développeur des informations supplémentaires, telles que l'emplacement du formulaire. Ceci est obligatoire s'il y a plus d'un formulaire sur votre site Web. Cela peut être réalisé en utilisant le code suivant.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
   'formLocation': ‘footer’,
   'event': new_subscriber
});

En outre, Google Tag Manager pousse par défaut un certain ensemble de valeurs vers la couche de données des applications Web. Ces valeurs sont -

gtm.js - Poussé vers la couche de données dès que Google Tag Manager est prêt à fonctionner
gtm.dom - Poussé vers la couche de données lorsque le DOM est prêt
gtm.load - Poussé vers la couche de données lorsque la fenêtre est complètement chargée

Inspection de la couche de données

Comme nous le savons déjà, certains événements sont créés à la suite de toute interaction à l'écran.

Par exemple, considérons cet événement de chargement de page simple. Pour consulter les événements, vous devez exécuter le débogueur. Une fois le débogueur en cours d'exécution (en mode aperçu), visitez le blog. Si vous regardez la fenêtre de résumé dans le coin inférieur gauche, voici ce que vous verrez -

Step 1 - Cliquez sur Window Loaded puis sur Data Layer.

Les informations affichées dans l'onglet Data Layer concernent l'événement Window Loaded.

Il est affiché sous la forme - {event: 'gtm.load', gtm.uniqueEventId: 3}

De plus, si vous souhaitez regarder de plus près, vous devez prendre en charge l'onglet console de Chrome. L'inspection d'une couche de données devient facile lorsque vous savez comment utiliser correctement le débogueur Chrome.

Step 2- Lorsque vous êtes sur votre blog, cliquez avec le bouton droit de la souris sur n'importe quelle partie de la page. Dans le menu contextuel qui s'affiche, cliquez sur Inspecter. Le panneau sera affiché sur le côté droit de l'écran, avec l'onglet Éléments activé.

Step 3- Cliquez sur Console. En mode console, cliquez sur l'icône du coin supérieur gauche pour effacer tous les messages affichés. Voir la capture d'écran suivante pour référence.

Step 4- Une fois que la fenêtre est effacée pour tous les messages précédents, tapez dataLayer, assurez-vous que la capitalisation pour L est effectuée. Ce nom est fourni par Google Tag Manager à sa couche de données. Cependant, vos développeurs peuvent lui attribuer un nom différent en cas de besoin.

Step 5- Appuyez sur Entrée après dataLayer. Il montrera les détails suivants.

Il y a trois objets et chaque objet contient des informations. Maintenant, ces objets peuvent ne pas être les mêmes pour vous, comme ils sont montrés dans la capture d'écran ci-dessus. Le dataLayer est configurable et il est tout à fait dans le contrôle du développeur de le configurer selon l'exigence.

Les valeurs présentes sont dues au gadget Blogger utilisé à cet emplacement / espace particulier. C'est la raison pour laquelle il y a certaines informations là-bas.

Si vous regardez l'objet 1, vous remarquerez que l'événement déclenché est - gtm.dom . Il est déclenché par GTM lors du chargement de la page.

De cette manière, vous pouvez inspecter la couche de données et y ajouter des informations en cas de besoin.

Variables dans la couche de données

Maintenant que nous connaissons la couche de données, essayons de lire l'une des variables à l'aide de l'interface Google Tag Manager.

Ici, nous allons essayer de lire l'événement à l'aide d'une variable de couche de données.

Si nous voyons la figure ci-dessus, l'événement variable contient le gtm.dom . Nous allons créer une variable à partir de l'interface GTM et voir comment elle se reflète dans l'onglet Variables sous Google Tag Manager.

Step 1- Dans l'interface Google Tag Manager, accédez à Variables. Faites défiler jusqu'aux variables définies par l'utilisateur. Cliquez sur NOUVEAU.

Step 2 - Donnez un nom à cette nouvelle variable, appelons-la varEvent.

Step 3 - Cliquez sur Choisir un type de variable pour commencer la configuration…

Step 4 - Sélectionnez Variable de couche de données dans la liste.

Step 5 - Lorsque vous sélectionnez Variable de couche de données, vous devrez fournir le nom et la version.

Ce nom proviendra de la couche de données réelle de Google Tag Manager. Comme mentionné précédemment, la variable que nous allons suivre est - event.

Step 6 - Entrez l'événement dans le nom de la variable de la couche de données.

Step 7 - Cliquez sur ENREGISTRER.

Step 8 - Cliquez sur Aperçu pour voir les modifications reflétées dans le débogueur.

Step 9- Une fois la page chargée, cliquez sur Fenêtre chargée puis sur Variables. Faites défiler jusqu'au bas de la section Variables, vous verrez varEvent, comme mis en évidence dans la capture d'écran ci-dessus.

Comme le montre la capture d'écran ci-dessus, la valeur sera gtm.load.

De cette façon, on peut inspecter la couche de données et capturer les valeurs dans la couche de données selon les besoins.