Ce fut un été formidable, avec des températures qui ont grimpé dans la fourchette du réchauffement climatique dans tout notre pays du Nord. La chaleur m’a donné de bonnes raisons de ne pas être à proximité d’un ordinateur, mais il est maintenant temps d’exploiter à nouveau la sagesse de JavaScript. Voici la deuxième partie de ma série JavaScript pour Google Tag Manager. La première partie portait sur des trucs et astuces spécifiques à GTM, et j’espère qu’en le lisant, vous avez eu droit à un autre grand exemple de la flexibilité de ce merveilleux outil.
Cette deuxième partie était censée porter davantage sur les pratiques JavaScript générales, mais je me voyais revenir au DOM à chaque étape. Le thème ici est donc l’insaisissable Document Object Model. C’est une qualité déterminante de JavaScript dans le développement Web, et comprendre ses mécanismes est essentiel pour comprendre le fonctionnement des solutions de gestion des balises.
Voici la liste des sujets :
-
Le modèle d’objet de document (DOM)
-
L’API DOM
-
Injection JavaScript + GTM
-
Manipulation faux
On y va encore une fois. Je vous implore de jeter un œil à la liste des ressources auxquelles j’ai lié dans le post précédent. Ils devraient vraiment bien vous servir dans votre cheminement vers l’illumination de JavaScript.
1. Le modèle d’objet de document (DOM)
Voici un compte rendu très, très simplifié du fonctionnement d’un navigateur :
-
Le navigateur envoie une requête au serveur Web pour récupérer un document Web
-
Ce document est juste un fichier de code source annoté, il doit donc être analysé dans un format que le navigateur peut interpréter
-
Le document est analysé dans un arbre de nœuds analysé, dont la syntaxe est très standardisée
-
L’arborescence des nœuds est ensuite rendue sous la forme d’une page Web, qui peut être visualisée dans la fenêtre du navigateur.
-
L’arborescence de nœuds est en fait le modèle d’objet de document (DOM), qui fournit également une interface pour interagir avec les éléments de l’arborescence
En bref, ce que vous voyez en regardant le origine de la page d’une page Web dans votre navigateur n’est que cela : le code source de la page. Ce n’est pas le final produit, puisque le code source est analysé dans un format qui peut être mieux compris par les navigateurs.
Si vous vous êtes déjà amusé avec un système de gestion de balises ou avec JavaScript, il y a de fortes chances que vous sachiez déjà tout cela. Le DOM est à la fois une représentation des éléments sur la page et un interface (plus à ce sujet dans le chapitre suivant) qui décrit une norme pour interagir avec ces éléments. Ça s’appelle le Document Objet Model car les éléments HTML que vous créez avec amour dans votre code source sont représentés sous forme d’objets, de nœuds ou de branches d’arbre, dans un objet de niveau supérieur appelé document. Alors quand tu étiquette une section de texte en tant qu’élément DIV en HTML, vous créez en fait un nouveau nœud avec le nom de balise DIV dans la hiérarchie du document en tant que nouvel élément avec lequel il est possible d’interagir.
Ainsi, le DOM et votre document HTML sont liés, en ce sens qu’ils partagent les mêmes éléments, mais ils ne sont pas la même chose. Le DOM est l’interprétation du navigateur du document HTML. Le fait qu’il soit standardisé garantit que toute votre négligence dans le balisage HTML est passée sous silence dans un DOM parfaitement structuré.
Si vous voulez voir à quoi ressemble l’objet document pour une page donnée, ouvrez simplement une console JavaScript, tapez document et appuyez sur entrée.
Presque tout le JavaScript qui interagit avec une page (comme les balises d’analyse) utilise le DOM. En effet, la représentation d’un document avec une collection d’objets permet aux langages de script tels que JavaScript d’imiter la syntaxe des langages de programmation orientés objet plus traditionnels. De plus, l’utilisation d’un ensemble standardisé d’objets et de fonctions dans le DOM normalise le balisage potentiellement chaotique et horrible que de très nombreuses pages Web affichent.
La chose à propos du DOM est que si vous comprenez ses fonctions de base et si vous lisez la norme, vous devriez également être inspiré pour créer un meilleur balisage. Si l’attribut ID n’était qu’un sélecteur CSS pour vous auparavant, après avoir réalisé à quel point il joue un rôle crucial dans l’identification unique d’un seul nœud DOM, vous serez plus enclin (espérons-le) à l’utiliser à l’avenir dans tout balisage pertinent situations.
Le DOM est un énorme standard et il y a beaucoup à apprendre. La meilleure façon d’apprendre est d’inspecter les objets du modèle en utilisant la console JavaScript. La lecture des articles GTM est également un bon moyen de parfaire vos compétences, car presque toutes les personnalisations GTM ont à voir avec la manipulation du DOM d’une manière ou d’une autre.
Il y a aussi le Browser Object Model (BOM), qui est une norme de facto pour interagir avec la fenêtre du navigateur. La nomenclature abrite le la fenêtre objet, qui, à son tour, contient toutes les variables et fonctions globales de la page ET de l’objet document. Ainsi, lorsque vous tapez document dans la console JavaScript, vous accédez en fait au window.document objet.
Déroutant? Peut-être, mais finalement tout est assez logique. Le DOM est une interface nécessaire entre le client et le document HTML, car une grande partie du développement Web d’aujourd’hui tourne autour de la modification dynamique et souvent subtile des pages Web. C’est ainsi que vous faites fonctionner vos animations, transitions, gestionnaires d’événements, etc.
LECTURE COMPLÉMENTAIRE :
-
Description du modèle d’objet de document (MDN)
-
Guide DOM HTML de W3Schools
-
Fenêtre JavaScript – le modèle d’objet du navigateur (W3Schools)
2. L’API DOM
L’API DOM est en fait le DOM lui-même (rappelez-vous, c’est un standard pour interagir avec le document), mais pour plus de clarté, j’utilise ici le terme API (uneapplication pprogrammation jeinterface). L’interaction avec le document se fait via les méthodes et les objets exposés par l’API.
Lors de l’utilisation de JavaScript (comme c’est le plus souvent le cas) pour interagir avec le DOM, tous les appels doivent naturellement être dans le contexte d’un <script> élément. Cela signifie que soit vous récupérez le JavaScript dans la déclaration elle-même, soit vous ajoutez le code en ligne. Certains attributs tels que “onclick” vous permettent d’ajouter du JavaScript directement au contexte d’un élément HTML sans utiliser <script>mais le cas le plus courant est d’avoir le <script> étiquette en place.
Il existe de nombreuses fonctions et objets auxquels vous pouvez accéder via le DOM, donc je n’entrerai pas trop dans les détails ici. Cependant, j’ajouterai un exemple de ce que la manipulation DOM signifie en termes de HTML par rapport à JavaScript. Voici un passage HTML typique dans une page Web normale :
<div id="content"> <span class="header">Why Four Strings Is Enough</span> <p class="paragraph">Many dismiss the ukulele because it only has four strings. However, it has more strings than a typical balalaika.</p> <div id="request-access"> <p class="paragraph">Request access to ukulele vault by sending mail to <span class="email">[email protected]</span></p> </div> </div>Il y a donc des éléments uniques où j’utilise l’attribut ID, et certains éléments qui sont réutilisés, représentés par l’attribut CLASS. Il est important de se rappeler que si vous utilisez ID, vous ne devriez jamais avoir qu’un seul élément de ce type sur la page. Sinon, vous rendrez la vie difficile à quiconque souhaite manipuler l’élément à l’aide de l’API DOM (en plus, ce ne sera pas du HTML valide).
Voici quelques exemples de fonctions JavaScript que je peux utiliser pour interagir avec le document :
var content = document.getElementById("content"); Cela stocke l’ensemble du nœud #content avec tous ses enfants dans la variable JavaScript content. Je peux ensuite utiliser d’autres fonctions du DOM pour manipuler davantage le nœud.
content.setAttribute("id", "main-content"); Remplace l’attribut ID de la DIV #content par #main-content. Ici, j’utilise l’objet JavaScript où j’ai stocké l’intégralité du nœud #content juste avant.
var classArray = document.getElementsByClassName("paragraph"); Stocke tous les éléments avec CLASS .paragraph dans un objet Array appelé classArray.
console.log(classArray[0].innerHTML); Écrit tout le contenu HTML du premier élément P avec la classe .paragraph dans la console.
alert(document.getElementById("request-access").children.length); Affiche une boîte de dialogue avec le nombre de nœuds enfants pour l’élément HTML avec l’ID #request-access. Dans ce cas, l’alerte contiendra le chiffre 1.
Il existe de très nombreuses façons d’interagir avec le document, ses objets et ses fonctions en utilisant l’interface du DOM. Vous devriez être assez à l’aise avec ceux-ci, surtout si vous souhaitez effectuer une gestion avancée des balises et des ajustements d’analyse Web.
LECTURE COMPLÉMENTAIRE :
- Fonctions et propriétés des éléments individuels dans le document (MDN)
3. Injection JavaScript + GTM
Maintenant que vous comprenez parfaitement le fonctionnement du DOM, vous êtes prêt pour la prochaine grande étape : l’injection de code.
Toute la prémisse d’un système de gestion de balises JavaScript tourne autour de l’injection de code. C’est pourquoi vous pouvez simplement ajouter l’extrait de conteneur dans votre code source lors de l’installation de GTM. En ajoutant ce morceau de code apparemment inoffensif dans votre code source, vous donnez en fait la permission au gtm.js bibliothèque pour injecter de plus en plus de code, d’éléments et de fonctions dans votre DOM.
Et quel est ce code injecté ? Vos balises et macros, bien sûr !
Voyons comment fonctionne l’injection avec un exemple simple d’ajout d’un nouveau <script> node dans le HEAD du document :
var s = document.createElement("script"); s.innerHTML = "alert('Injection successful');"; document.head.appendChild(s); -
Ligne 1 : Un nouvel élément SCRIPT est créé, mais il n’est encore attaché nulle part
-
Ligne 2 : du code est ajouté au contenu de la nouvelle balise
-
Ligne 3 : Le nouvel élément est ajouté en tant que dernier enfant du document HEAD
Si vous copiez-collez ce code dans une console JavaScript, vous devriez voir la boîte de dialogue contextuelle avec “Injection réussie”.
Dans ce code, vous utilisez le DOM avec createElement() et appendChild() fonctions, les innerHTML la propriété, et la document et document.head éléments dans l’arborescence. Si vous regardez maintenant vos éléments (pas le code source) en ouvrant les outils de développement de votre navigateur préféré, vous devriez voir ce nouvel élément comme le dernier enfant du HEAD.
Toutes les balises HTML personnalisées que vous créez via GTM sont ajoutées à votre page de la même manière. Lorsque vous visitez une page où une telle balise est configurée pour se déclencher, le script est injecté au moment où la règle de déclenchement se déclenche. Tout code dans la balise est exécuté ici et là.
Cela met également en évidence les dangers liés à l’utilisation d’une solution de gestion des balises pour corriger/pirater les erreurs de votre page Web. L’injection de code est brutale dans le sens où tout code à l’intérieur est exécuté textuellement. Il n’y a pas de contrôles par défaut en place pour empêcher votre code de jouer avec des objets globaux ou votre contenu soigneusement conçu. Depuis l’ouverture de l’API DOM tout éléments dans l’arbre pour la manipulation, il est très facile de créer ET de détruire quelque chose de beau.
Donc sois prudent.
LECTURE COMPLÉMENTAIRE :
-
L’extrait de conteneur : les secrets de GTM révélés
-
document.createElement() avec des exemples (MDN)
4. Gestion des faux
C’était trop facile jusqu’à présent, alors je vais vous laisser avec quelque chose de vraiment époustouflant.
J’ai déjà écrit sur ce phénomène et je pense toujours que c’est la clé pour comprendre comment GTM et JavaScript fonctionnent ensemble.
Tout d’abord, je m’excuse d’avance. Le traitement par JavaScript des valeurs « fausses » telles que undefined, null et false est notoirement difficile à comprendre. Non seulement c’est difficile à comprendre, mais c’est encore plus difficile à enseigner d’une manière compréhensible.
Quand on parle de valeurs « véridiques » et « faux », nous ne parlons pas strictement de valeurs qui sont soit vrai ou alors faux. Nous parlons plutôt de valeurs qui sont contraintes soit vrai ou alors faux dans un contexte booléen. Booléen est un type qui contient soit vrai ou alors faux comme valeur, et un contexte est booléen si une instruction dépend du fait que l’expression évalue soit vrai ou alors faux.
Une clause if est probablement le contexte booléen le plus utilisé. Le morceau de code suivant est un exemple prototypique de coercition de type :
if ...do something if t evaluates to true... } else if (!t) { ...do something if t evaluates to false... } La clause if est exécutée si t est vraimais cela ne signifie pas que évaluer de t doit être vrai. Au contraire, la valeur de t doit être “vérité”. La clause else est exécutée si la valeur n’est pas “vrai” mais “faux” (oh mon Dieu, ce sont des termes stupides).
Donc dans ce contexte, t est contraint à des valeurs booléennes. Il est plus facile de passer par les valeurs qui évaluent à fauxpuisqu’il n’y en a que six.
indéfini
nul
faux
0
“”
NaN
Donc, si une variable contient l’une de ces valeurs, elle serait évaluée à faux dans un contexte booléen.
Encore avec moi? Bien. Pour GTM, nous nous intéressons particulièrement aux valeurs indéfini et nul.
indéfini est une valeur (et un type, en fait) réservée aux variables qui ont soit été déclarées mais n’ont pas de type assigné (via l’affectation de valeur), OU n’ont pas été déclarées du tout. Ceci est très pertinent pour JavaScript, car souvent et surtout avec les pages Web dynamiques, de nombreuses variables reçoivent une valeur et un type uniquement après une interaction utilisateur spécifique (comme un clic). Si une fonction est exécutée avant une telle interaction et sans la vérification de non défini, l’exécution de la fonction échouera dans une vilaine erreur JS.
Les deux manières les plus simples de protéger l’exécution de vos variables sont :
if(!t) { alert("t is falsy and perhaps undefined!"); } if(typeof alert("t is undefined or has not been declared!"); } La différence est que l’utilisation de l’opérateur logique not (!) est recommandée lorsque vous savez que la variable a été déclarée mais que vous n’êtes pas certain qu’une valeur lui ait déjà été affectée, alors que le Type de() L’opérateur doit être utilisé lorsque vous n’êtes pas certain que la variable a été déclarée.
L’opérateur logique not est littéralement “not”, donc if(!t) { ... } se lit comme si (t est faux est vrai) { …exécuter ce code… }. Ainsi, la clause if n’est exécutée que si t est l’une des valeurs « fausses » répertoriées au début de ce chapitre.
Je peux voir votre tête tourner – encore une fois, je m’excuse !
Le fait est que vous ne devriez pas vraiment utiliser typeof(var)===undefinedpuisque vous devriez toujours être en mesure de voir si une variable a été déclarée, soit en consultant le contexte immédiat de la fonction locale, soit en recherchant la variable dans l’objet global.
Oui, laissez-moi vous expliquer cela aussi.
JavaScript a une portée statique. Cela signifie que les variables sont soit toujours globales, soit limitées à la fonction dans laquelle elles sont enveloppées. Si une variable est limitée à une fonction et si vous avez observé les meilleures pratiques dans votre programmation, vous devriez rapidement voir si oui ou non une variable a été déclarée au moment où votre code est exécuté.
var globalVar; // global variable function t() { var localVar; // local variable secondVar; // global but bad code } alert(localVar); // error since trying to access local variable outside function Une autre chose à noter est que si une variable est portée globalement, ce sera une propriété du global window objet. Ainsi, vous pouvez utiliser l’opérateur logique not pour vérifier son absence :
if(!window.t) { something... } // run something if t is not a global variable ... if(!t) { something... } // referenceError if t is not a global variable Lorsque vous travaillez avec GTM et GA, il est très important de comprendre comment l’API DOM fonctionne avec des éléments qui ne se trouvent pas sur la page. Vous voyez, une fonction telle que getElementById() ou alors getElementsByTagName() sera toujours retourner un objet. Un objet, si vous vous en souvenez, ne faisait pas partie des valeurs “fausses” répertoriées au début. Cependant, cet objet aura la valeur spéciale nul si l’élément HTML réel n’est pas trouvé sur la page.
Si vous étirez à nouveau votre mémoire, nul faisait partie des valeurs « fausses ». Ainsi:
var t = document.getElementById("test"), // "test" exists, will return the DOM element y = document.getElementById("testy"); // "testy" does not exist, will return object with value null if(typeof("t") === undefined) { // does nothing alert("t is undefined"); } if(!t) { // does nothing alert("t resolves to false"); } if(t===null) { // does nothing alert("t is null"); } if(typeof("y") === undefined) { // does nothing alert("y is undefined"); } if(!y) { // will alert the following message alert("y resolves to false"); } if(y===null) { // will alert the following message alert("y is null"); } Ainsi, les conseils de ce chapitre sont :
**1.**Utilisez l’objet de fenêtre global et l’opérateur logique not comme solution de secours au cas où une variable n’aurait pas été déclarée dans la portée globale.
2. Lisez votre code pour voir si une variable a été déclarée dans la portée locale (fonction) OU si vous êtes paresseux, utilisez la solution de secours if(typeof(variable)===undefined) { do something; }.
3. Soit utiliser l’opérateur logique not avec un élément DOM, par exemple if(!someDOMElement), OU vérifier null, par exemple if(someDOMElement===null), pour se replier au cas où un élément DOM auquel vous faites référence n’est pas trouvé dans le DOM .
Vous ne voulez pas écrire un long bloc de code pour le voir exploser lamentablement dans le chaos des erreurs JavaScript grâce à des conditions de concurrence ou à des déclarations erronées.
LECTURE COMPLÉMENTAIRE :
-
Opérateurs logiques JavaScript (MDN)
-
JavaScript non défini (W3Schools)
-
Valeurs de vérité et de fausseté en JavaScript
5. Conclusions
Je suis un énorme, ÉNORME fan de JavaScript. Je l’aime tellement que j’envisage sérieusement de nommer mon premier-né avec des initiales qui épellent JS (Jebediah Simo, par exemple). Je pense également que toute personne souhaitant étendre les capacités de Google Analytics, et CERTAINEMENT toute personne travaillant avec Google Tag Manager, devrait comprendre au moins les bases.
Il y a beaucoup à apprendre, et le désordre éclaté des problèmes de navigateurs croisés ne facilite pas les choses. Cependant, de nombreux ingénieurs ridiculement intelligents travaillent sur la norme, donc si les choses se passent bien, nous devrions voir des ajouts assez sympas et facilitants dans la prochaine version du langage.
N’oubliez pas que Google+ est un excellent endroit pour obtenir des conseils sur JavaScript, en particulier en ce qui concerne GA et GTM. Assurez-vous de suivre les communautés et de laisser tomber une ligne si vous avez besoin d’aide avec votre code.
Communauté Google Analytics dans Google+
Communauté Google Tag Manager dans Google+
