Fermer

juillet 27, 2018

Journalisation de l'activité avec l'API Web Beacon


À propos de l'auteur

Drew est un directeur chez edgeofmyseat.com, co-fondateur de Notist et développeur principal pour le petit système de gestion de contenu Perch . Avant cela, il était un développeur Web …
En savoir plus sur Drew

L'API Beacon est un moyen léger et efficace de consigner les informations d'une page Web sur un serveur. Découvrez comment cela peut être utilisé et ce qui le rend si différent des techniques traditionnelles Ajax.

L'API Beacon est une API Web basée sur JavaScript qui permet d'envoyer de petites quantités de données du navigateur au serveur Web sans attendre de réponse. Dans cet article, nous verrons à quoi cela peut être utile, ce qui le rend différent des techniques familières comme XMLHTTPRequest ('Ajax'), et comment vous pouvez commencer à l'utiliser.

vous savez pourquoi vous voulez déjà utiliser Beacon, n'hésitez pas à aller directement à la section Getting Started

À quoi sert l'API Beacon?

L'API Beacon est utilisée pour envoyer de petites quantités de données. des données à un serveur sans attendre de réponse . Cette dernière partie est essentielle et est la clé pour laquelle Beacon est si utile – notre code ne voit même jamais une réponse, même si le serveur en envoie un. Les balises sont spécifiquement destinées à l'envoi de données et à l'oubli. Nous n'attendons pas de réponse et nous n'obtenons pas de réponse.

Pensez-y comme une carte postale envoyée à la maison en vacances. Vous y mettez une petite quantité de données (un peu de "Souhait vous étiez ici" et "La météo a été belle"), mettez-la dans la boîte aux lettres, et vous n'attendez pas de réponse. Personne n'envoie une carte postale de retour disant "Oui, j'aurais aimé y être, merci beaucoup!"

Pour les sites web et les applications modernes, il y a un certain nombre de cas d'utilisation qui s'inscrivent parfaitement dans ce modèle d'envoi.

Suivi des statistiques et des données

Le premier cas d'utilisation qui vient à l'esprit pour la plupart des gens est l'analytique. De grandes solutions comme Google Analytics pourraient donner un bon aperçu de choses comme des visites de pages, mais que se passerait-il si nous voulions quelque chose de plus personnalisé? Nous pourrions écrire du JavaScript pour suivre ce qui se passe dans une page (peut-être comment un utilisateur interagit avec un composant, jusqu'où ils ont défilé ou quels articles ont été affichés avant de suivre un CTA) mais nous devons envoyer ces données au serveur lorsque l'utilisateur quitte la page. Beacon est parfait pour cela, car nous enregistrons simplement les données et n'avons pas besoin de réponse.

Il n'y a pas de raison pour que nous ne couvrions pas le genre de tâches banales souvent traitées par Google Analytics. et la capacité de leur appareil et navigateur. Si l'utilisateur a une session connectée, vous pouvez même lier ces statistiques à une personne connue. Quelles que soient les données que vous rassemblez, vous pouvez les renvoyer au serveur avec Beacon.

Debugging And Logging

Une autre application utile pour ce comportement est la consignation des informations de votre code JavaScript. Imaginez que vous ayez un composant interactif complexe sur votre page qui fonctionne parfaitement pour tous vos tests, mais échoue parfois en production. Vous savez que cela échoue, mais vous ne pouvez pas voir l'erreur pour commencer à le déboguer. Si vous pouvez détecter un échec dans le code lui-même, vous pouvez alors rassembler des diagnostics et utiliser Beacon pour renvoyer le tout pour la journalisation.

En fait, toute tâche de journalisation peut être effectuée avec Beacon, soit la création de points de sauvegarde dans un jeu, collecter des informations sur l'utilisation des fonctionnalités ou enregistrer les résultats d'un test multivarié. Si c'est quelque chose qui se passe dans le navigateur que vous voulez que le serveur sache, alors Beacon est probablement un concurrent.

Ne pouvons-nous pas déjà faire cela?

Je sais ce que vous pensez. Rien de tout cela n'est nouveau, n'est-ce pas? Nous avons été en mesure de communiquer depuis le navigateur vers le serveur en utilisant XMLHTTPRequest depuis plus d'une décennie. Plus récemment, nous avons aussi l'API Fetch qui fait la même chose avec une interface plus moderne basée sur des promesses. Étant donné que, pourquoi avons-nous besoin de l'API Beacon?

La clé ici est que parce que nous n'obtenons pas de réponse, le navigateur peut mettre en file d'attente la demande et l'envoyer sans bloquer l'exécution de tout autre code. En ce qui concerne le navigateur, peu importe si notre code est toujours en cours d'exécution ou non, ou si l'exécution du script doit l'être, car il n'y a rien à retourner, il suffit d'envoyer la requête HTTP en arrière-plan

Cela peut signifier attendre que la charge du processeur soit plus faible ou que le réseau soit libre, ou même simplement l'envoyer immédiatement si c'est possible. L'important est que le navigateur met en file d'attente la balise et renvoie le contrôle immédiatement. Il ne tient pas les choses pendant que la balise envoie.

Pour comprendre pourquoi c'est un gros problème, nous devons regarder comment et quand ces sortes de demandes sont émises à partir de notre code. Prenons notre exemple d'un script de journalisation analytique. Notre code peut être chronométrer combien de temps les utilisateurs passent sur une page, il devient donc essentiel que les données sont renvoyées au serveur au dernier moment possible. Lorsque l'utilisateur quitte une page, nous voulons arrêter le chronométrage et renvoyer les données à la maison.

En général, vous devez utiliser l'événement décharger ou beforeunload pour exécuter la journalisation. Ceux-ci sont déclenchés lorsque l'utilisateur fait quelque chose comme suivre un lien sur la page pour naviguer. Le problème ici est que le code qui s'exécute sur l'un des événements décharger peut bloquer l'exécution et retarder le déchargement de la page. Si le déchargement de la page est retardé, le chargement de la page suivante est également retardé, et l'expérience est vraiment lente.

Gardez à l'esprit la lenteur des requêtes HTTP. Si vous songez à la performance, l'un des principaux facteurs que vous essayez de réduire est généralement les requêtes HTTP supplémentaires car il peut être très lent d'aller sur le réseau et d'obtenir une réponse. La dernière chose que vous voulez faire est de mettre cette lenteur entre l'activation d'un lien et le début de la requête pour la page suivante.

Beacon contourne cela en mettant la requête en attente sans bloquer, renvoyant le contrôle immédiatement à votre script . Le navigateur prend alors soin d'envoyer cette requête en arrière-plan sans bloquer. Cela rend tout plus rapide, ce qui rend les utilisateurs plus heureux et nous permet tous de garder nos emplois

Démarrage

Nous comprenons donc ce qu'est Beacon, et pourquoi nous pourrions l'utiliser, alors commençons avec du code. Les bases ne peuvent pas être plus simples:

 let result = navigator.sendBeacon (url, data);

Le résultat est booléen, true si le navigateur a accepté et mis en file d'attente la requête, et false s'il y a eu un problème.

Utilisation du navigateur . sendBeacon ()

navigator.sendBeacon prend deux paramètres. Le premier est l'URL à laquelle faire la demande. La requête est exécutée en tant que HTTP POST, envoyant toutes les données fournies dans le deuxième paramètre

Le paramètre de données peut être dans l'un des formats suivants, tous s'ils sont pris directement à partir de l'API Fetch. Cela peut être un Blob un BufferSource FormData ou URLSearchParams – essentiellement tous les types de corps utilisés lors d'une requête avec Fetch

J'aime utiliser FormData pour les données de valeur-clé de base car elles sont simples et faciles à lire.

 // URL pour envoyer les données à
Soit url = '/ api / my-endpoint';
    
// Crée un nouveau FormData et ajoute une paire clé / valeur
laissez data = new FormData ();
data.append ('bonjour', 'monde');
    
Laisser result = navigator.sendBeacon (url, data);
    
if (résultat) {
  console.log ('Mise en file d'attente réussie!');
} autre {
  console.log ('Failure.');
}

Support du navigateur

Le support dans les navigateurs pour Beacon est très bon, avec les seules exceptions notables étant Internet Explorer (fonctionne dans Edge) et Opera Mini. Pour la plupart des utilisations, cela devrait être bon, mais cela vaut la peine de tester le support avant d'essayer d'utiliser navigator.sendBeacon .

C'est facile à faire:

 if (navigator.sendBeacon) {
  // Code de balise
} autre {
  // Pas de balise. Peut-être retomber à XHR?
}

Si Beacon n'est pas disponible et que votre requête est importante, vous pouvez revenir à une méthode de blocage telle que XHR. En fonction de votre public et de votre but, vous pouvez choisir de ne pas vous déranger.

Un exemple: consigner l'heure sur une page

Pour voir cela en pratique, créons un système de base pour savoir combien de temps un utilisateur reste sur une page . Lorsque la page est chargée, nous notons l'heure et lorsque l'utilisateur quitte la page, nous envoyons l'heure de début et l'heure actuelle au serveur.

Comme nous nous soucions seulement du temps passé (pas de l'heure actuelle) nous pouvons utiliser performance.now () pour obtenir un horodatage de base lorsque la page se charge:

 let startTime = performance.now ();

Si nous terminons notre journalisation dans une fonction, nous pouvons l'appeler lorsque la page est déchargée.

 let logVisit = function () {
  // Test que nous avons le soutien
  if (! navigator.sendBeacon) renvoie true;
      
  // URL pour envoyer les données, par ex.
  laissez url = '/ api / log-visit';
      
  // Données à envoyer
  laissez data = new FormData ();
  data.append ('start', startTime);
  data.append ('end', performance.now ());
  data.append ('url', document.URL);
      
  // Allons-y!
  navigator.sendBeacon (url, données);
}

Enfin, nous devons appeler cette fonction lorsque l'utilisateur quitte la page. Mon premier instinct était d'utiliser l'événement décharger mais Safari sur un Mac semble bloquer la requête avec un avertissement de sécurité, donc beforeunload fonctionne très bien pour nous ici.

 .addEventListener ('beforeunload', logVisit);

Lorsque la page sera déchargée (ou, juste avant), notre fonction logVisit () sera appelée et à condition que le navigateur supporte l'API Beacon, notre balise sera envoyée.

il n'y a pas de support de Beacon, nous retournons true et prétendons que tout a bien fonctionné. false annulerait l'événement et arrêterait le déchargement de la page, ce qui serait regrettable.)

Pendant le suivi

Comme beaucoup des utilisations potentielles de Beacon tournent autour du suivi des activités, je pense qu'il serait négligent de ne pas mentionner les responsabilités sociales et légales que nous avons en tant que développeurs lors de la journalisation et du suivi des activités qui pourraient être liées aux utilisateurs

GDPR

On peut penser aux récentes lois européennes GDPR en ce qui concerne le courrier électronique, mais bien sûr, la législation concerne le stockage de tout type de données personnelles. Si vous savez qui sont vos utilisateurs et pouvez identifier leurs sessions, vous devriez vérifier quelle activité vous connectez et comment elle se rapporte à vos politiques.

Souvent, nous n'avons pas besoin de suivre autant de données que nos instincts en tant que développeurs Dis-nous que nous devrions. Il peut être préférable de stocker délibérément pas des informations permettant d'identifier un utilisateur, puis de réduire la probabilité de se tromper.

DNT: Ne pas suivre

En plus des exigences légales, la plupart Les navigateurs ont un paramètre permettant à l'utilisateur d'exprimer son désir de ne pas être suivi. Ne pas suivre envoie un en-tête HTTP avec la requête qui ressemble à ceci:

 DNT: 1 

Si vous consignez des données qui peuvent suivre un utilisateur spécifique et l'utilisateur envoie un en-tête DNT positif , alors il serait préférable de suivre les souhaits de l'utilisateur et anonymiser ces données ou de ne pas les suivre du tout.

En PHP, par exemple, vous pouvez très facilement tester cet en-tête comme ceci:

 if (! $ _SERVER ['HTTP_DNT'])) {
  // L'utilisateur ne souhaite pas être suivi ...
}

In Conclusion

L'API Beacon est un moyen très utile d'envoyer des données d'une page au serveur, en particulier dans un contexte de journalisation. La prise en charge du navigateur est très large et vous permet de consigner des données de manière transparente sans impact négatif sur l'expérience de navigation de l'utilisateur et les performances de votre site. La nature non bloquante des requêtes signifie que les performances sont beaucoup plus rapides que les alternatives telles que XHR et Fetch.

Si vous souhaitez en savoir plus sur l'API Beacon, les sites suivants valent le coup d'œil.

 Éditorial brisant (ra, il)




Source link