JavaScript 101 pour GTM : Partie 1

Voici le lien vers la partie 2 de ce guide JavaScript.

Le problème avec Google Tag Manager, ou tout autre gestionnaire de balises JavaScript, c’est que JavaScript est impliqué. En fait, l’outil lui-même n’est qu’une bibliothèque JavaScript avec quelques cloches et sifflets supplémentaires (comme une interface utilisateur de gestion). Cela signifie que pour en tirer le meilleur parti, une certaine connaissance de JavaScript est nécessaire, et c’est le but de cet article.

Il ne s’agira pas d’un guide pratique ou de JavaScript pour les nuls, mais plutôt d’une description de la manière dont JavaScript doit être géré dans GTM. Cependant, j’ai ajouté certaines de mes ressources d’apprentissage JavaScript préférées au mélange, si vous voulez commencer depuis le début. JavaScript est un langage de programmation assez facile à apprendre, en partie parce qu’il a été « simplifié » et tellement standardisé au fil des ans. La plus grande difficulté avec JavaScript, à mon avis, n’a rien à voir avec le langage lui-même. Le plus gros problème, de loin, est la façon dont JavaScript est interprété par les navigateurs. Au mieux, le même morceau de code fonctionne parfaitement sur tous les navigateurs existants. Au pire, vous devrez ajouter des solutions de repli inter-navigateurs complexes pour vous assurer que votre code s’exécute même sur certains navigateurs modernes.

La bonne chose à propos de l’utilisation de GTM, ou de n’importe quelle bibliothèque, est que la bibliothèque elle-même s’occupe généralement des problèmes de navigateurs croisés pour vous. Avec GTM, cependant, cela se limite aux modèles de balises et de macros que vous utilisez. Lorsque vous commencez à ajouter vous-même du JavaScript personnalisé, c’est à vous de vous méfier de la prise en charge de vos scripts par plusieurs navigateurs.

Quirksmode.org est une ressource assez impressionnante si vous souhaitez en savoir plus sur la compatibilité des navigateurs.

Sans plus tarder, allons-y le guide:

1. Ressources préférées

2. JavaScript dans Google Tag Manager

3. La structure dataLayer

4. Interagir avec dataLayer

5. Balise HTML personnalisée

6. Macro JavaScript personnalisée

Ce n’est, encore une fois, que le premier d’une série en deux parties. Je suis désolé, je suis juste paresseux. Le soleil brille enfin ici, je regarde le jardin et, pour une raison quelconque, la notion de plein air, l’odeur de l’herbe fraîchement coupée et la douce libération que seule une canette de bière froide peut procurer se frayent un chemin jusqu’au sommet du liste des « choses que je préférerais faire plutôt que de bloguer », qui est en effet une très, TRÈS courte liste.

1. Ressources préférées

Voici quelques ressources pour vous aider à démarrer votre parcours d’apprentissage JavaScript :

SITES INTERNET:

Codecademy – Portail d’apprentissage interactif pour un certain nombre de disciplines de programmation différentes. Leur piste JavaScript est excellente pour vous familiariser avec le langage.

Code School – Un autre portail de formation. Leur piste JavaScript est également bonne.

w3schools.com – Mieux comme référence que comme ressource d’apprentissage, mais néanmoins beaucoup de bon contenu.

Interfaces d’API Web MDN – Outil de référence pour toutes les API Web dont vous aurez besoin.

LIVRES:

Douglas Crockford – JavaScript: The Good Parts – L’un des meilleurs livres sur les meilleures pratiques JavaScript (intermédiaire à avancé).

Nicholas Jakas – JavaScript professionnel pour les développeurs Web – Mon livre JavaScript préféré. Le guide le plus complet qui soit.

Marijn Haverbeke – Eloquent JavaScript – Excellent livre sur JavaScript, avec une édition numérique gratuite !

BLOGS:

DailyJS – Conseils quotidiens sur JavaScript.

David Walsh Blog – Beaucoup de choses sur le développement Web, avec de nombreux articles approfondis sur JavaScript.

Blog JavaScript de Joe Zim – Conseils et guides pratiques pour JavaScript et les frameworks associés.

Ce sont mes ressources préférées. Si vous avez d’autres suggestions, faites-le moi savoir par e-mail ou dans les commentaires du blog.

2. JavaScript dans Google Tag Manager

Dans presque tous mes messages Google Tag Manager, j’utilise JavaScript d’une manière ou d’une autre pour accomplir la tâche. C’est parce que JavaScript est LE langage de Google Tag Manager. La bibliothèque elle-même est une bibliothèque JavaScript, et toutes les cloches et sifflets de l’interface utilisateur sont destinées à contrôler le type de JavaScript que l’outil injecte sur la page Web.

Cependant, vous ne pouvez pas vous contenter de tirer du code JS où vous le souhaitez. Dans l’interface utilisateur GTM, JavaScript ne peut être ajouté dans le cadre d’un scénario. Actuellement, il existe deux endroits qui acceptent le code JavaScript brut et non filtré : le Balise HTML personnalisée et le Macro JavaScript personnalisée. N’essayez donc pas d’écrire du JavaScript dans d’autres champs de balises, cela ne fonctionnera pas.

Donc, si vous souhaitez exécuter des fonctions JavaScript personnalisées, vous devrez soit créer une balise HTML personnalisée qui exécute du code, soit si vous souhaitez utiliser JavaScript pour accéder aux éléments DOM, par exemple, vous pouvez créer une macro JavaScript personnalisée. Nous y reviendrons bientôt, ne vous inquiétez pas.

LECTURE COMPLÉMENTAIRE:

• Guide du développeur du gestionnaire de balises Google

3. La structure de la couche de données

Une solution de gestion de balises JavaScript est basée sur injection de codes. Cela signifie que le code qu’il exécute sur votre site est étranger au modèle de page. La seule chose que le modèle de page a à l’origine est l’extrait de conteneur. Cet extrait agit comme une invitation pour GTM à effectuer sa magie sur votre page.

Parce que GTM injecte le code qu’il veut exécuter, il est vital qu’il utilise sa propre structure de données. S’il n’y avait pas de modèle de données propriétaire, toutes les variables auxquelles GTM accéderait / modifierait risqueraient de provoquer des conflits avec d’autres bibliothèques. Par exemple, disons que vous avez une variable globale pageHeader créé par vos développeurs, et il stocke l’en-tête principal de votre modèle de page. Puis GTM arrive et utilise pageHeader pour manipuler le titre du document transmis à Google Analytics. Parce qu’il accède à la même variable globale que vous utilisez pour stocker des informations sur la page, le risque que GTM casse votre modèle de page devient une horrible réalité.

Avec dataLayer, une utilisation réussie (lire : intelligente) de GTM est limitée aux seules variables exposées dans la structure dataLayer. Ainsi, le seul risque que vous courez est d’avoir une autre bibliothèque qui utilise AUSSI dataLayer (orthographié exactement comme ça). Plus le standard dataLayer sera connu, moins cela sera risqué, car les autres bibliothèques sauront éviter d’utiliser ce nom.

dataLayer est un Objet JavaScript du genre Déployer. Un tableau est un type particulier d’objet. La différence est qu’en JavaScript, les objets ont Propriétéstandis que les tableaux ont membres. Un membre Array peut être un objet.

Les propriétés d’objet sont définies avec une notation spécifique, par exemple :

var sampleObject = {'First-name': 'Simo'}; alert(sampleObject['First-name']); alert(sampleObject.First-name); // Error! 

Il s’agit donc d’un objet, pas d’un Array. Si vous voulez clarifier la terminologie, dans la première ligne, j’ai créé un objet en utilisant notation littérale d’objet. C’est le truc entre accolades ici. Dans la deuxième ligne, j’ai récupéré la propriété ‘First-name’ de l’objet en utilisant notation entre crochets. Vous pouvez également utiliser notation par points pour accéder aux propriétés de l’objet (troisième ligne), mais avec ‘Prénom’ qui provoquerait un NaN (Pas un nombre), car le trait d’union dans le nom est interprété comme un signe moins. Ainsi, JavaScript, dans son infinie sagesse, est suffisamment égaré pour penser que sampleObject.First renvoie un nombre dont un autre nombre Nom est soustrait. Mais tant pis, ce n’était qu’un détour.

La chose à comprendre à propos de dataLayer est qu’un tableau se comporte un peu différemment de votre objet JavaScript ordinaire. Tout d’abord, un tableau est comme une table ou une file d’attente, mais vous voulez le regarder. Vous pouvez y ajouter plusieurs membres, et chacun de ces membres peut être de n’importe quel type JavaScript, tel que des objets.

Dans GTM, dataLayer est (presque) toujours interprété comme un tableau d’objets. Ainsi, vous pouvez avoir le sampleObject que j’ai créé ci-dessus en tant que membre de dataLayer :

var dataLayer = [{'First-name': 'Simo'}]; 

Comme vous pouvez le voir, peu importe que l’objet s’appelle ‘sampleObject’, puisqu’à partir de ce moment, il ne sera référencé qu’à l’aide de son numéro d’index dans le tableau. Les numéros d’index commencent à partir de 0, donc s’il s’agit du premier objet du tableau, sa référence est dataLayer[0]. Le prochain objet ajouté au tableau aurait le numéro d’index 1, et ainsi de suite.

Vous pouvez accéder aux propriétés d’un objet dans un tableau en utilisant la même notation que celle que vous venez d’apprendre au début de ce chapitre. Cependant, vous devez d’abord savoir dans quel index réside l’objet dont vous souhaitez accéder à la propriété.

Donc, si vous me suivez toujours, pour accéder à la propriété ‘First-name’ de l’index FIRST dataLayer, vous devez utiliser quelque chose comme ceci :

alert(dataLayer[0]['First-name']); 

Cela ferait apparaître une boîte de dialogue avec “Simo”. Cependant, dans GTM, vous n’avez pas à vous soucier des numéros d’index de la couche de données, car vous pouvez simplement utiliser la macro variable de la couche de données. J’en aurai plus sur l’interaction avec dataLayer dans le chapitre suivant.

LECTURE COMPLÉMENTAIRE:

• w3schools : Tableaux JavaScript

• MDN : Travailler avec des objets JavaScript

4. Interagir avec dataLayer

Dans GTM, vous interagissez essentiellement avec dataLayer de trois manières différentes :

1. D’abord, vous définir dataLayer en tant que tableau

2. Ensuite, vous pousser objets et propriétés dans dataLayer

3. Enfin, vous accédez à ces propriétés à l’aide d’une variable de couche de données Macro

Passons en revue ces étapes étape par étape.

Vous définissez dataLayer en déclarant la variable et en définissant son type sur Array. La façon la plus courante de le faire est d’utiliser la notation littérale :

var dataLayer = []; 

Cela indique à votre page qu’une nouvelle variable appelée dataLayer a maintenant été déclarée, et les crochets définissent son type comme Array. Après cela, vous pouvez commencer à pousser des choses dans la structure, ou si vous avez déjà des propriétés que vous voulez pousser, vous pouvez simplement les ajouter à la déclaration :

var dataLayer = [{     'pageTitle': 'Homepage',     'visitorType': 'Loyal customer',     'loggedIn': true }]; 

Donc ici, je crée dataLayer en tant que tableau (c’est les crochets) avec un seul objet (c’est les accolades) avec trois propriétés (c’est la ‘clé’: ‘valeur’,) trucs. Comme vous pouvez le voir, il n’y a pas de virgule après la dernière propriété. Aussi, vrai n’a pas de guillemets simples autour, puisque je stocke une valeur de type booléen (vrai/faux) et non une chaîne.

La chose à propos de la déclaration dataLayer est que il ne faut le faire qu’une seule fois. Vous voyez, chaque fois que vous redéclarez une variable, sa référence précédente est écrasée ! Vous devez être très prudent à ce sujet, car si vos développeurs ajoutent accidentellement la déclaration dataLayer deux fois sur votre page, ses propriétés précédentes seront écrasées par la deuxième déclaration. C’est pourquoi il est plus sûr de déclarer la structure une fois, puis d’utiliser systématiquement pousser() pour toutes les modifications ultérieures.

Le pousser()-method est ce dont tous les Arrays sont équipés. L’utilisation de cette méthode ajoute un objet à la fin du tableau, créant automatiquement un nouvel index pour celui-ci. Ainsi, rien n’est écrasé. Vous pouvez avoir une douzaine d’objets avec exactement les mêmes propriétés dans dataLayer, et vous n’obtiendrez aucune erreur. Notez que la macro variable de couche de données de GTM permet de contourner ce problème (voir ci-dessous).

Pour pousser un nouvel objet dans dataLayer, la notation suivante doit être utilisée :

dataLayer.push({'loggedIn': false}); 

Cela vient de pousser un nouvel objet dans dataLayer avec une seule propriété : ‘loggedIn’ avec la valeur false. Je peux donc facilement avoir dataLayer avec deux objets, les deux avec la propriété ‘loggedIn’ étant quelque chose de différent. Cela n’a pas d’importance, puisqu’ils sont dans des objets séparés.

Essayer de pousser la même propriété deux fois dans le même objet n’entraînerait pas non plus d’erreur. Cependant, seule la dernière propriété resterait dans l’objet.

La chose à propos pousser() est que cela ne fonctionnera pas si dataLayer n’a pas été déclaré en tant que tableau. C’est pourquoi, dans votre modèle de page, voici un bon moyen de préfixer l’appel dataLayer.push() :

window.dataLayer = window.dataLayer || []; dataLayer.push(...); 

La première ligne vérifie si dataLayer a déjà été déclaré. Si c’est le cas, tout va bien, mais si ce n’est pas le cas, il est alors déclaré en tant que tableau. Cela fait en sorte que la méthode push () fonctionnera presque toujours. La seule façon dont cela ne fonctionnera pas est si dataLayer a été déclaré mais comme autre chose qu’un tableau (situation assez rare).

Notez que lorsque vous travaillez dans GTM (Custom HTML et Custom JavaScript), vous n’aurez pas à ajouter cette vérification à votre code, car l’extrait de conteneur GTM déclarera toujours dataLayer pour vous si vous ne l’avez pas fait explicitement dans le modèle de page. .

Enfin, le fonctionnement de la macro variable de couche de données est que lorsque vous lui attribuez une propriété dont elle doit renvoyer la valeur, elle commence à parcourir les propriétés dataLayer une par une, en commençant par la plus récente. S’il trouve une propriété avec le nom que vous avez donné, il renvoie sa valeur et arrête de parcourir dataLayer. Donc, si vous avez deux objets dans dataLayer avec la propriété ‘loggedIn’, seulement la valeur la plus récente de la propriété sera renvoyé par la macro de variable de couche de données.

En termes simples, cela signifie que pour Google Tag Manager, pousser un objet dans dataLayer avec une propriété qui existe déjà dans dataLayer remplace la valeur de propriété précédente par la nouvelle. Bien sûr, cela n’écrase rien, mais la macro ne s’intéresse qu’à la dernière valeur.

Il y a une exception bizarre à cela, et c’est si vous poussez un tableau dans dataLayer.

Si vous poussez ensuite un autre tableau avec le même nom, GTM “écrasera” uniquement les index de tableau partagés par les deux tableaux, mais si le premier tableau avait plus d’indices, ceux-ci resteront à utiliser par GTM. Permettez-moi de démontrer:

dataLayer.push({'products': ['a', 'b', 'c', 'd']}); ... dataLayer.push({'products': ['e', 'f']}); 

Dans la première ligne, je pousse un Array avec quatre membres (a, b, c, d). Un peu plus tard, je pousse un autre Array avec le même nom, mais cette fois avec seulement deux membres. Si GTM était cohérent, la deuxième fois, la macro variable de la couche de données n’aurait que deux membres dans le tableau “produits”, mais pour le moment, GTM fonctionne de sorte qu’il écrase simplement les deux premiers indices du tableau. Ainsi, la macro verrait en fait des “produits”: [‘e’, ‘f’, ‘c’, ’d’]. C’est un peu bogué pour moi, car pour être cohérent, la deuxième poussée de tableau devrait faire en sorte que la macro n’accède qu’aux valeurs du deuxième tableau.

Ouf, c’était beaucoup d’informations, j’espère que vous êtes toujours avec moi ici.

5. Balise HTML personnalisée

Une balise HTML personnalisée vous permet d’injecter un balisage HTML dans le site. Cela signifie que si vous souhaitez exécuter du JavaScript personnalisé dans une balise HTML personnalisée, vous devez créer le contexte de script pour le code. En HTML, vous établissez un contexte de script avec le <script> élément:

<div id="html_markup_here">This is still just normal HTML markup</div> <script>   alert("And this is JavaScript!"); </script>

Si vous essayez d’exécuter JavaScript sans le bloc de script, vous rencontrerez de graves erreurs de validation.

Notez que vous n’avez pas besoin de l’héritage type=”texte/javascript” attribut dans votre <script> balises, à moins que vous n’utilisiez encore HTML4 (haleter) et vous voulez que votre code soit validé. Tous les navigateurs modernes peuvent faire le calcul et tirer la conclusion logique qu’un élément SCRIPT avec du code JavaScript à l’intérieur doit être interprété comme, surprise surprise, JavaScript.

6. Macro JavaScript personnalisée

Dans Google Tag Manager, une macro est conçue pour renvoyer une valeur lorsqu’elle est appelée. C’est pourquoi vous avez toutes ces macros prêtes à l’emploi, qui renvoient chacune des informations étonnantes sur le site, la page ou le visiteur.

Si vous ne l’avez pas déjà fait, assurez-vous de lire mon guide macro, car il éclaire davantage ce sujet.

Avec une macro JavaScript personnalisée, sa fonction (jeu de mots) est également de renvoyer une valeur. S’il n’y a pas d’instruction de retour ou si la macro n’est pas encapsulée dans une fonction (seules les fonctions peuvent renvoyer des valeurs), vous rencontrerez des erreurs dans GTM.

Voici donc les choses à retenir :

1. Enveloppez toujours votre macro JavaScript personnalisée dans une fonction anonyme.
2. Renvoyez toujours une valeur (n’importe quelle valeur) avec une macro JavaScript personnalisée

Une fonction anonyme est une fonction sans nom. Pourquoi est-ce nécessaire ? Eh bien, vous ne créez pas une fonction dans une macro pour l’appeler sur un coup de tête en utilisant son nom. Non, la seule raison de l’existence d’une macro JS est qu’elle est appelée et que sa valeur est résolue en même temps, en utilisant la syntaxe {{macro}} de GTM. C’est, encore une fois, l’une des façons dont GTM garantit que les variables globales ne sont pas manipulées. Si vous pouviez nommer vos fonctions, vous utilisez peut-être un nom réservé à une autre bibliothèque. Cela aurait potentiellement des résultats cauchemardesques.

Et pourquoi renvoyer une valeur ? Eh bien, pour réitérer, la fonction d’une macro est retourner une valeur. Lorsque vous appelez une macro JS, elle résout une opération sur-le-champ avec toutes les données disponibles au moment où elle a été appelée. Il renvoie ensuite une valeur basée sur cette opération. Quelle serait la fonction d’utiliser la syntaxe de macro {{macro}} dans vos champs sinon pour récupérer une valeur ? Arrêtez de poser des questions idiotes.

Un exemple de macro JavaScript personnalisée appropriée :

function() {   return window.location.href.toLowerCase(); } 

Ici, vous avez une fonction anonyme déclarée sur la première ligne, une instruction de retour avec l’opération sur la deuxième ligne et la fermeture du bloc fonction sur la troisième ligne.

Lorsque cette macro est appelée, elle retourne l’URL de la page courante transformée en minuscule. Il s’agit d’une macro JavaScript personnalisée GTM prototypique. C’est juste une fonction anonyme qui n’accepte pas de paramètres. Ainsi, son seul objectif est de renvoyer une valeur, basée sur une opération sur une autre valeur qui peut être trouvée dans le modèle d’objet de document (plus sur cela plus tard). N’oubliez pas que vous pouvez accéder à d’autres macros dans vos macros JavaScript personnalisées, vous pouvez donc faire beaucoup de choses assez complexes avec les macros JavaScript personnalisées. Par exemple, la macro suivante renvoie le premier dossier dans le chemin de l’URL (par exemple “simo” dans /simo/articles/analytics) :

function() {   return {{url path}}.split("/")[1]; } 

Une macro JavaScript personnalisée est probablement l’outil le plus polyvalent dont vous disposez dans votre boîte à outils GTM, et vous devriez certainement consulter mes autres publications Google Tag Manager pour des façons créatives de les utiliser.

conclusion

Ouf, c’était beaucoup d’informations là-bas. Je vais devoir diviser cela en deux parties, juste pour me garder motivé 🙂

J’espère que vous jetez un coup d’œil aux ressources JavaScript dont j’ai parlé dans le premier chapitre. Même si vous êtes bien versé dans le métier de la programmation côté client, la plupart du temps, il est bon de rafraîchir vos connaissances avec quelques “trucs de base”.

Le problème avec GTM est qu’en plus de fonctionner comme votre bibliothèque JavaScript moyenne, il s’accompagne de certaines fonctionnalités propriétaires qui vous obligent à adapter quelque peu vos compétences en JavaScript. Le but de cet article (et de l’article suivant) n’est que cela : vous faire connaître ce que GTM exige de vous et le code que vous créez.

Voici le lien vers la partie 2 de ce guide JavaScript.