L’augmentation constante de l’utilisation du mobile au cours des dernières années a introduit de nouveaux défis pour l’analyse Web. Il ne s’agit pas seulement d’inadéquations dans le modèle de suivi (le concept de séances est encore plus absurde pour les applications que pour la navigation sur ordinateur), mais à propos de quelque chose de plus fondamental, de plus basique. Pensez-y : si un visiteur visite le site Web à l’aide d’un appareil mobile, il y a un risque important qu’il perde sa connectivité Internet et se déconnecte involontairement.

En fait, il leur suffit simplement de traverser une zone avec une mauvaise couverture – si les requêtes HTTP envoyées par le navigateur ne se terminent pas à temps, elles expirent et les hits sont perdus.

Pour les pages vues de Google Analytics, ce n’est pas si grave, car si l’utilisateur voit la page Web, il est très probable que la première page vue soit terminée. Cependant, qu’en est-il de toutes les autres interactions que nous voulons suivre, et l’utilisateur n’a pas de connexion Internet pour démarrer ? C’est vrai – nous perdrons ces interactions, car les requêtes sont abandonnées par le navigateur et ne sont jamais récupérées, même lorsque l’utilisateur récupère sa connexion.

Dans cet article, le brillant David Vallejo et moi-même proposerons une solution pour récupérer ces hits initialement abandonnés par le navigateur en raison de la connexion Internet hors ligne. OK, de qui je plaisante, c’est tout David. Je ne suis qu’un éditeur glorifié à ce stade.

Quoi qu’il en soit, encadrons-le comme ceci : le visiteur consulte notre page de contact et nous avons un événement en file d’attente lorsqu’il clique sur nos informations de contact par e-mail. Cependant, le visiteur est également dans le métro et au moment où il clique sur l’e-mail, il entre dans un tunnel. Oh non ! Ils perdent leur connexion Internet (satanés métros sans WiFi), et nous manquons notre suivi de conversion vital.

C’est la prémisse. Voici l’exécution.

Dans cet article, nous aborderons un certain nombre de concepts assez techniques, mais nous essaierons de les encadrer de manière à ce qu’ils aient un sens dans l’ensemble.

1. API Tâches Universal Analytics

2. L’API de stockage du navigateur

3. Envoi des hits Google Analytics avec un retard (le &qt paramètre)

4. Envoi de requêtes POST et HEAD personnalisées (protocole HTTP)

5. Regroupement des hits d’Universal Analytics

Tous ces concepts sont très utiles à connaître si vous souhaitez en savoir plus sur les mécanismes utilisés par le navigateur Web pour compiler et envoyer les requêtes à Universal Analytics.

Allons-y!

1. API de tâches Universal Analytics

A chaque fois un send la commande est envoyée au ga() méthode globale, une série de Tâches sont exécutés en séquence par la bibliothèque analytics.js. Ces tâches effectuent un certain nombre de tâches, telles que la construction de la charge utile, sa validation, l’échantillonnage des demandes et enfin l’envoi des demandes au point de terminaison Universal Analytics.

L’avantage de ces tâches est que nous pouvons les intercepter et les modifier à l’aide de l’API fournie par analytics.js.

Vous pouvez trouver une liste de toutes les tâches disponibles dans l’API ici. Cependant, dans cet article, nous nous concentrerons sur une tâche très spéciale et très importante : customTask. C’est une nouvelle tâche introduite très récemment (voici un guide de Simo).

Cette tâche porte bien son nom – elle est entièrement personnalisable. Il s’exécute d’abord dans la file d’attente des tâches, vous pouvez donc l’utiliser pour configurer l’objet de suivi ou même pour configurer d’autres tâches pour la personnalisation.

Dans ce guide, nous utiliserons customTask pour modifier le sendHitTask. De cette façon, nous pouvons vérifier si l’utilisateur dispose d’une connexion Internet lorsque sendHitTask est exécuté, et nous pouvons faire un certain nombre de choses si l’utilisateur a interrompu sa connexion. Nous utilisons customTask au lieu d’accéder directement sendHitTask simplement parce que cette méthode est beaucoup plus conviviale pour Google Tag Manager.

Bref, voici le processus :

customTask modifie sendHitTask avec OUR CODE avant le coup est envoyé.

Afin de détecter si l’utilisateur dispose d’une connectivité Internet, nous pourrions simplement interroger notre propre point de terminaison de serveur Web. Cependant, ce ne serait pas un bon test décisif car il se peut que seuls les serveurs de Google ne répondent pas. C’est pourquoi nous interrogerons le point de terminaison de Google pour vérifier si l’utilisateur dispose de la connectivité requise pour le suivi Google Analytics.

2. Le tracker hors ligne

La solution est qu’à chaque requête adressée à Universal Analytics, nous envoyons une requête HTTP HEAD au point de terminaison Universal Analytics. Si le point de terminaison ne répond pas, nous pouvons en déduire que l’utilisateur n’a pas de connectivité pour communiquer avec Google Analytics, et nous stockerons donc l’appel dans le stockage du navigateur jusqu’à ce que la couverture Internet soit rétablie.

Nous utiliserons localStorage pour la file d’attente, mais il va falloir tricher un peu. localStorage lui-même n’introduit aucune structure ou modèle de données plus profond – il traite simplement les paires clé-valeur. Donc, pour nous donner une flexibilité supplémentaire, nous utiliserons le Lockr couche de base de données open source. C’est un cadre simple et efficace, et il a un support de navigateur assez solide.

Cette solution récupère la charge utile des hits Universal Analytics à partir de sendHitTasket s’il n’y a pas de connexion Internet, ce hit est stocké dans localStorage avec l’horodatage de la demande. Ainsi, lorsque nous parvenons plus tard à envoyer le hit stocké, nous pouvons l’envoyer à son horodatage d’origine à Universal Analytics.

2.1. Le paramètre &qt

Les &qt Le protocole de mesure signifie temps d’attente. Fondamentalement, vous pouvez définir un nombre en millisecondes dans ce paramètre, et le hit sera envoyé avec un horodatage de plusieurs millisecondes dans le passé. Par exemple, si je sais que le hit que je veux envoyer s’est produit il y a 45 minutes, je peux définir le paramètre sur :

&qt=2700000

Il y a juste une petite bizarrerie étrange que vous devez connaître &qt. Le dernier jour auquel vous pouvez envoyer l’appel déplacé est à 03:59:59 (dans le fuseau horaire de la vue Google Analytics à laquelle l’appel est envoyé). Ainsi, la valeur maximale de &qt est de 27 heures, 59 minutes et 59 secondes (en millisecondes), si l’appel s’est produit à minuit exactement, et que vous l’envoyez ensuite le lendemain matin, juste avant 4 heures du matin.

Oui, cela peut être difficile à saisir, nous allons donc suivre la recommandation officielle : éviter d’envoyer des hits plus de 4 heures dans le passépuisqu’il n’y a aucune garantie qu’ils seront envoyés.

3. La requête HTTP HEAD

Alors, quelle est cette requête HEAD et pourquoi l’utilisons-nous ? Eh bien, c’est identique à GET, sauf qu’il ne renvoie que les en-têtes HTTP (et les métadonnées associées), jamais de contenu.

C’est donc une excellente méthode à utiliser si nous voulons uniquement tester un point de terminaison, et ne pas entrer dans le processus coûteux de récupération des données à partir de celui-ci.

Étant donné que nous souhaitons uniquement savoir si le point de terminaison Universal Analytics répond, la requête HTTP HEAD est parfaite à cette fin. Voyez également son efficacité par rapport à POST et GET :

4. Le code JavaScript

Le code se décline en trois parties. La première est la bibliothèque pour étendre la base de données : Lockr. Ensuite, nous avons le customTask l’exécution, et enfin nous enchaînerons les requêtes HTTP HEAD et batch ensemble pour que le tout clique.

4.1. Téléchargement de Lockr

Pour commencer, allez-y et chargez Lockr sur votre site comme vous le souhaitez. Si vous utilisez Google Tag Manager, nous vous recommandons de charger le code suivant dans un Balise HTML personnalisée qui tire sur Toutes les pages avec le plus haut possible Priorité des balises. Alternativement, si vous acceptez une surcharge et une redondance, vous pouvez simplement ajouter la bibliothèque en haut de la variable JavaScript personnalisée elle-même, comme dans l’exemple du chapitre suivant.

Voici le code JavaScript réduit – il doit être exécuté par le navigateur avant l’exécution de la solution de suivi hors ligne :

!function(e,t){"undefined"!=typeof exports?"undefined"!=typeof module&&module.exports&&(exports=module.exports=t(e,exports)):"function"==typeof define&&define.amd?define(["exports"],function(r){e.Lockr=t(e,r)}):e.Lockr=t(e,{})}(this,function(e,t){"use strict";return Array.prototype.indexOf||(Array.prototype.indexOf=function(e){var t=this.length>>>0,r=Number(arguments[1])||0;for((r=r<0?Math.ceil(r):Math.floor(r))<0&&(r+=t);r<t;r++)if(r in this&&this[r]===e)return r;return-1}),t.prefix="",t._getPrefixedKey=function(e,t){return(t=t||{}).noPrefix?e:this.prefix+e},t.set=function(e,t,r){var o=this._getPrefixedKey(e,r);try{localStorage.setItem(o,JSON.stringify({data:t}))}catch(r){console&&console.warn("Lockr didn't successfully save the '{"+e+": "+t+"}' pair, because the localStorage is full.")}},t.get=function(e,t,r){var o,n=this._getPrefixedKey(e,r);try{o=JSON.parse(localStorage.getItem(n))}catch(e){o=localStorage[n]?{data:localStorage.getItem(n)}:null}return o?"object"==typeof o&&void 0!==o.data?o.data:void 0:t},t.sadd=function(e,r,o){var n,a=this._getPrefixedKey(e,o),i=t.smembers(e);if(i.indexOf(r)>-1)return null;try{i.push(r),n=JSON.stringify({data:i}),localStorage.setItem(a,n)}catch 

Après ce vomissement de code, nous sommes prêts à plonger dans le vif du sujet avec un suivi des hits hors ligne !

4.2. Suivi des hits hors ligne pour Universal Analytics sur la page

Le JavaScript suivant s’exécute avec la valeur par défaut Outil de suivi Universal Analyticset donc tous les hits envoyés avec le ga('send', '...'); seront inclus dans le processus.

Pour que tout fonctionne, vous devez configurer votre code dans l’ordre suivant :

<head>   ...   <script>     // Put the Lockr code here first   </script>   <script>     var _offlineTracker = function(customTaskModel) {       // _offlineTracker (see below) here     };   </script>   <script>     // Universal Analytics snippet here     ga('create', 'UA-12345-1');     // Add the following line AFTER the 'create' command and BEFORE the first 'send' command     ga('set', 'customTask', _offlineTracker);     ga('send', 'pageview');   </script>   ... </head>

Et voici le code pour le _offlineTracker fonction de rappel.

var _offlineTracker = function(customTaskModel) {    Lockr.prefix = 'ga_';   // Grab the original sentHitTask Function from the first tracker. to kept the original hit sending function.   var originalSendHitTask = customTaskModel.get('sendHitTask');   customTaskModel.set('sendHitTask', function(model) {     // Let's send the original hit using the native functionality     originalSendHitTask(model);     // Grab the hit Payload     var payload_lz = model.get('hitPayload');     // Check if GA Endpoint is Ready     var http = new XMLHttpRequest();     http.open('HEAD', 'https://www.google-analytics.com/collect');     http.onreadystatechange = function() {       // Google Analytics endpoint is not reachable, let's save the hit                       if (this.readyState === this.DONE && this.status !== 200) {         Lockr.sadd('hits', payload_lz + "&qt=" + (new Date() * 1));       } else {         // Google Analytics endpoint is available, let's check if there are any unsent hits         if (Lockr.smembers("hits").length > 0) {                                   // Process hits in queue           var current_ts = new Date() * 1 / 1000;           var hits = Lockr.smembers("hits");            // ./batch endpoint only allows 20 hits per batch, let's chunk the hits array.            var chunk_size = 20;           var chunked_hits = Lockr.smembers("hits").map(function(e, i) {             return i % chunk_size === 0 ? hits.slice(i, i + chunk_size) : null;           }).filter(function(e) {             return e;           });           // Let's loop thru the chunks array and send the hits to GA           for (var i = 0; i < chunked_hits.length; i++) {             var xhr = new XMLHttpRequest();             xhr.open('POST', 'https://www.google-analytics.com/batch', true);             // Build the Batch Payload and Take care of calculating the Queue Time              xhr.send(chunked_hits[i].map(function(x) {               if (x.indexOf("&qt=") > -1) {                 return x.replace(/qt=([^&]*)/, "qt=" + Math.round(current_ts - x.match(/qt=([^&]*)/)[1] / 1000) * 1000);               } else return x;             }).join("\n"));           }           //Hits sent, flush the Storage           Lockr.flush();         }       }     };     http.send();   }); }; 

Une fois que vous créez ce _offlineTracker et l’invoquer dans ga('set', 'customTask', _offlineTracker) commande, chaque hit qui utilise ce tracker sera stocké dans la file d’attente s’il n’y a pas de connectivité Internet. Une fois qu’un hit est envoyé avec une connexion solide, tous les hits de la file d’attente sont également envoyés.

4.3. Suivi des hits hors ligne pour Google Tag Manager

Avec Google Tag Manager, vous pouvez vous débrouiller avec une seule variable JavaScript personnalisée. Cette variable peut être configurée pour inclure également le code Lockr, elle est donc complètement autonome. Donnez à la variable un nom descriptif, par exemple {{JS – suivi des appels hors ligne customTask}} et mettez le code suivant à l’intérieur:

function() {   return function(customTaskModel) {     // Load Lockr if it hasn't already been loaded     if (!window.Lockr) {       !function(e,t){"undefined"!=typeof exports?"undefined"!=typeof module&&module.exports&&(exports=module.exports=t(e,exports)):"function"==typeof define&&define.amd?define(["exports"],function(r){e.Lockr=t(e,r)}):e.Lockr=t(e,{})}(this,function(e,t){"use strict";return Array.prototype.indexOf||(Array.prototype.indexOf=function(e){var t=this.length>>>0,r=Number(arguments[1])||0;for((r=r<0?Math.ceil(r):Math.floor(r))<0&&(r+=t);r<t;r++)if(r in this&&this[r]===e)return r;return-1}),t.prefix="",t._getPrefixedKey=function(e,t){return(t=t||{}).noPrefix?e:this.prefix+e},t.set=function(e,t,r){var o=this._getPrefixedKey(e,r);try{localStorage.setItem(o,JSON.stringify({data:t}))}catch(r){console&&console.warn("Lockr didn't successfully save the '{"+e+": "+t+"}' pair, because the localStorage is full.")}},t.get=function(e,t,r){var o,n=this._getPrefixedKey(e,r);try{o=JSON.parse(localStorage.getItem(n))}catch(e){o=localStorage[n]?{data:localStorage.getItem(n)}:null}return o?"object"==typeof o&&void 0!==o.data?o.data:void 0:t},t.sadd=function(e,r,o){var n,a=this._getPrefixedKey(e,o),i=t.smembers(e);if(i.indexOf(r)>-1)return null;try{i.push(r),n=JSON.stringify({data:i}),localStorage.setItem(a,n)}catch     }     Lockr.prefix = 'ga_';     // Grab the original sentHitTask Function from the first tracker. to kept the original hit sending function.     var originalSendHitTask = customTaskModel.get('sendHitTask');     customTaskModel.set('sendHitTask', function(model) {       // Let's send the original hit using the native functionality       originalSendHitTask(model);       // Grab the hit Payload       var payload_lz = model.get('hitPayload');       // Check if GA Endpoint is Ready       var http = new XMLHttpRequest();       http.open('HEAD', 'https://www.google-analytics.com/collect');       http.onreadystatechange = function() {         // Google Analytics endpoint is not reachable, let's save the hit                         if (this.readyState === this.DONE && this.status !== 200) {           Lockr.sadd('hits', payload_lz + "&qt=" + (new Date() * 1));         } else {           // Google Analytics endpoint is available, let's check if there are any unsent hits           if (Lockr.smembers("hits").length > 0) {                                     // Process hits in queue             var current_ts = new Date() * 1 / 1000;             var hits = Lockr.smembers("hits");              // ./batch endpoint only allows 20 hits per batch, let's chunk the hits array.              var chunk_size = 20;             var chunked_hits = Lockr.smembers("hits").map(function(e, i) {               return i % chunk_size === 0 ? hits.slice(i, i + chunk_size) : null;             }).filter(function(e) {               return e;             });             // Let's loop thru the chunks array and send the hits to GA             for (var i = 0; i < chunked_hits.length; i++) {               var xhr = new XMLHttpRequest();               xhr.open('POST', 'https://www.google-analytics.com/batch', true);               // Build the Batch Payload and Take care of calculating the Queue Time                xhr.send(chunked_hits[i].map(function(x) {                 if (x.indexOf("&qt=") > -1) {                   return x.replace(/qt=([^&]*)/, "qt=" + Math.round(current_ts - x.match(/qt=([^&]*)/)[1] / 1000) * 1000);                 } else return x;               }).join("\n"));             }             //Hits sent, flush the Storage             Lockr.flush();           }         }       };       http.send();     });   }; } 

Ajoutez ce code à toutes vos balises Universal Analytics en faisant défiler jusqu’à Plus de réglages -> Champs à définir. Ici, vous ajoutez un nouveau champ avec :

Nom de domaine: tâche personnalisée
Évaluer: {{JS – suivi des appels hors ligne customTask}}

Une fois que vous avez fait cela, alors tous vos tags avec ceci tâche personnalisée sont protégés contre une mauvaise connectivité et chaque fois que la connexion est rétablie, la file d’attente batch est traitée.

4.4. À propos du traitement par lots

Universal Analytics vous permet d’envoyer des hits à son point de terminaison par lots. Ceci est principalement utilisé par les SDK iOS et Android. Le point principal de l’utilisation du point de terminaison de lot (/batch) consiste à envoyer le moins de requêtes HTTP possible. Ici, le traitement par lots signifie que nous pouvons envoyer plusieurs charges utiles Universal Analytics dans une seule requête HTTP.

Le traitement par lot a certaines limites que nous devrons prendre en compte :

• Un maximum de 20 occurrences peut être spécifié par requête.

• La taille combinée de toutes les charges utiles d’appel ne peut pas être supérieure à 16 Ko.

• Aucune charge utile de hit ne peut être supérieure à 8 ko.

• La demande doit être faite en POST

Pour notre solution, chaque fois que le nombre de hits stockés est supérieur à 1, nous envoyons les charges utiles à l’aide du point de terminaison batch. Au cas où il y aurait trop de hits stockés dans la file d’attente, nous les segmentons afin que plusieurs…