Conserver dataLayer dans Google Tag Manager

(Mise à jour du 19 novembre 2018 : voir cet article pour une solution plus élégante.)

Si vous connaissez votre JavaScript, vous savez que toutes les variables, fonctions, objets, ressources et données du document sont réécrites à chaque chargement de page. En d’autres termes, chaque actualisation de page construit la page à partir de zéro, et l’état du document avant l’actualisation de la page est laissé à la dérive dans l’océan de l’oubli.

La couche de données de Google Tag Manager est également une de ces entités. Il est réécrit à chaque chargement de page, il n’est donc pas possible d’avoir une variable dataLayer persister d’une page à l’autre sans utiliser de cookies ou, comme je vais le montrer dans ce guide, l’API HTML5 Web Storage. Pour l’analyse Web, c’est un peu dommage. Cela nous oblige à penser aux choses dans le cadre d’une seule page, alors que rarement quelque chose qui mérite d’être mentionné a une durée de vie aussi courte.

Avant de commencer, jetez un œil à ce que Shay Sharon a écrit de manière experte il y a deux ans à propos de la couche de données persistante. Dans sa solution, les cookies sont utilisés pour transporter le dataLayer à travers les actualisations de page. C’est un bon patch, et il remplit admirablement la tâche. Cependant, le problème avec les cookies est qu’ils peuvent être supprimés (et le sont généralement). De plus, la longueur de la chaîne de cookie est limitée (bien que 4 Ko soit encore beaucoup), et il y a toujours le fait que les cookies sont résolus à chaque chargement de page (puisqu’ils font partie de l’objet document).

Les données dans le stockage du navigateur, en revanche, sont en fait assez difficiles à supprimer à un niveau granulaire, elles ont un quota énorme et elles ne sont récupérées et stockées qu’à la demande. Aussi, en utilisant localStorage (plus à ce sujet bientôt), vous avez les données stockées indéfiniment, donc niveau de l’utilisateur le stockage est très simple à mettre en oeuvre.

(METTRE À JOUR: N’oubliez pas que le stockage local du navigateur doit être traité de la même manière que les cookies lorsque vous respectez les lois sur les cookies de votre pays. Merci à Martijn Visser de l’avoir signalé (il vient des Pays-Bas, et ils ont à peu près l’interprétation la plus stricte de la loi sur les cookies en place.))

Dans ce guide, je vais vous donner une sorte d’API pour enregistrer, charger, remplacer et supprimer des éléments du stockage local. J’utilise une expiration de 30 minutes pour les données dans localStorage pour imiter le stockage de la durée d’une session.

Présentation de localStorage

localStorage stocke indéfiniment les données dans le propre compartiment de stockage de votre navigateur. Il a une limite de taille plus grande que nécessaire (environ 5 Mo) et les données sont traitées de manière plus sécurisée qu’avec les cookies. Les cookies, voyez-vous, sont écrits sur le document chaque fois que vous chargez une page, ce qui introduit des risques de sécurité potentiels.

Articles dans localStorage, en revanche, ne sont récupérés que lorsqu’ils sont appelés. De cette façon, toutes les données que vous stockez seront récupérées à la demande, et tout ce que vous avez à faire est de vous assurer que votre script gère correctement les données (ce que je ferai pour vous dans ce guide).

Dans localStorage, les données sont écrites sous forme de paires clé-valeur, mais contrairement à dataLayer, la clé et la valeur doivent être de type String. Cela signifie que pour enregistrer des éléments de dataLayer, qui peut contenir n’importe quel type de valeurs, pour localStorage, une sérialisation d’objet et une conversion de type doivent avoir lieu (Objet => Chaîne). De même, l’inverse doit avoir lieu lors du chargement de données à partir de localStorage et le pousser vers dataLayer.

L’API persistante dataLayer

Sans plus tarder, permettez-moi de vous présenter l’API Persistent dataLayer. Copiez le code suivant dans une balise HTML personnalisée et lisez la suite.

<script>   (function() {     // Declare some utility variables     var retrievedDL = '',         getDL = {},         saveDL = {},         persistEvent = /^persist(Save|Replace)/,         timeNow = new Date().getTime(),         timeStorage = '',         persistTime = 1000*60*30; // Expiration in milliseconds; set to null to never expire          // Only works if browser supports Storage API     if(typeof(Storage)!=='undefined') {                retrievedDL = localStorage.getItem('persistDL');       timeStorage = localStorage.getItem('persistTime');              // Append current dL with objects from storage       var loadDL = function() {         if(retrievedDL) {           dataLayer.push(JSON.parse(retrievedDL));           // dataLayer.push({'event': 'DLLoaded'});         }       }              // Save specified object in storage       var storeDL = function() {         for (var i = 0; i < dataLayer.length; i++) {           if (persistEvent.test(dataLayer[i].event)) {             saveDL = dataLayer[i];             delete saveDL.event;             getDL = JSON.parse(retrievedDL) || {};             for (var key in saveDL) {               if (saveDL.hasOwnProperty(key)) {                 getDL[key] = saveDL[key];               }             }             localStorage.setItem('persistDL', JSON.stringify(getDL));           }         }       }       var deleteDL = function() {         localStorage.removeItem('persistDL');       }       switch ({{event}}) {         case 'gtm.js':           if (retrievedDL && timeStorage) {             if (persistTime && timeNow > Number(timeStorage) + persistTime) {               deleteDL();             } else {               loadDL();             }           }           break;         // Delete dataLayer variables         case 'persistDelete':           deleteDL();           break;         // Replace dataLayer variables         case 'persistReplace':           retrievedDL = null;         // Save dataLayer variables         case 'persistSave':           storeDL();           break;       }              localStorage.setItem('persistTime', JSON.stringify(timeNow));     }   })(); </script>

Le tag aura besoin de la règle de déclenchement suivante :

{{event}} correspond à RegEx ^(gtm.js|persist(Save|Replace|Delete))

Voici un aperçu du fonctionnement de l’API, avant d’entrer dans les détails techniques :

1. À chaque chargement de pagevariables dataLayer stockées dans localStorage sont récupérés et poussés dans dataLayer.

2. Lorsque vous poussez un objet avec ‘event’ : ‘persistSave’toutes les variables dans le même push (par exemple ‘pageCount’ et ‘author’ dans dataLayer.push({'event': 'persistSave', 'pageCount': '5', 'author': 'Simo-Ahava'});) sont enregistrés dans localStorage. Si une variable portant le même nom existe déjà dans localStorageil est mis à jour avec la nouvelle valeur.

3. Lorsque vous poussez un objet avec ‘event’ : ‘persistDelete’toutes les variables dataLayer dans localStorage sont supprimés.

4. Lorsque vous poussez un objet avec ‘event’ : ‘persistReplace’toutes les variables dataLayer existantes dans localstorage sont supprimées et toutes les variables du dataLayer.push() sont sauvés.

N’oubliez donc pas les commandes suivantes :

dataLayer.push({'var1': 'value1', 'var2': 'value2', **'event': 'persistSave'**}); stocke ‘var1’ et ‘var2’ (avec des valeurs) dans localStorage.

dataLayer.push({'var1': 'value1', 'var2': 'value2', **'event': 'persistDelete'**}); supprime toutes les variables dataLayer enregistrées dans localStorage; ne stocke rien.

dataLayer.push({'var1': 'value1', 'var2': 'value2', **'event': 'persistReplace'**}); supprime toutes les variables dataLayer enregistrées dans localStorage; stocke ‘var1’ et ‘var2’ (avec des valeurs) dans localStorage.

Quelques détails supplémentaires :

• À chaque chargement de page, les variables sont chargées à partir de localStorage et poussé vers dataLayer. Même si la balise elle-même se déclenche sur {{event}} est égal à gtm.js, il y a un léger retard lors du traitement des données via l’API de stockage. Cela signifie que généralement les variables apparaissent dans dataLayer après gtm.dom mais avant gtm.load.

• Chaque interaction avec localStorage, réinitialise la minuterie d’expiration de 30 minutes. Si un chargement de page se produit alors que la dernière interaction remonte à plus de 30 minutes, toutes les variables dataLayer enregistrées dans localStorage sont supprimés.

• Avant d’enregistrer les données, les variables dataLayer sont sérialisées dans une chaîne. Lors du chargement depuis localStorage, ils sont analysés depuis JSON vers leurs types d’origine. Ainsi, les tableaux, les objets et les valeurs primitives sont restaurés dans leurs types d’origine avant d’être repoussés dans dataLayer.

Trucs techniques

Passons en revue le code (presque) ligne par ligne.

(function() { ... })(); 

La fonction est enveloppée dans un IIFE (expression de fonction immédiatement invoquée). C’est parce que je veux éviter d’utiliser la portée globale lors de l’utilisation de tant de variables différentes. La portée des variables de cette fonction garantit que je ne joue pas avec les variables globales d’une autre bibliothèque, par exemple.

var retrievedDL = '', getDL = {}, saveDL = {}, persistEvent = /^persist(Save|Replace)/, timeNow = new Date().getTime(), timeStorage = '', persistTime = 1000*60*30; // Expiration in milliseconds; set to null to never expire 

Ici, j’introduis un tas de variables d’utilité. Si vous souhaitez que le stockage persiste pour toujours, définissez persistTime = null;.

if(typeof(Storage)!=='undefined') {   retrievedDL = localStorage.getItem('persistDL');   timeStorage = localStorage.getItem('persistTime');   ... } 

N’exécutez l’API que si le navigateur prend en charge le stockage Web HTML5. C’est essentiellement un problème avec les versions IE antérieures à 8. Je n’ai vu aucune raison de leur proposer une alternative, car si vous utilisez toujours IE7 ou une version antérieure, vous méritez une expérience de navigation horrible.

Consultez l’excellent article de Shay Sharon auquel j’ai lié au début pour une solution de cookie au dataLayer persistant. Cela devrait fonctionner avec votre navigateur merdique et obsolète.

var loadDL = function() {   if(retrievedDL) {     dataLayer.push(JSON.parse(retrievedDL));     // dataLayer.push({'event': 'DLLoaded'});   } } ... case 'gtm.js':   if(retrievedDL && timeStorage) {     if(persistTime && timeNow > Number(timeStorage)+persistTime) {       deleteDL();     } else {       loadDL();     }   }   break; 

À chaque chargement de page, analysez les variables dataLayer dans localStorage revenir à leurs types d’origine et les pousser dans dataLayer en tant qu’objet unique. Si vous souhaitez définir un événement déclencheur pour déclencher vos balises après le chargement des variables à partir de localStorage, décommentez la ligne avec ‘event’ : ‘DLLoaded’. De cette façon, vous pouvez faire en sorte que vos balises dépendantes se déclenchent {{event}} est égal à DLLoaded pour s’assurer qu’ils ont accès aux variables stockées.

De plus, si les variables stockées expirent (la valeur par défaut est de 30 minutes depuis la dernière interaction), aucune donnée n’est chargée et les variables sont supprimées de localStorage. Si vous avez défini persistTime = null;il n’y a pas d’expiration pour les données stockées et les variables sont stockées jusqu’à ce qu’elles soient supprimées manuellement.

Lorsqu’un dataLayer.push(); est fait pour que l’objet poussé contienne la propriété ‘event’ : ‘persistSave’, la fonction storeDL() est exécuté.

Tout d’abord, la fonction supprime la propriété ‘event’ de l’objet qui a été poussé dans dataLayer. Ceci est fait parce que vous ne voulez pas stocker l’événement déclencheur lui-même dans localStorage. (Une autre possibilité est de simplement ignorer la propriété ‘event’ lors du stockage des propriétés dans localStorage.)

Ensuite, chaque propriété de cet objet dataLayer est poussée dans l’objet qui a été trouvé dans localStorage. Ainsi, toutes les variables déjà stockées sont mises à jour avec de nouvelles valeurs et de nouvelles variables sont ajoutées.

Enfin, l’objet, désormais sérialisé en une chaîne de clés et de valeurs, est stocké dans localStorageen attente d’être chargé avec une nouvelle actualisation de la page.

Si ‘l’événement’ était ‘persistReplace’, alors c’est le storeDL() est également exécuté, mais toutes les variables dataLayer stockées sont remplacées par les nouvelles variables.

var deleteDL = function() {   localStorage.removeItem('persistDL'); } ... case 'persistDelete':   deleteDL();   break; 

Si l’événement déclencheur était ‘persistDelete’, toutes les variables dataLayer dans localStorage sont supprimés.

localStorage.setItem('persistTime', JSON.stringify(timeNow)); 

Enfin, chaque fois que le script est exécuté, l’heure actuelle est enregistrée sous forme d’horodatage dans localStorage.

conclusion

J’ai remarqué que beaucoup de gens avaient besoin d’un dataLayer persistant. Je suis presque sûr que cet article deviendra obsolète dès que l’équipe GTM choisira de déployer une telle fonctionnalité dans le produit lui-même, mais jusque-là, cela devrait bien vous servir.

Et si rien d’autre, vous devez au moins en apprendre davantage sur une autre API JavaScript vraiment cool !

Avez-vous des suggestions pour l’API ? Ou peut-être avez-vous un bon cas d’utilisation pour les variables persistantes que vous pourriez vouloir partager avec d’autres ?