Les plugins Universal Analytics expliqués

Il existe de nombreux outils et méthodes pour rendre Google Analytics plus gérable. Google Tag Manager est probablement le plus connu d’entre eux, et vous pouvez également trouver de très nombreux articles sur GTM sur ces pages.

Cependant, aujourd’hui, je veux vous parler d’une des fonctionnalités d’Universal Analytics qui, pour autant que je sache, n’a pas reçu trop d’attention. C’est drôle, car en même temps, presque tout le monde utilise la fonctionnalité sous la forme de commerce électronique, d’attribution de lien améliorée et de suivi inter-domaines. Je parle bien sûr de Plug-ins d’analyse universelle.

Les plug-ins sont des objets JavaScript que vous pouvez charger et exécuter à l’aide de l’interface d’objet global d’Universal Analytics. Celui-ci est accessible, par défaut, à l’aide de la ga() une fonction.

Les plugins vous permettent de faire un certain nombre de choses utiles :

1. Découplez l’accès aux objets de suivi de JavaScript intégré dans la page HTML, ce qui vous permet de créer, d’exécuter et de maintenir les éléments souvent utilisés. ga() commandes dans les fichiers de bibliothèque plutôt que directement dans la page

2. Accédez rapidement à l’objet tracker de votre choix, sans avoir à préfixer chaque commande avec le nom du tracker, ou à parcourir tous les trackers existants pour trouver le bon

3. Exécutez les commandes du plugin de manière synchronece qui signifie que vous pouvez être sûr à 100 % que tout ce que fait le plugin sera disponible pour les commandes qui viennent après lui dans la file d’attente de commandes

Tous les avantages énumérés ci-dessus facilitent une intégration plug-and-play entre une plateforme et Google Analytics. Si vous êtes le développeur de la plate-forme, vous pouvez créer un plugin qui fait la plupart des démarches, comme l’attribution d’une nouvelle dimension personnalisée avec sa valeur respective, et l’utilisateur n’a qu’à charger le plugin pour en récolter les bénéfices.

Comment fonctionnent les plugins

Avant d’entrer dans une description technique des plugins eux-mêmes, nous devons d’abord clarifier quelque chose à propos de l’objet de suivi Universal Analytics. Voici un code de suivi typique sur un site Web typique :

<script>   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');    ga('create', 'UA-1234567-1', 'auto');   ga('send', 'pageview');  </script>

Si vous voulez comprendre ce que fait le code ci-dessus instruction par instruction, ceci et ceci sont de bons points de départ.

Ce qui est important, cependant, c’est que le analytics.js la bibliothèque est chargée de manière asynchrone. Le chargement commence lorsque l’expression de fonction immédiatement invoquée (IIFE) est exécutée, mais le moteur JavaScript du navigateur se déplace directement vers les deux ga() commandes avant le chargement de la bibliothèque analytics.js. Cela signifie que les deux ga() les appels n’interagissent pas réellement avec analytics.jsmais à la place, ils poussent des commandes dans un file d’attente de commandesqui est traité selon le principe du premier entré, premier sorti dès que la bibliothèque est chargée.

Ceci, à son tour, a une implication significative sur ce que vous pouvez faire avec le code. Considérez l’exemple suivant :

<script> ...the IIFE here...  ga('create', 'UA-1234567-1', 'auto'); ga('send', 'pageview', {   'dimension1' : ga.getAll()[0].get('clientId') }); </script>

Si vous connaissez vos méthodes de suivi, vous verrez que cela tente d’envoyer le identité du client de l’objet de suivi en tant que dimension personnalisée avec l’accès à la page vue.

Ce code entraînera cependant l’erreur : ga.getAll n’est pas une fonction. La raison de cette erreur est due au fait que la bibliothèque n’a pas encore été chargée lorsque le moteur JavaScript traite la commande dans le ga() appel. C’est le analytics.js bibliothèque qui configure l’interface pour l’objet global, pas le code de suivi.

Il y a deux façons de surmonter cela. Vous pouvez passer une fonction de rappel comme argument à la ga() appel, et tout code dans cette fonction ne sera pas exécuté tant que la bibliothèque n’aura pas été chargée. La deuxième méthode consisterait à utiliser un brancher.

Lorsque vous appelez le ga('require', 'pluginName') méthode, cette demande est ajoutée à la file d’attente de commandes. Quand le analytics.js bibliothèque est finalement chargée, la file d’attente de commandes sera traitée dans l’ordre. Une fois que le traitement atteint cette commande ‘require’, la file d’attente s’arrêtera jusqu’à ce qu’un appel ‘provide’ avec le même nom de plugin soit trouvé ou ajouté à la file d’attente. Cela signifie que le code suivant fonctionnerait bien :

<script> ...the IIFE here...  ga('create', 'UA-1234567-1', 'auto'); // Load the getClientId plugin, which gets the // clientId and sets it as dimension1 on following hits ga('require', 'getClientId'); ga('send', 'pageview'); </script>

Même si l’interface de suivi n’est pas disponible lorsque la commande ‘require’ est ajoutée à la file d’attente, l’interface sera être disponible une fois la file d’attente en cours de traitement.

Comment créer un plugin

Créons le getClientId plugin du chapitre précédent. Le code du plugin lui-même consiste en deux composants requis :

1. UNE constructeur qui est exécuté lorsque le plugin est chargé

2. UNE ‘apporter’ commande qui lie le constructeur au nom du plugin

Pour créer le plugin getClientIdvous auriez besoin de quelque chose comme le code suivant chargé sur la page :

var GetClientId = function(tracker) {   tracker.set('dimension1', tracker.get('clientId')); }; var ga = window[window['GoogleAnalyticsObject'] || 'ga']; if (ga) {   ga('provide', 'getClientId', GetClientId); } 

Les premières lignes sont pour le constructeur. C’est juste une fonction JavaScript, mais elle se transforme en un constructeur d’objet avec le ga('require', 'getClientId') call, qui crée une nouvelle instance d’objet de GetClientId.

Si JavaScript orienté objet vous déroute, jetez un œil à l’excellente piste JavaScript sur codecademy.

Quoi qu’il en soit, l’objet tracker utilisé dans l’appel au constructeur est automatiquement passé en argument à la fonction. Cela signifie que vous pouvez exécuter des commandes sur l’objet de suivi et que vous n’avez pas à vous soucier d’interagir avec le bon suivi ou d’envoyer les résultats à la bonne propriété Google Analytics.

Les lignes suivantes s’assurent d’abord que le ga() commande existe. Le ga() la fonction est créée dans l’extrait de code de suivi Universal Analytics, donc si votre code de plug-in est exécuté avant que le navigateur analyse l’extrait de suivi, cela peut ne pas fonctionner.

Finalement, le ga('provide', 'pluginName', Constructor) La commande est exécutée afin que le plugin puisse être trouvé avec son appel ‘require’ respectif.

Pour récapituler brièvement, voici comment les plugins sont chargés et liés aux trackers :

1. L’extrait de code de suivi Universal Analytics crée le ga() fonction et la file d’attente de commandes

2. Tous les appels de fonction à ga() sont ajoutés à cette file d’attente de commandes

3. Si vous avez un plugin, ses appels ‘require’ et ‘provide’ seront également ajoutés à la file d’attente

4. Une fois la analytics.js bibliothèque est chargée, les commandes de la file d’attente sont traitées dans l’ordre

5. Si une commande ‘require’ est rencontrée, le traitement de la file d’attente s’arrête indéfiniment, jusqu’à ce qu’un appel ‘provide’ avec le même nom de plugin soit exécuté

6. L’intégralité de la fonction du constructeur du plug-in est exécutée avant que le traitement de la file d’attente ne se poursuive

Vous trouverez ci-dessous un exemple de l’ordre de chargement en action. L’appel “require” du plug-in se situe entre les appels “create” et “send”, et la bibliothèque elle-même est chargée après l’extrait de code de suivi Universal Analytics. Il s’agit de s’assurer que le ga() La fonction est créée avant le plugin.

<script> ...the function expression here...  ga('create', 'UA-1234567-1', 'auto'); ga('require', 'getClientId'); ga('send', 'pageview'); </script> <script src="https://www.simoahava.com/scripts/getClientId.js" async></script>

Notez que la commande ‘require’ attend la commande ‘provide’ respective indéfiniment. Cela signifie que si vous avez mal orthographié le nom du plugin, ou si vous n’avez que la commande “require” pour une raison quelconque, le traitement de la file d’attente ne procédera pas. Essayez donc d’éviter de casser votre implémentation d’analyse, s’il vous plaît !

Exemple : Bibliothèque SimoPlugin

Voici un exemple de plugin que je pourrais être tenté d’utiliser encore et encore. Dedans, j’ai deux particularités :

1. UNE pousseur d’événement génériqueque je peux utiliser avec tous mes trackers pour envoyer des événements à leurs propriétés respectives

2. UNE duplicateur de coupsqui duplique l’accès au point de terminaison de collecte Universal Analytics et l’envoie sous forme de requête HTTP à tout point de terminaison personnalisé de mon choix

Je stocke le plugin dans un fichier appelé simoPlugin.jsque je charge ensuite de manière asynchrone après mon code de suivi :

<script> ...the IIFE here...  ga('create', 'UA-1234567-1', 'auto'); ga('create', 'UA-1234567-2', 'auto', {'name' : 'rollup'}); ga('require', 'simoPlugin'); ga('rollup.require', 'simoPlugin'); ga('send', 'pageview'); ga('rollup.send', 'pageview'); </script> <script src="https://www.simoahava.com/scripts/simoPlugin.js" async></script>

Comme vous pouvez le voir, j’ai mon tracker normal et un tracker avec le nom cumulet je charge le plug-in pour les deux trackers en utilisant la syntaxe typique de plusieurs trackers.

La façon dont le duplicateur de coups fonctionne est que chaque fois qu’une commande ‘send’ est utilisée, par exemple ga('send', 'pageview')la charge utile exacte du point de terminaison Universal Analytics est copiée et envoyée à mon point de terminaison (fictif) sur _http://process.simoahava.com/collect_ :

En dupliquant des hits comme celui-ci, vous pouvez créer votre propre mécanisme de collecte de données. Vous pouvez même utiliser un point de terminaison cloud, ce qui vous donnera beaucoup plus de puissance de traitement et d’échelle. Vous pourriez même l’utiliser pour surmonter la conspiration du schéma dont j’ai parlé auparavant.

Le pousseur d’événement générique fonctionne en envoyant un objet d’événement personnalisé à une méthode de plugin appelée trackEvent:

ga('simoPlugin:trackEvent', {   'cat' : 'Link Click',    'act' : 'Outbound',    'lab' : 'http://www.google.com',    'di' : 4,    'dv' : document.location.pathname }); 

Comme vous pouvez le voir, un littéral d’objet est passé comme deuxième argument de la ga() appel. Cet argument, à son tour, est passé au trackEvent méthode dans le code du plugin. La méthode prend les arguments, s’assure qu’aucun champ non défini n’est envoyé et pousse un hit d’événement vers la propriété associée au tracker qui a été utilisé pour appeler la méthode du plug-in. Si je voulais envoyer l’appel à mon cumul tracker, j’aurais utilisé la syntaxe ga('rollup.simoPlugin:trackEvent').

Code du plug-in simo

Le code stocké dans le simoPlugin.js bibliothèque ressemble à ceci :

(function() {    // Assign the ga variable to the Google Analytics global function   var ga = window[window['GoogleAnalyticsObject'] || 'ga'];    // Helper function for registering the Plugin   var providePlugin = function(pluginName, pluginConstructor) {     if (ga) {        ga('provide', pluginName, pluginConstructor);     }   };      // Constructor for simoPlugin   // Copies payload to custom host   var SimoPlugin = function(tracker) {     this.tracker = tracker;          // Copy the original hit dispatch function     var originalSendHitTask = this.tracker.get('sendHitTask');          // Modify the existing hit dispatcher to send a local copy of the hit     this.tracker.set('sendHitTask', function(model) {       originalSendHitTask(model); // Send the original hit as usual       var xhr = new XMLHttpRequest();       xhr.open('POST', 'http://process.simoahava.com/collect', true);       xhr.send(model.get('hitPayload'));     });   };      // Set up a generic event dispatcher   SimoPlugin.prototype.trackEvent = function(evt) {     var c = evt['cat'];     var a = evt['act'];     var l = evt['lab'] || undefined;     var v = evt['val'] || undefined;     var x = {};     x['nonInteraction'] = evt['ni'] || false;     if (evt['di']) {       x['dimension' + evt['di']] = evt['dv'] || undefined;     }     this.tracker.send('event', c, a, l, v, x);   };      providePlugin('simoPlugin', SimoPlugin); })(); 

Tout d’abord : le tout est emballé dans un expression de fonction immédiatement invoquée. C’est une bonne habitude en général, car elle étendra toutes les variables à l’intérieur de la portée de la fonction, et ainsi vous éviterez de polluer l’espace de noms global. Voici un bon aperçu de la raison pour laquelle les IIFE font du rock : J’aime mon IIFE – Greg Frank.

Les quelques lignes suivantes visent à rendre le chargeur de plugins plus générique. Puisqu’il est possible de changer le nom de la fonction globale dans le analytics.js code de suivi, nous devrons nous assurer que le chargeur de plug-in fonctionne même si le nom de la fonction n’est plus ga.

Le providePlugin est une fonction d’assistance générique qui est largement redondante, mais elle sera utile si vous chargez plusieurs plugins dans la même bibliothèque.

Le constructeur

Nous créons la fonction constructeur dans ces lignes :

var SimoPlugin = function(tracker) {   this.tracker = tracker;        // Copy the original hit dispatch function   var originalSendHitTask = this.tracker.get('sendHitTask');        // Modify the existing hit dispatcher to send a local copy of the hit   this.tracker.set('sendHitTask', function(model) {     originalSendHitTask(model); // Send the original hit as usual     var xhr = new XMLHttpRequest();     xhr.open('POST', 'http://process.simoahava.com/collect', true);     xhr.send(model.get('hitPayload'));   }); }; 

Comme vous pouvez le voir, le premier argument de la fonction sera l’objet tracker utilisé pour charger le plugin. Cela signifie que nous pouvons manipuler et utiliser cette interface d’objet de suivi sans avoir à nous soucier d’envoyer accidentellement des hits à de mauvaises propriétés GA !

j’utilise this.tracker = tracker; pour stocker une référence à l’objet tracker dans chaque instance du plugin créé avec ce constructeur. C’est pourquoi des commandes comme ga('simoPlugin:trackEvent') et ga('rollup.simoPlugin:trackEvent') accéder à un autre objet de suivi. Ils ont tous deux leurs propres fixations uniques de thiset ils ont donc tous deux leurs propres références d’objet de suivi uniques.

La ligne suivante accède au envoyerHitTask propriété de l’objet tracker. Chaque fois qu’une commande « envoyer » est utilisée avec la fonction globale Universal Analytics, une série de tâches est exécutée. envoyerHitTask est l’un d’entre eux, et il est utilisé pour envoyer la charge utile d’appel au point de terminaison de collecte Universal Analytics.

Le dernier appel dans le bloc est pour mettre à jour le envoyerHitTask tâche dans le tracker. Cette mise à jour utilise l’original envoyerHitTask (maintenant stocké dans une variable appelée originalSendHitTask), et envoie la charge utile au point de terminaison de collecte Universal Analytics comme auparavant. Les trois lignes suivantes créent une nouvelle requête HTTP vers le point de terminaison de votre choix. La charge utile de cette requête est exactement la même charge utile qui est envoyée à Universal Analytics.

En utilisant ce code, vous pourrez créer une copie parfaite du hit envoyé à Universal Analytics, et vous pourrez envoyer cette copie où vous voulez, comme un processeur de hit local ou un point de terminaison personnalisé dans un serveur cloud, par exemple .

Parce que ce code est dans le constructeur, il est automatiquement appliqué à tout commandes ‘send’ qui ont lieu sur la page après le chargement du plugin.

Le pousseur d’événements

Le pousseur d’événement est défini comme une méthode de SimoPlugin prototype d’objet. La raison pour laquelle nous l’appliquons au prototype est que nous voulons qu’il soit disponible pour toutes les instances créées avec le SimoPlugin constructeur. Si nous laissions le prototype objet de la déclaration, le trackEvent méthode serait ajoutée à un littéral d’objet appelé SimoPlugin, et non le prototype d’objet. Cela signifie que les instances créées à partir de ce prototype ne pourront pas utiliser cette méthode.

Encore une fois, si cela prête à confusion, assurez-vous de lire sur JavaScript orienté objet. C’est intéressant, et cela montre vraiment à quel point JavaScript est un langage de programmation complexe et puissant !

Le code du pousseur d’événement ressemblait à ceci :

SimoPlugin.prototype.trackEvent = function(evt) {   var c = evt['cat'];   var a = evt['act'];   var l = evt['lab'] || undefined;   var v = evt['val'] || undefined;   var x = {};   x['nonInteraction'] = evt['ni'] || false;   if (evt['di']) {     x['dimension' + evt['di']] = evt['dv'] || undefined;   }   this.tracker.send('event', c, a, l, v, x); }; 

Ce code prend un objet comme argument. Cet objet est envoyé avec le ga() commande lorsque la méthode est invoquée :

ga('simoPlugin:trackEvent', {   'cat' : 'category',   'act' : 'action',   'lab' : 'label',   'val' : 1,   'ni' : false,   'di' : 1,   'dv' : 'dimensionValue' }); 

Il existe des champs pour la catégorie, l’action, l’étiquette et la valeur, et je vous laisse également déterminer si le hit est sans interaction ou non. Enfin, vous pouvez également ajouter une dimension avec le numéro d’index et la valeur exposés dans les paramètres.

Étant donné que Catégorie et Action sont des champs obligatoires pour les événements, le code échouera s’ils ne se trouvent pas dans l’objet. Tous les autres champs peuvent être omis, c’est pourquoi je les ai résolus à indéfini s’ils n’existent pas dans l’objet événement. L’exception est la non-interaction champ, qui par défaut est faux.

En utilisant ce pousseur d’événement générique, il est assez simple d’envoyer des événements simples ET complexes à Universal Analytics.

La dernière ligne, this.tracker.send()envoie l’événement à l’aide de l’objet tracker send() méthode. Comme vous pouvez le voir, nous utilisons this.tracker, qui accède à l’interface de l’objet tracker utilisé pour appeler la méthode. La beauté du JavaScript orienté objet, ici mesdames et messieurs ! Si nous n’utilisions pas la puissance des instances d’objet comme celle-ci, nous aurions besoin de parcourir tous les trackers de la page pour trouver celui que nous voulons utiliser. Bien trop complexe !

Intégrations de plateforme

Eh bien, si le pousseur d’événements ne vous a pas convaincu de son potentiel, et si vous n’êtes pas impressionné par le duplicateur de hits, une autre bonne idée pour les plugins est d’intégrer une plate-forme SaaS et Google Analytics ensemble.

Par exemple, supposons que vous disposiez d’une plate-forme via laquelle vous pouvez créer une nouvelle dimension personnalisée dans une propriété Universal Analytics, puis que vous puissiez la remplir avec une valeur. Cela se produirait par programmation et la plate-forme utiliserait l’API de gestion Google Analytics pour créer la dimension personnalisée.

Une fois la dimension créée, vous générez dynamiquement la bibliothèque de plug-ins JavaScript pour inclure ces dimensions personnalisées créées par programmation. Ensuite, vous utilisez les commandes du plug-in pour envoyer des hits aux trackers, en utilisant les bonnes dimensions personnalisées.

Cela rend l’intégration entre la plate-forme et le site Web très plug-and-play, et vous n’avez pas besoin de demander aux utilisateurs de rechercher le numéro de dimension correct, de l’ajouter au code en ligne et de risquer un malentendu idiot ruinant l’intégration. .

C’est une façon tellement élégante d’associer un site Web à votre plateforme avec seulement deux lignes de code au mieux (une pour charger la bibliothèque, et une pour le ga('require', 'pluginName') téléphoner à).

Résumé

Les plugins sont un excellent moyen d’associer les appels souvent effectués avec leurs objets de suivi respectifs.

De plus, ils vous permettent de dissocier toutes les commandes Universal Analytics du code en ligne. Cela vous permet d’écrire des gestionnaires complexes pour ces commandes sans polluer le modèle de page.

Les plugins sont cependant un cas d’utilisation assez avancé pour la collecte de données. Ils nécessitent une très bonne compréhension de JavaScript et du fonctionnement de la bibliothèque Universal Analytics.

Surtout si vous travaillez avec des intégrations de plate-forme et que vous souhaitez minimiser la quantité de travail que les utilisateurs désireux d’implémenter le plugin doivent faire, je vous recommande fortement de parler à vos développeurs de la création d’un plugin personnalisé pour l’intégration.

Malheureusement, les plug-ins ne sont pas encore pris en charge par le modèle de balise Google Tag Manager Universal Analytics. Vous devrez donc peut-être utiliser une balise HTML personnalisée pour charger les plug-ins avec GTM. Voir cet article pour vous inspirer.