Partage de technologie

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Adresse d'origine

Qu'est-ce qu'un lieu de sépulture ?

Le nom scientifique est Event Tracking, qui se concentre principalement sur la capture, le traitement et l'envoi de technologies associées et de processus de mise en œuvre pour le comportement des utilisateurs ou les processus métier.
Enterrer un point est un terme professionnel dans le domaine des données, et c'est également un nom courant dans le domaine Internet.

Les points enterrés constituent la base de l'analyse des données produits et sont généralement utilisés pour le retour d'expérience des systèmes de recommandation, le suivi et l'analyse du comportement des utilisateurs, l'analyse statistique de nouvelles fonctions ou des effets de l'activité opérationnelle, etc.

Les points d'intégration incluent deux concepts importants : événement (event) et attribut (param)

• Événement : ce qui se passe dans l'application, comme les actions de l'utilisateur, les événements système ou les erreurs système. Par exemple, si vous photographiez un produit, il contient les événements suivants : enter_page (entrer dans la page), Leave_page (quitter la page).
• Param : attribut défini pour décrire un segment d'utilisateurs, tel que la préférence linguistique ou l'emplacement géographique. Prenons l'exemple de l'événement « Entrer l'exercice après les cours ». Il contient les attributs d'événement suivants : enter_from (à partir de quelle page), class_id (identifiant du cours), etc.
• Valeur de l'attribut (valeur) : La dimension de l'attribut, c'est-à-dire la dimension spécifique lorsque le comportement est déclenché. Par exemple : enter_from : home (page d'accueil), system (système), etc.

Plan généraliste

L'enfouissement sans trace (enfouissement complet) utilise la méthode de surveillance intégrée du navigateur ou de l'application pour surveiller la page de navigation, les clics et d'autres comportements de l'utilisateur. Il est généralement utilisé pour l'analyse de données à gros grains, telles que le slardar de l'entreprise.
défaut:

• Les données sont bruitées et sont collectées indépendamment du fait qu'elles soient utiles ou non.
• Impossible de personnaliser les points enterrés, impossible de collecter les événements et attributs métier spécifiés
• Moins d’informations disponibles pour DA
  avantage:
• Accès simple, presque aucune intrusion, aucun coût de développement supplémentaire requis
• La collection de comportements d'utilisation des utilisateurs est très complète et presque aucune omission n'est faite

Points d'enfouissement du code, les développeurs front-end personnalisent la surveillance et la collecte dans le code
défaut:

• La charge de travail est lourde, le code est intrusif et la maintenance ultérieure est peu pratique.
  avantage:
• Peut enterrer avec précision des points et avoir une identification claire des événements
• Les attributs du vendeur sont très riches
• La méthode de déclenchement du point enterré peut être définie de manière flexible
• DA est plus pratique et précis à utiliser

SDK de points enterrés, le SDK expose l'interface de reporting des points enterrés, et les développeurs ne connaissent pas le processus de surveillance et de collecte, comme le thé de l'entreprise
Inconvénients : NA
avantage:

• Le développement commercial doit uniquement prêter attention à l'identification des événements, aux attributs commerciaux, etc.
• Prise en compte des avantages des points d'enfouissement sans trace et des points d'enfouissement codés

Attributs cachés courants

Habituellement, le front-end compte les points enterrés en fonction des dimensions de la page. Les attributs d'événement courants sont les suivants :

Événements enterrés courants

Solution de collecte de données sur les performances

Actuellement, la plupart des données des indicateurs de performances proviennent de l'API window.performance.

Indicateurs de performance communs

PF

L'indicateur FP (FIrst Paint) reflète généralement le temps d'écran blanc de la page. Le temps d'écran blanc reflétera la situation actuelle. Plus le temps d'attente de l'utilisateur pour le contenu est court, plus les performances de chargement du réseau sont élevées. est très bon, l'écran blanc Plus le temps est court, plus la probabilité de désabonnement des utilisateurs est faible.

Cet indicateur peut obtenir les informations de point fournies par l'API PerformancePaintTming via la méthode preformance.getEntriesByType('paint') Recherchez l'objet portant le nom first-paint et la description correspond aux données de l'indicateur FP :

FCP

FCP (First Contentful Paint) est le moment où le contenu est rendu pour la première fois. Dans les indicateurs statistiques de performance, le temps écoulé entre le moment où l'utilisateur commence à accéder à la page Web et FCP peut généralement être considéré comme le temps sans contenu. , FCP >= FP

Les indicateurs peuvent obtenir les informations ponctuelles fournies par l'API PerformancePaintTiming via la méthode performance.getEntriesByType('paint') Recherchez l'objet portant le nom first-contentful-paint, qui décrit les données de l'indicateur FCP, comme indiqué dans la figure suivante :

FMP

FMP (First Meaningful Paint) est le moment où un contenu significatif est dessiné pour la première fois. Lorsque la mise en page et le contenu textuel de la page entière sont complètement rendus, on peut considérer que la première peinture significative d'un contenu significatif est terminée.Par conséquent, FMP mesure le temps nécessaire aux utilisateurs pour voir le contenu principal d’une page Web et constitue un indicateur de mesure important du point de vue de l’expérience utilisateur.

Une méthode de calcul du FMP désormais reconnue par l'industrie front-end est « le temps de dessin après le changement maximal de mise en page de la page pendant le chargement et le rendu ». Vous pouvez utiliser MutationObserver pour surveiller chaque changement global du DOM de la page, déclencher le rappel de MutationObserver et calculer le score de changement de l'arborescence DOM actuelle pendant le rappel. Le moment où le score change le plus est le moment FMP.

TTI

TTI (Time To Interactive), qui est le temps qu'il faut depuis le début du chargement de la page jusqu'à ce que la page soit dans un état entièrement interactif. Lorsque la page est dans un état entièrement interactif, les trois conditions suivantes sont remplies :

La page affiche déjà du contenu utile.
La fonction de réponse aux événements associée aux éléments visibles sur la page a été enregistrée.
La fonction de réponse à un événement peut commencer à s'exécuter dans les 50 ms suivant l'apparition de l'événement.

Indicateur de chargement des ressources

window.performance.getEntriesByType('resource') renverra divers indicateurs de performance de toutes les ressources (js, css, img...) chargées sur la page actuelle, qui peuvent être utilisés pour la collecte de données statiques sur les performances des ressources.

Les principaux types sont : script, lien, img, css, xmlhttprequest, beacon, fetch, autre.
PerformanceResourceTiming - API Web | MDN

Autres méthodes de calcul des indicateurs

Solution de collecte de données d'erreur

Il en existe trois sortes

• Erreurs de chargement des ressources, capturez les erreurs d'échec de chargement des ressources dans la phase de capture via addEventListener('error', callback, true).
• js, capturez les erreurs js via window.onerror.
  • Les scripts inter-domaines afficheront une invite « Erreur de script » et aucune information spécifique sur l'erreur ni sur la pile ne pourra être obtenue. À ce stade, vous devez ajouter l'attribut crossorigin="anonymous" à la balise de script et le serveur de ressources doit ajouter les configurations liées à CORS, telles que Access-Control-Allow-Origin : *
• Erreur de promesse, capturez l'erreur de promesse via addEventListener('unhandledrejection', callback), mais il n'y a aucune information telle que le nombre de lignes et de colonnes où l'erreur s'est produite, vous ne pouvez donc générer que manuellement les informations d'erreur pertinentes.

// 在捕获阶段，捕获资源加载失败错误
Element.addEventListener('error', e => {
const target = e.target
    if (target != window) {
        monitor.errors.push({
            type: target.localName,
            url: target.src || target.href,
            msg: (target.src || target.href) + ' is load error',
            time: Date.now()
        })
    }
})

// 监听 js 错误
window.onerror = function(msg, url, row, col, error) {
    monitor.errors.push({
        type: 'javascript',
        row: row,
        col: col,
        msg: error && error.stack? error.stack : msg,
        url: url,
        time: Date.now()
    })
}
// 监听 promise 错误 缺点是获取不到行数数据
addEventListener('unhandledrejection', e => {
    monitor.errors.push({
        type: 'promise',
        msg: (e.reason && e.reason.msg) || e.reason || '',
        time: Date.now()
    })
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

Plan de reporting des données

Dans ce scénario, il y a deux problèmes à considérer :

Si l'interface de reporting des données et le système métier utilisent le même nom de domaine, le navigateur a des limites sur le nombre de requêtes simultanées, il existe donc une possibilité de concurrence pour les ressources réseau.
Les navigateurs ignorent généralement les requêtes ajax asynchrones lorsque la page est déchargée. Si une requête de données est nécessaire, une requête ajax synchrone est généralement créée dans l'événement unload ou beforeunload pour retarder le déchargement de la page. Du point de vue de l’utilisateur, les sauts de page ralentissent.

Navigateur.sendBeacon

avantage:
Envoie des données de manière fiable lorsque la page est déchargée, sans empêcher la fermeture de la page.
Prise en charge de l'envoi de données en arrière-plan.

défaut:
Seules les requêtes POST peuvent être envoyées et les résultats des réponses ne peuvent pas être obtenus.

En plus d'Internet Explorer, les navigateurs modernes grand public actuels ont un taux de prise en charge très élevé des balises. Balise - Documentation MDN

L'interface Beacon permet de programmer des requêtes asynchrones non bloquantes vers le serveur Web.

• Les requêtes Beacon utilisent la méthode HTTP POST et ne nécessitent pas de réponse.
• Les requêtes de balise garantissent que l'initialisation est terminée avant que la page ne déclenche le déchargement.

En termes simples, Beacon peut envoyer des données de manière asynchrone au serveur et peut garantir que la demande est envoyée avant la fin du déchargement de la page (résoudre le problème selon lequel le déchargement de la page ajax mettra fin à la demande). Comment l'utiliser:

navigator.sendBeacon(url, data);
1

Le paramètre data est facultatif et son type peut être ArrayBufferView, Blob, DOMString ou FormData. Si le navigateur ajoute avec succès la demande de balise à la file d'attente à envoyer, cette méthode renverra vrai, sinon elle renverra faux.

Lors de l'utilisation de Beacon, le backend doit utiliser la méthode post pour recevoir les paramètres. Compte tenu des problèmes inter-domaines, le backend doit également modifier l'interface et configurer CORS. Dans le même temps, l'en-tête de requête doit correspondre à l'en-tête de requête sécurisé CORS, dans lequel le type de contenu doit être application/x-www-form-urlencoded, multipart/form-data ou text/plain.

type ContentType = 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';

const serilizeParams = (params: object) => {
    return window.btoa(JSON.stringify(params))
}

function sendBeacon(url: string, params: object) {
  const formData = new FormData()
  formData.append('params', serilizeParams(params))
  navigator.sendBeacon(url, formData)
}

1
2
3
4
5
6
7
8
9
10
11
12

Image

avantage:
Il est simple à utiliser, présente une bonne compatibilité et peut être signalé sur plusieurs domaines.
Ne bloquera pas le chargement et la fermeture de la page.

défaut:
Seules les requêtes GET peuvent être envoyées et les résultats des réponses ne peuvent pas être obtenus.
Les opérations asynchrones ne sont pas prises en charge.

Le problème de compatibilité de sendBeacon est inévitable, mais vous pouvez utiliser pleinement la fonctionnalité selon laquelle la plupart des navigateurs termineront le chargement de l'image avant le déchargement de la page et signaler les données en ajoutant img à la page.

function sendImage(url: string, params: object) {
  const img = new Image()

  img.style.display = 'none'

  const removeImage = function() {
    img.parentNode.removeChild(img)
  }

  img.onload = removeImage
  img.onerror = removeImage

  img.src = `${url}?params=${serilizeParams(params)}`

  document.body.appendChild(img)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Étant donné que l'image img est une requête get, différents serveurs ont des restrictions sur la longueur de l'URI. Lorsque la longueur dépasse la limite, une erreur HTTP 414 se produit. Par conséquent, vous devez également faire attention à la fréquence de rapport pour réduire trop d'attributs. téléchargé en même temps.

Solutions compatibles

La méthode sendBeacon est préférée et la méthode Image est utilisée comme solution de secours.

function sendLog(url: string, params: object) {
    if（navigator.sendBeacon) {
        sendBeacon(url, params)
    } else {
        sendImage(url, params)
    }
}
1
2
3
4
5
6
7
8

En fait, beaucoup de gens utilisent le GIF pour enterrer ce point ?
La transmission des données au serveur peut être effectuée en demandant l'interface, en demandant des fichiers ordinaires ou en demandant des ressources d'image. Tant que les données peuvent être rapportées, qu'il s'agisse de demander un fichier GIF, de demander un fichier js ou d'appeler une interface de page, le serveur ne se soucie pas réellement de la méthode de rapport spécifique. Alors pourquoi tous les systèmes utilisent-ils uniformément la méthode consistant à demander des images GIF pour rapporter des données ?
●Empêcher les opérations inter-domaines
De manière générale, le nom de domaine en pointillés n'est pas le nom de domaine actuel, donc toutes les requêtes d'interface constitueront des requêtes cross-domaines. Les requêtes inter-domaines peuvent facilement être interceptées par les navigateurs en raison d'une configuration incorrecte et d'erreurs de rapport, ce qui est inacceptable. Cependant, l'attribut src de l'image ne traverse pas le domaine et des requêtes peuvent également être initiées. (Exclure les rapports d'interface)
●Empêcher de bloquer le chargement des pages et d'affecter l'expérience utilisateur
Habituellement, après avoir créé un nœud de ressource, le navigateur n'enverra pas de demande de ressource jusqu'à ce que l'objet soit injecté dans l'arborescence DOM du navigateur. L'utilisation répétée du DOM entraînera non seulement des problèmes de performances, mais le chargement de ressources js/css bloquera également le rendu des pages et affectera l'expérience utilisateur.
L'exception concerne les demandes d'images. Non seulement il n'a pas besoin d'être inséré dans le DOM lors de la construction d'une image, mais il peut lancer une requête tant que le nouvel objet Image est créé en js, et il n'y a pas de problème de blocage dans un environnement de navigateur sans js, c'est possible. également être géré normalement via la balise img, qui est un autre type de demande de ressources qui ne peut pas être fait. (Exclure la méthode de fichier)
●Par rapport au PNG/JPG, le GIF a la plus petite taille
Le plus petit fichier BMP nécessite 74 octets, PNG nécessite 67 octets et un GIF légal ne nécessite que 43 octets.
Pour la même réponse, GIF peut économiser 41 % de trafic que BMP et 35 % de trafic que PNG.
Et la plupart d’entre eux utilisent un GIF transparent de 1*1 pixel pour créer des rapports.
1x1 pixel est la plus petite image légale. De plus, comme cela se fait à travers des images, il est préférable de rendre les images transparentes, afin que cela n'affecte pas l'effet d'affichage de la page elle-même. Pour indiquer que l'image est transparente, il vous suffit d'utiliser un bit binaire pour marquer. l'image comme une couleur transparente, et il n'est pas nécessaire de stocker les données de l'espace colorimétrique, ce qui peut économiser du volume.

API XMLHttpRequest ou Fetch

avantage:

Des requêtes asynchrones peuvent être envoyées et plusieurs méthodes HTTP telles que GET et POST sont prises en charge.
Les résultats de la réponse peuvent être obtenus et traités ultérieurement.
défaut:

La logique de demande et de réponse doit être gérée manuellement.
Besoin de gérer les problèmes de requêtes inter-domaines (tels que la configuration de CORS).

Utilisez XMLHttpRequest ou l'API Fetch pour envoyer des requêtes asynchrones pour rapporter des données. Vous pouvez choisir d'utiliser la méthode GET ou POST et envoyer les données sous forme de corps de requête ou de paramètres d'URL.

WebSocket

avantage:

Bonnes performances en temps réel et prend en charge la communication bidirectionnelle.
Convient à la surveillance en temps réel et au reporting de données à grande échelle.
défaut:

Le serveur doit prendre en charge le protocole WebSocket.
Plus complexe et ne convient pas aux exigences simples de points enterrés.

Plateforme de reporting

Les outils d'enfouissement de données frontaux courants incluent Google Analytics, Baidu Statistics, Umeng Statistics, etc. Bien entendu, vous pouvez également utiliser l'interface ou la plate-forme interne de l'entreprise pour la création de rapports.

Prenons Google Analytics comme exemple :
Google Analytics est un outil d'analyse de site Web développé par Google pour suivre et générer des rapports sur le trafic d'un site Web. Il aide les propriétaires de sites Web à comprendre le comportement de leurs visiteurs, notamment qui ils sont, d'où ils viennent, ce qu'ils font sur le site, et bien plus encore. Grâce à Google Analytics, les propriétaires de sites Web peuvent mieux comprendre leur audience, optimiser le contenu du site Web et les stratégies marketing, améliorant ainsi les performances du site Web et l'expérience utilisateur. Google Analytics fournit une multitude de fonctions d'analyse de données, notamment des données en temps réel, l'analyse du comportement des utilisateurs, le suivi des conversions, l'analyse des sources de trafic, etc. Il s’agit d’un outil puissant largement utilisé dans divers sites Web et campagnes de marketing en ligne.

Comment utiliser Google Analytics

Puisque nous utilisons Google Analytics, nous devons d'abord disposer d'un compte Google, que vous devez créer vous-même. Deuxièmement, vous devez connaître l'entrée de Google Analytics. Voici les deux adresses utilisées :

Gestionnaire de balises Google : tagmanager.google.com/

Analyses : analytics.google.com/

Gestionnaire de balises Google
Google Tag Manager (GTM) est un système de gestion de balises développé et fourni par Google. Il permet aux administrateurs de sites Web de gérer et de déployer divers codes de suivi, codes d'analyse et balises marketing sans modifier le code du site Web. Avec GTM, les utilisateurs peuvent facilement ajouter, mettre à jour et supprimer des balises sans dépendre des développeurs.

Les principales fonctionnalités de GTM incluent :
En clair : cette plate-forme est utilisée pour collecter des événements cachés déclenchés par le front-end et peut réaliser des rapports de données en personnalisant les conditions de déclenchement et en déclenchant des rappels d'événements. Elle est utilisée ici pour collecter des données et les signaler à Google Analytics.

Google Analytics
Comme son nom l'indique, il s'agit d'un site Web utilisé pour collecter, visualiser et afficher des données.