10 concepts JavaScript pour la mise en œuvre de Web Analytics

J’ai déjà beaucoup écrit sur JavaScript dans la mise en œuvre de l’analyse Web. Autant dire, comprendre au moins Les bases est absolument nécessaire pour survivre dans le support technique du navigateur Web.

Cet article développe une conférence que j’ai donnée au MeasureCamp IX, à Londres, il y a peu de temps. J’ai toujours été assez déterminé à propos de l’importance de JavaScript dans le développement d’analyses Web, et ce fut un plaisir pour moi de m’en débarrasser. Je souhaite donc revenir un peu plus en détail sur les dix concepts introduits dans ma conférence, notamment dans le contexte de Google Tag Manager.

Maîtrisez les bases

JavaScript n’est plus l’outil d’animation excentrique d’il y a deux décennies – c’est un langage de programmation s’il en est un. Il cache beaucoup de complexité sous sa syntaxe apparemment simple, bien que dans le navigateur Web, une grande partie de cette complexité soit abstraite ou entièrement supprimée grâce au fonctionnement de l’infrastructure client-serveur du Web.

Pour vous familiariser avec JavaScript, je recommande généralement les ressources suivantes. Codecademy en particulier est quelque chose auquel vous voudrez peut-être consacrer du temps et des efforts. Il contient de nombreuses pistes différentes, dont certaines sont extrêmement utiles pour les développeurs Web (analytiques).

1. Codecademy

Codecademy est une étonnante Ressource. Les cours sont gratuits, entièrement interactifs et le service suit vos progrès à mesure que vous acquérez de nouvelles compétences en cours de route. Codecademy a beaucoup de pistes pour les développeurs Web, mais je tiens à souligner ce qui suit comme le le strict minimum pour l’analyse Web :

• Javascript

• HTML et CSS

• jQuery

Je recommande de rendre habituel de toujours avoir un cours actif dans Codecademy. La programmation n’est pas une compétence que vous développez en silos – chaque nouveau langage et discipline que vous apprenez vous aide à devenir un meilleur développeur dans l’ensemble.

2. Livres

On peut dire que les livres ne sont pas le meilleur moyen de se tenir au courant des technologies du web, mais les tomes suivants ont passé l’épreuve du temps (à l’exception du dernier qui est tout neuf) à merveille, et même si certains des exemples de code peuvent être obsolètes, les idées derrière les solutions restent toujours d’actualité.

• Nicholas Zakas : JavaScript professionnel pour les développeurs Web (3e édition)

• Cody Lindley : Lumières DOM

• Jonathan Weber : Google Analytics pratique et Google Tag Manager pour les développeurs

Le volume de Zakas est une grande, bien que quelque peu intimidante, incursion dans la façon dont JavaScript et le navigateur Web interagissent. Inutile de dire que c’est une mine d’or pour comprendre la pile technique avec laquelle vous travaillez lors de la mise en œuvre d’une solution d’analyse Web. C’est le livre que je vous recommande le plus de lire une fois que vous maîtrisez les bases de JavaScript.

3. Bac à sable

La seule façon d’apprendre vraiment quelque chose est de le faire. Toutes les compétences créatives, y compris la programmation, doivent être perfectionnées. La meilleure façon d’apprendre la programmation est de la pratiquer activement. Alors en plus de suivre des cours et d’apprendre en lisant, pensez aussi à créer trucs! Une excellente façon de le faire est de déployer Google Tag Manager sur votre propre site Web. Si vous n’en avez pas, vous pouvez maintenant en créer un avec vos nouvelles compétences !

Jouez avec la console JavaScript des outils de développement de votre navigateur Web. Implémentez des scripts dans Google Tag Manager et voyez comment ils interagissent avec votre site Web. Utilisez des outils comme JS Lint pour comprendre les problèmes que votre code pourrait rencontrer.

Quoi que vous fassiez, continuez à coder.

Dans le contexte de Google Tag Manager, les fonctions sont sans doute les petites choses les plus utiles lors de la personnalisation des implémentations. En effet, la variable JavaScript personnalisée est essentiellement un appel de fonction que vous utilisez pour résoudre une valeur.

La variable JavaScript personnalisée a une syntaxe très délibérée lors de l’utilisation de Google Tag Manager, et certaines des restrictions peuvent vous sembler étranges, donc je veux les passer en revue avec quelques détails dans ce chapitre.

Fonction anonyme avec une instruction de retour

La variable JavaScript personnalisée nécessite un fonction anonyme avec un return déclaration. Une fonction anonyme est exactement cela : c’est une fonction sans identifiant nommé que vous pourriez utiliser pour vous y référer. Maintenant, vous pouvez affirmer qu’il a un nom puisque la variable elle-même a un nom, mais c’est la façon exclusive de GTM de résoudre la variable JavaScript personnalisée et n’a rien à voir avec la syntaxe JavaScript sous-jacente.

La variable JavaScript personnalisée ne prend aucun paramètre non plus. Toutes les valeurs que vous souhaitez traiter doivent provenir du modèle de données interne de Google Tag Manager (“Variables” de GTM), doivent être créées sur place (portée locale) ou doivent être disponibles dans l’espace de noms global (global portée).

Enfin, toutes les variables JavaScript personnalisées ont besoin d’un return déclaration. Ils doivent toujours renvoyer une valeur, car ils sont appelés dans des situations où une valeur est requise.

Il s’agit donc de la variable JavaScript personnalisée minimale viable que vous pourriez créer.

function() {   return; } 

Lorsqu’elle est invoquée avec la syntaxe {{Variable}}, cette fonction renvoie undefined.

Éviter les effets secondaires

Étant donné que la variable JavaScript personnalisée est une fonction de retour de valeur qui n’accepte pas de paramètres, elle ne doit être utilisée que pour les opérations d’entrée/sortie. Ainsi, le but de la variable JavaScript personnalisée est de prendre une valeur, de la modifier, puis de renvoyer la valeur modifiée.

Une fonction a des effets secondaires si elle fait autre chose que l’opération d’entrée/sortie décrite dans le paragraphe précédent. Les effets secondaires typiques se produisent lorsqu’une fonction est utilisée pour modifier quelque chose dans la portée globale, ou qu’elle est utilisée pour définir une valeur ailleurs, ou, dans le contexte de Google Tag Manager, qu’elle est utilisée pour manipuler la couche de données.

Vous devez éviter les effets secondaires, car Google Tag Manager ne peut pas garantir que la variable JavaScript personnalisée n’est résolue qu’une seule fois par activation. En fait, en mode Aperçu, les variables JavaScript personnalisées peuvent être résolues des dizaines de fois par dataLayer.push()ce qui peut conduire à une expérience déroutante.

function() {   // AVOID THIS:   window.dataLayer.push({'event' : 'JavaScript executed'});   return; } 

Le principal problème avec les effets secondaires est qu’ils sont difficiles à détecter en cas de problème. Étant donné que les variables JavaScript personnalisées sont résolues à des moments arbitraires, leur faire modifier la portée globale peut être dangereux et peut facilement conduire à des conditions de concurrence indésirables.

Comprendre la portée, utiliser les fermetures

JavaScript sur le Web a deux types de portée : locale et globale.

Portée locale, également connu sous le nom de portée de fonction, est ce à quoi les variables sont limitées lorsqu’elles sont déclarées dans une fonction. Lorsque vous déclarez une variable dans une fonction, elle n’existera que pendant la durée de l’appel de la fonction (bien que voir la partie sur les fermetures ci-dessous), après quoi le ramasse-miettes vient et l’emporte. Les variables à portée locale ne peuvent pas être référencées ou appelées depuis l’extérieur du contexte de la fonction actuelle.

function() {   // These variables all have local scope   var hello = "Hi, ";   var myname = "Simo!";   return hello + myname; } 

Portée mondialed’autre part, comprend des variables qui sont déclarées comme propriétés du window chose. Si vous n’utilisez pas le var lors de la déclaration d’une variable dans une fonction, elle est automatiquement élevée dans la portée globale.

Lorsqu’une variable est dans une portée globale, vous pouvez vous y référer n’importe où. Par exemple, l’omniprésent document La propriété du modèle d’objet de document du navigateur peut être utilisée n’importe où puisqu’il s’agit en fait d’une propriété globale du window chose:

window.document === document; // true 

Fermetures sont une exception à la façon dont les variables à portée locale sont éphémères et inaccessibles de l’extérieur. Lorsque vous créez une fermeture, vous créez en fait une simple interface qui vous permet d’accéder à la variable de portée locale depuis l’extérieur de la fonction !

function() {   var timeNow = new Date(); // Locally scoped   return function() {     return "Time then was: " + timeNow;   }; } 

La fermeture est la return function() {...} déclaration. Parce que la fonction est déclarée dans le même contexte, elle a accès à la portée locale timeNow variable. Et parce que la fonction est la cible du return instruction, vous pouvez réellement appeler cette fonction renvoyée dans le code ! Dans l’exemple ci-dessous, la variable JavaScript personnalisée que nous venons de créer ci-dessus est nommée Le temps alors.

var timeThen = {{Time Then}}(); console.log(timeThen); 

Les parenthèses à la fin de la variable JavaScript personnalisée sont significatives. Si vous aviez simplement {{Time Then}}l’affectation de variable stocke la valeur de retour de la variable JavaScript personnalisée (la fermeture) dans le timeThen variable. Les console.log() commande afficherait simplement la description de la fonction elle-même, et non le résultat. En ajoutant les parenthèses, vous dites au navigateur de réellement invoquer la fonction renvoyée par la variable JavaScript personnalisée. Depuis le timeNow n’est créé qu’une seule fois (lorsque la variable JavaScript personnalisée est résolue pour la première fois), la fermeture renverra toujours la même chaîne date-heure.

Modifier l’état lorsque vous contrôlez la résolution

Il existe une exception aux variables JavaScript personnalisées ayant des effets secondaires. Lorsque vous contrôlez totalement le moment où la fonction est résolue, il est normal de provoquer des effets secondaires, car vous n’avez pas à vous soucier de la résolution de la fonction un nombre de fois inconnu ou dans des contextes inconnus.

Un tel exemple est lors de l’utilisation d’une fermeture dans un rappeler. Les rappels (plus sur ceux-ci plus tard) sont des jalons d’exécution qui ont lieu après la fin d’un autre processus. Ainsi, si vous indiquez la fermeture d’une variable JavaScript personnalisée comme valeur d’un rappel, vous pouvez être assuré que la fonction n’est appelée qu’une seule fois – lorsque le processus principal est terminé.

function() {   // Return a function to be used by hitCallback   return function() {     // It's OK to modify state here!     window.dataLayer.push({'event' : 'tagHasFired'});   }; } 

Ce processus est illustré dans la fonction hitCallback du tracker Google Analytics. La fonction hitCallback est appelée une fois la requête adressée à Google Analytics terminée. Ainsi, vous pouvez utiliser la fermeture d’une variable JavaScript personnalisée pour modifier l’état du champ hitCallback lui-même ! Ceci est très utile si vous souhaitez enchaîner des balises dans une séquence, par exemple.

LECTURE COMPLÉMENTAIRE

Consultez les articles suivants pour plus d’informations sur le fonctionnement des fonctions :

• w3schools : Fermetures JavaScript

• MDN : Fermetures

• Variable JavaScript personnalisée

• #GTMtips : hitCallback et eventCallback

En JavaScript, vous disposez de cinq types de données porteurs de valeur :

var something = 5; // number var something = "five"; // string var something = true; // boolean var something = {five: 5}; // object var something = function() { return 5; }; // function 

Cela devient un peu plus désordonné que cela, car il existe en fait de nombreux types d’objets différents (tous les types de données JavaScript sont en fait une extension de « objet » dans son sens fondamental) :

var something = {five: 5}; // Object var something = [5,5,5]; // Array var something = new Date(); // Date 

Et enfin nous avons quelques pseudo-types mystiques qui n’ont aucune valeur :

var something = undefined; // undefined var something = null; // null 

Type dynamique

Contrairement à certains autres langages de programmation (par exemple Java), le type est dynamique en JavaScript. Cela signifie que vous pouvez réaffecter une variable avec un type complètement différent sans avoir à vous soucier de la conversion de type.

var something = 5; something = "five"; 

Ce qui précède est possible en JavaScript, car l’affectation de variable elle-même ne contraint pas la valeur affectée à un type spécifique. Cela peut être une faiblesse dans le code, car il vous oblige à tester le type pour éviter les erreurs.

// Works because something is a number var something = 5; var somethingMultiplied = something * 2;  // Won't work because something is suddenly a string something = "five"; somethingMultiplied = something * 2; // NaN: Not a Number  // So you need to test if (typeof something === 'number') {   somethingMultiplied = something * 2; } 

Plus vos variables sont éloignées de leur contexte d’exécution, plus cela peut être compliqué avec toutes les vérifications de type. Essayez donc d’éviter d’exploiter le type dynamique et faites de votre mieux pour conserver le type lors de la création et de la réaffectation de variables.

Type lâche

JavaScript effectue également la conversion de type pour vous en cas de besoin. Cela signifie que les actions suivantes sont possibles :

var something = "5"; var somethingMultiplied = something * 2; // 10 

Dans la multiplication, JavaScript attend something pour résoudre le type de nombre. Même si something est une chaîne, JavaScript détecte le nombre qu’il contient et convertit automatiquement la variable en nombre pour l’instruction de multiplication. La variable something lui-même n’est pas modifié, mais la valeur qu’il détient est convertie automatiquement pour rendre la résolution somethingMultiplied possible.

Notez qu’il existe quelques exceptions embarrassantes. L’opérateur plus (+) n’est pas seulement utilisé pour les instructions mathématiques mais aussi pour concaténer des chaînes. Donc, si vous essayez d’ajouter un nombre à une chaîne, vous vous retrouverez avec une chaîne concaténée plutôt qu’un nombre !

var a = "5"; var b = 6; var c = a + b; // "56"!  // You need to use parseInt() to manually convert to number: c = parseInt(a) + b; // 11 

Trucs bizarres

Je vais juste laisser cette liste ici. Ce n’est qu’une poignée du comportement étrange que vous obtenez lorsque vous travaillez avec un type lâche et dynamique.

typeof NaN; // number NaN === NaN; // false typeof NaN; // number isNaN(NaN); // true isNaN(null); // false typeof null; // object null instanceof Object; // false typeof undefined; // undefined undefined === null; // false undefined == null; // true {simo: true} === {simo: true}; // false 

Non défini et Google Analytics

Rappelez-vous que le undefined type a une fonction spéciale dans Google Analytics (et Google Tag Manager). Si vous vous référez à une variable qui renvoie undefinedce paramètre, champ ou paramètre particulier est automatiquement supprimé de la demande à Google Analytics.

Dans Google Gestionnaire de balises, undefined peut également être utilisé pour purger les valeurs de la couche de données. Ceci est extrêmement utile sur les applications d’une seule page, où les variables conservent leurs valeurs tout au long de la visite.

window.dataLayer.push({   event: 'GAEvent',   eventData : {     cat: 'Category value',     act: 'Action value',     lab: undefined,     val: undefined   } }); 

LECTURE COMPLÉMENTAIRE

Les articles suivants éclairent davantage les types de données en JavaScript :

• w3schools : Types de données JavaScript

• MDN : types de données et structures de données JavaScript

• #GTMtips : Les dimensions non définies ne seront pas envoyées

Lorsque vous recherchez des éléments susceptibles de ralentir le site, les requêtes HTTP lentes ou peu performantes sont généralement les coupables faciles à blâmer.

Grâce au chargement asynchrone, la plupart des requêtes HTTP sont effectuées de manière à ne pas bloquer le rendu de la page, mais async lui-même ne garantit pas un parcours fluide.

Prenons Google Tag Manager comme exemple. Voici un extrait de conteneur typique :

(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='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-W92WQQ'); 

J’ai passé en revue ce code dans un article précédent, mais il suffit de dire que le résultat final de tout ce code est le suivant :

En d’autres termes, le code minifié crée un nouveau script Élément HTML, qui demande au navigateur de demander un fichier sur les serveurs de Google, et la demande est effectuée de manière asynchrone.

Les script l’élément se transforme alors en une requête HTTP, puisque l’élément src L’attribut dans la balise signale au navigateur de faire une requête HTTP à la valeur URL de l’attribut.

Donc, juste en créant le script balise, le navigateur a automatiquement exécuté une requête HTTP vers le point de terminaison donné, et le résultat de cette requête est le gtm.js récupéré dans le navigateur pour une exécution immédiate.

De nombreux éléments peuvent générer une requête HTTP. Tous les scripts, images et fichiers HTML doivent être récupérés à partir du serveur Web, et le principal canal de transfert de données est la requête HTTP. Les balises HTML suivantes (avec les attributs indiqués) invoquent également des requêtes HTTP :

<input src="url"> <input usemap="url"> <ins cite="url"> <link href="url"> <object classid="url"> <object codebase="url"> <object data="url"> <object usemap="url"> <q cite="url"> <script src="url"></script> <audio src="url"> <button formaction="url"> <command icon="url"> <embed src="url"> <html manifest="url"> <input formaction="url"> <source src="url"> <video poster="url"> <video src="url"> <a href="url"> <applet codebase="url"> <area href="url"> <base href="url"> <blockquote cite="url"> <body background="url"> <del cite="url"> <form action="url"> <frame longdesc="url"> <frame src="url"> <head profile="url"> <iframe longdesc="url"> <iframe src="url"> <img longdesc="url"> <img src="url"> <img usemap="url">

Ouais. C’est tout un tas.

Notez que les requêtes HTTP peuvent être créées manuellement en utilisant par exemple XMLHttpRequest ou alors jQuery.ajax(). En fait, lorsque vous envoyez des appels à Google Analytics, vous utilisez en fait des requêtes HTTP créées par le analytics.js une bibliothèque.

LECTURE COMPLÉMENTAIRE

Voici plus d’informations sur les requêtes HTTP :

• w3schools : AJAX – Créer un objet XMLHttpRequest

• w3schools : Méthodes HTTP : GET ou POST

• Référence du protocole de mesure : transport

La différence entre asynchrone et synchrone le chargement est subtil mais significatif.

JavaScript dans le navigateur Web est mono-thread. Cela signifie qu’un seul processus peut être exécuté à la fois, et donc chaque ligne de JavaScript doit être exécutée complètement avant que le navigateur puisse passer à la ligne suivante. Si vous faites un synchrone Requête HTTP, cela signifie que le navigateur attendra que la totalité de la requête (téléchargement, exécution, rendu) soit terminée avant que le navigateur ne passe à la ligne de code suivante de la page. On dit que les opérations synchrones sont donc blocage.

Pour contrer ce coup potentiellement dévastateur pour le rendu des pages et l’expérience utilisateur, le chargement asynchrone a été introduit pour que la partie «coûteuse» du processus, le téléchargement, se produise afin qu’il ne bloque pas le navigateur.

Ainsi, lorsqu’une demande est faite de manière asynchrone, le navigateur lance le téléchargement mais passe ensuite à la ligne de code suivante pendant que le téléchargement se poursuit en arrière-plan. Ce n’est qu’après le téléchargement complet du fichier que le navigateur renvoie l’exécution à ce processus initial, rendant l’actif téléchargé dans le navigateur.

Le problème avec l’exécution asynchrone est que même si vous pouvez identifier le moment exact où la requête est lancée, car elle est régie par l’ordre des lignes de code dans le modèle de page, vous ne saurez jamais le moment exact où elle se termine. Et cela peut conduire à ce qu’on appelle un condition de course.

Supposons donc que j’ai les deux lignes de code suivantes dans le modèle de page :

<script async src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script async="" src="https//www.googletagmanager.com/gtm.js?id=GTM-XXXXX"></script>

Le navigateur commence à charger la bibliothèque jQuery avant GTM, donc je peux m’attendre à ce que jQuery soit disponible pour GTM dès que ce dernier a terminé le téléchargement. Mais ce n’est pas forcément le cas ! Le téléchargement proprement dit de jQuery peut se terminer longtemps après GTM a terminé, car la bibliothèque jQuery est le plus souvent assez volumineuse. De plus, si le CDN fournissant la bibliothèque jQuery a une latence, cela peut affecter le moment où jQuery devient disponible.

Donc, si dans Google Tag Manager j’essaie d’utiliser jQuery, il peut y avoir un condition de course où GTM s’attend à ce que jQuery soit disponible mais ce n’est pas le cas.

Pour lutter contre la condition de concurrence, nous pouvons utiliser des outils tels que rappels, promesses ou, en GTM, Tag Sequencing. Vous pouvez toujours recourir au téléchargement synchrone si vous êtes vraiment préoccupé par les conditions de concurrence, mais n’oubliez pas que cela peut avoir un impact négatif sur l’expérience utilisateur.

<!-- Synchronous request --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script async="" src="https//www.googletagmanager.com/gtm.js?id=GTM-XXXXX"></script>  <!-- Callback...