Technologieaustausch

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

Ursprüngliche Adresse

Was ist eine Grabstätte?

Der wissenschaftliche Name lautet Event Tracking, wobei es vor allem um die Erfassung, Verarbeitung und Versendung verwandter Technologien und Umsetzungsprozesse für Nutzerverhalten oder Geschäftsprozesse geht.
Einen Punkt begraben ist ein Fachbegriff im Datenbereich und auch im Internetbereich ein gebräuchlicher Name.

Vergrabene Punkte sind die Grundlage für die Produktdatenanalyse und werden im Allgemeinen für Rückmeldungen von Empfehlungssystemen, Überwachung und Analyse des Benutzerverhaltens, statistische Analyse neuer Funktionen oder betrieblicher Aktivitätseffekte usw. verwendet.

Einbettungspunkte umfassen zwei wichtige Konzepte: Ereignis (Ereignis) und Attribut (Param).

• Ereignis: Was in der Anwendung passiert, z. B. Benutzeraktionen, Systemereignisse oder Systemfehler. Wenn Sie beispielsweise ein Produkt fotografieren, enthält es die folgenden Ereignisse: enter_page (Seite betreten), Leave_page (Seite verlassen).
• Param: Ein Attribut, das zur Beschreibung eines Benutzersegments definiert ist, z. B. Sprachpräferenz oder geografischer Standort. Nehmen Sie als Beispiel das Ereignis „Übung nach dem Unterricht eingeben“. Es enthält die folgenden Ereignisattribute: enter_from (von welcher Seite), class_id (Kurs-ID) usw.
• Attributwert (Wert): Die Dimension des Attributs, dh die spezifische Dimension, wenn das Verhalten ausgelöst wird. Zum Beispiel: enter_from: home (Homepage), System (System) usw.

Mainstream-Plan

Traceless Burying (vollständiges Vergraben) verwendet die integrierte Überwachungsmethode des Browsers oder der APP, um die Browsing-Seite, den Klick und andere Verhaltensweisen des Benutzers zu überwachen. Es wird im Allgemeinen für eine grobkörnige Datenanalyse verwendet, beispielsweise für den Slardar des Unternehmens
Mangel:

• Daten sind verrauscht und werden unabhängig davon erfasst, ob sie nützlich sind oder nicht.
• Vergrabene Punkte können nicht angepasst werden, bestimmte Ereignisse und Geschäftsattribute können nicht erfasst werden
• Dem Staatsanwalt stehen weniger Informationen zur Verfügung
  Vorteil:
• Einfacher Zugriff, nahezu kein Eingriff, keine zusätzlichen Entwicklungskosten erforderlich
• Die Erfassung des Benutzerbetriebsverhaltens ist sehr vollständig und es werden nahezu keine Auslassungen gemacht

Code-Vergrabungspunkte, Front-End-Entwickler passen die Überwachung und Sammlung im Code an
Mangel:

• Die Arbeitsbelastung ist hoch, der Code ist aufdringlich und die spätere Wartung ist umständlich.
  Vorteil:
• Kann Punkte genau vergraben und eine eindeutige Ereignisidentifizierung ermöglichen
• Verkäuferattribute sind sehr umfangreich
• Die Auslösemethode für vergrabene Punkte kann flexibel definiert werden
• DA ist bequemer und präziser zu verwenden

Das SDK für vergrabene Punkte stellt eine Schnittstelle zum Melden vergrabener Punkte bereit, und Entwickler wissen nichts über den Überwachungs- und Erfassungsprozess, wie z. B. das Unternehmen
Nachteile: NA
Vorteil:

• Die Geschäftsentwicklung muss nur auf die Ereignisidentifikation, Geschäftsattribute usw. achten.
• Unter Berücksichtigung der Vorteile von spurlosen Vergrabungspunkten und Code-Vergrabungspunkten

Häufige versteckte Attribute

Normalerweise zählt das Frontend vergrabene Punkte anhand der Seitenabmessungen. Die allgemeinen Ereignisattribute lauten wie folgt:

Häufige Beerdigungsereignisse

Lösung zur Erfassung von Leistungsdaten

Derzeit stammen die meisten Leistungsindikatordaten von der window.performance-API.

Gemeinsame Leistungsindikatoren

FP

Der FP-Indikator (First Paint) spiegelt normalerweise die Zeit auf dem weißen Bildschirm der Seite wider. Je kürzer die Zeit, die der Benutzer auf den Inhalt wartet, desto geringer ist die Ladeleistung ist sehr gut, der weiße Bildschirm Je kürzer die Zeit, desto geringer ist die Wahrscheinlichkeit einer Benutzerabwanderung.

Dieser Indikator kann die von der PerformancePaintTming-API bereitgestellten Punktinformationen über die Methode preformance.getEntriesByType('paint') abrufen. Suchen Sie das Objekt mit dem Namen first-paint, und die Beschreibung sind die FP-Indikatordaten:

FCP

FCP (First Contentful Paint) ist der Zeitpunkt, zu dem Inhalte zum ersten Mal gerendert werden. In den Leistungsstatistiken kann die Zeit vom Zeitpunkt des Zugriffs des Benutzers auf die Webseite bis zum FCP im Allgemeinen als die Zeit ohne Inhalt angesehen werden , FCP >= FP

Indikatoren können die von der PerformancePaintTiming-API bereitgestellten Punktinformationen über die Methode performance.getEntriesByType('paint') abrufen. Suchen Sie das Objekt mit dem Namen first-contentful-paint, das die FCP-Indikatordaten beschreibt, wie in der folgenden Abbildung dargestellt:

FMP

FMP (First Meaningful Paint) ist der Zeitpunkt, an dem bedeutungsvolle Inhalte zum ersten Mal gezeichnet werden. Wenn das Layout und der Textinhalt der gesamten Seite vollständig gerendert sind, kann davon ausgegangen werden, dass die erste bedeutungsvolle Zeichnung bedeutungsvoller Inhalte abgeschlossen ist.Daher misst FMP die Zeit, die Benutzer benötigen, um den Hauptinhalt einer Webseite zu sehen, und ist aus Sicht der Benutzererfahrung ein wichtiger Messindikator.

Eine Methode zur Berechnung von FMP, die mittlerweile von der Front-End-Branche anerkannt wird, ist „die Zeichenzeit nach der maximalen Layoutänderung der Seite während des Ladens und Renderns“. Sie können MutationObserver verwenden, um jede allgemeine DOM-Änderung der Seite zu überwachen, den Rückruf von MutationObserver auszulösen und den Änderungswert des aktuellen DOM-Baums während des Rückrufs zu berechnen. Der Zeitpunkt, an dem sich der Wert am meisten ändert, ist der FMP-Zeitpunkt.

TTI

TTI (Time To Interactive) ist die Zeit, die vom Beginn des Seitenladens bis zum vollständigen interaktiven Zustand der Seite vergeht. Wenn sich die Seite in einem vollständig interaktiven Zustand befindet, sind die folgenden drei Bedingungen erfüllt:

Die Seite zeigt bereits nützliche Inhalte an.
Die mit den sichtbaren Elementen auf der Seite verknüpfte Ereignisantwortfunktion wurde registriert.
Die Ereignisreaktionsfunktion kann innerhalb von 50 ms nach Eintreten des Ereignisses ausgeführt werden.

Indikator für die Ressourcenauslastung

window.performance.getEntriesByType('resource') gibt verschiedene Leistungsindikatoren aller auf der aktuellen Seite geladenen Ressourcen (js, css, img...) zurück, die für die statische Erfassung von Ressourcenleistungsdaten verwendet werden können.

Die Haupttypen sind: script, link, img, css, xmlhttprequest, beacon, fetch, other.
PerformanceResourceTiming – Web-APIs | MDN

Andere Methoden zur Indikatorberechnung

Lösung zur Fehlerdatenerfassung

Es gibt drei Arten

• Fehler beim Laden von Ressourcen: Erfassen Sie Fehler beim Laden von Ressourcen in der Erfassungsphase über addEventListener('error', callback, true).
• js-Ausführungsfehler, erfassen Sie js-Fehler über window.onerror.
  • Bei domänenübergreifenden Skripten wird die Meldung „Skriptfehler“ ausgegeben, und es können keine spezifischen Fehlerinformationen und Stapelinformationen abgerufen werden. Zu diesem Zeitpunkt müssen Sie dem Skript-Tag das Attribut crossorigin="anonymous" hinzufügen und der Ressourcenserver muss CORS-bezogene Konfigurationen hinzufügen, z. B. Access-Control-Allow-Origin: *
• Promise-Fehler: Erfassen Sie den Promise-Fehler über addEventListener('unhandledrejection', callback), aber es gibt keine Informationen wie die Anzahl der Zeilen und Spalten, in denen der Fehler aufgetreten ist, sodass Sie die relevanten Fehlerinformationen nur manuell auslösen können.

// 在捕获阶段，捕获资源加载失败错误
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

Datenberichtsplan

In diesem Szenario sind zwei Probleme zu berücksichtigen:

Wenn die Datenberichtsschnittstelle und das Geschäftssystem denselben Domänennamen verwenden, ist die Anzahl gleichzeitiger Anforderungen des Browsers begrenzt, sodass die Möglichkeit eines Wettbewerbs um Netzwerkressourcen besteht.
Browser ignorieren normalerweise asynchrone Ajax-Anfragen, wenn die Seite entladen wird. Wenn eine Datenanforderung erforderlich ist, wird im Allgemeinen eine synchrone Ajax-Anfrage im Entlade- oder Beforeunload-Ereignis erstellt, um das Entladen der Seite zu verzögern. Aus Benutzersicht verlangsamen sich Seitensprünge.

Navigator.sendBeacon

Vorteil:
Sendet beim Entladen der Seite zuverlässig Daten, ohne das Schließen der Seite zu blockieren.
Unterstützt das Senden von Daten im Hintergrund.

Mangel:
Es können nur POST-Anfragen gesendet und keine Antwortergebnisse abgerufen werden.

Zusätzlich zum Internet Explorer verfügen die aktuellen Mainstream-modernen Browser über eine sehr hohe Unterstützungsrate für Beacons. Beacon – MDN-Dokumentation

Die Beacon-Schnittstelle wird verwendet, um asynchrone, nicht blockierende Anfragen an den Webserver zu planen.

• Beacon-Anfragen verwenden die HTTP-POST-Methode und erfordern keine Antwort.
• Beacon-Anfragen stellen sicher, dass die Initialisierung abgeschlossen ist, bevor die Seite das Entladen auslöst.

Laienhaft ausgedrückt kann Beacon Daten asynchron an den Server senden und sicherstellen, dass die Anforderung gesendet wird, bevor das Entladen der Seite abgeschlossen ist (um das Problem zu lösen, dass das Entladen der Ajax-Seite die Anforderung beendet). So verwenden Sie es:

navigator.sendBeacon(url, data);
1

Der Datenparameter ist optional und sein Typ kann ArrayBufferView, Blob, DOMString oder FormData sein. Wenn der Browser die Beacon-Anfrage erfolgreich zur zu sendenden Warteschlange hinzufügt, gibt diese Methode true zurück, andernfalls false

Bei Verwendung von Beacon muss das Backend die Post-Methode verwenden, um Parameter zu empfangen. Unter Berücksichtigung domänenübergreifender Probleme muss das Backend auch die Schnittstelle ändern und CORS konfigurieren. Gleichzeitig muss der Anforderungsheader dem CORS-sicheren Anforderungsheader entsprechen, in dem der Inhaltstyp application/x-www-form-urlencoded, multipart/form-data oder text/plain sein muss.

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

Bild

Vorteil:
Es ist einfach zu verwenden, gut kompatibel und kann domänenübergreifend gemeldet werden.
Das Laden und Schließen von Seiten wird nicht blockiert.

Mangel:
Es können nur GET-Anfragen gesendet und keine Antwortergebnisse abgerufen werden.
Asynchrone Vorgänge werden nicht unterstützt.

Das Kompatibilitätsproblem von sendBeacon ist unvermeidbar, aber Sie können die Funktion, mit der die meisten Browser das Laden des Bildes vor dem Entladen der Seite abschließen, voll ausnutzen und die Daten melden, indem Sie img zur Seite hinzufügen.

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

Da es sich bei dem IMG-Bild um eine Abrufanforderung handelt, gibt es auf verschiedenen Servern Einschränkungen hinsichtlich der Länge der URL. Wenn die Länge den Grenzwert überschreitet, tritt ein HTTP-414-Fehler auf. Daher müssen Sie auch auf die Berichtshäufigkeit achten, um zu viele Attribute zu reduzieren einmal hochgeladen.

Kompatible Lösungen

Die sendBeacon-Methode wird bevorzugt und die Image-Methode wird als Fallback verwendet.

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

Tatsächlich verwenden viele Leute GIF, um den Punkt zu vertuschen?
Das Melden von Daten an den Server kann durch Anfordern der Schnittstelle, Anfordern normaler Dateien oder Anfordern von Bildressourcen erfolgen. Solange die Daten gemeldet werden können, sei es die Anforderung einer GIF-Datei, die Anforderung einer JS-Datei oder der Aufruf einer Seitenschnittstelle, kümmert sich der Server eigentlich nicht um die spezifische Berichtsmethode. Warum verwenden also alle Systeme einheitlich die Methode, GIF-Bilder anzufordern, um Daten zu melden?
●Verhindern Sie Cross-Domain
Im Allgemeinen ist der gepunktete Domänenname nicht der aktuelle Domänenname, sodass alle Schnittstellenanforderungen domänenübergreifende Anforderungen darstellen. Domainübergreifende Anfragen können aufgrund unsachgemäßer Konfiguration und Berichtsfehler leicht von Browsern abgefangen werden, was inakzeptabel ist. Das src-Attribut des Bildes ist jedoch nicht domänenübergreifend und es können auch Anfragen initiiert werden. (Schnittstellenberichte ausschließen)
●Verhindern Sie, dass das Laden von Seiten blockiert wird und die Benutzererfahrung beeinträchtigt wird
Normalerweise sendet der Browser nach dem Erstellen eines Ressourcenknotens keine tatsächliche Ressourcenanforderung, bis das Objekt in den DOM-Baum des Browsers eingefügt wird. Der wiederholte Betrieb des DOM führt nicht nur zu Leistungsproblemen, sondern das Laden von js/css-Ressourcen blockiert auch das Rendern von Seiten und beeinträchtigt die Benutzererfahrung.
Eine Ausnahme bilden Bildanfragen. Es muss nicht nur beim Erstellen eines Bildes nicht in das DOM eingefügt werden, es kann auch eine Anfrage initiieren, solange das neue Bildobjekt in js erstellt wird, und es gibt kein Blockierungsproblem. In einer Browserumgebung ohne js ist dies möglich kann auch normal über das img-Tag verwaltet werden, was eine andere Art von Ressourcenanforderung darstellt. (Dateimethode ausschließen)
●Im Vergleich zu PNG/JPG hat GIF die kleinste Größe
Die kleinste BMP-Datei benötigt 74 Byte, PNG benötigt 67 Byte und ein legales GIF benötigt nur 43 Byte.
Bei gleicher Reaktion kann GIF 41 % des Datenverkehrs im Vergleich zu BMP und 35 % des Datenverkehrs im Vergleich zu PNG einsparen.
Und die meisten von ihnen verwenden transparentes 1*1-Pixel-GIF für die Berichterstattung.
1x1 Pixel ist das kleinste zulässige Bild. Da dies über Bilder erfolgt, ist es außerdem am besten, die Bilder transparent zu machen, damit der Anzeigeeffekt der Seite selbst nicht beeinträchtigt wird. Um anzuzeigen, dass das Bild transparent ist, müssen Sie zum Markieren nur ein Binärbit verwenden Das Bild wird als transparente Farbe angezeigt, und es ist nicht erforderlich, Farbraumdaten zu speichern, wodurch Volumen gespart werden kann.

XMLHttpRequest oder Fetch API

Vorteil:

Es können asynchrone Anfragen gesendet werden und mehrere HTTP-Methoden wie GET und POST werden unterstützt.
Die Antwortergebnisse können eingeholt und weiterverarbeitet werden.
Mangel:

Die Logik von Anfrage und Antwort muss manuell gehandhabt werden.
Es müssen domänenübergreifende Anforderungsprobleme behandelt werden (z. B. das Einrichten von CORS).

Verwenden Sie XMLHttpRequest oder die Fetch-API, um asynchrone Anforderungen an Berichtsdaten zu senden. Sie können die Methode GET oder POST verwenden und die Daten als Anforderungstext oder URL-Parameter senden.

WebSocket

Vorteil:

Gute Echtzeitleistung und unterstützt die bidirektionale Kommunikation.
Geeignet für Echtzeitüberwachung und umfangreiche Datenberichte.
Mangel:

Der Server muss das WebSocket-Protokoll unterstützen.
Komplexer und nicht für einfache Anforderungen an vergrabene Punkte geeignet.

Meldeplattform

Zu den gängigen Front-End-Tools zum Vergraben von Daten gehören Google Analytics, Baidu Statistics, Umeng Statistics usw. Natürlich können Sie auch die interne Schnittstelle oder Plattform des Unternehmens für die Berichterstellung nutzen.

Nehmen Sie Google Analytics als Beispiel:
Google Analytics ist ein von Google entwickeltes Website-Analysetool zur Verfolgung und Berichterstellung des Website-Verkehrs. Es hilft Websitebesitzern, das Verhalten ihrer Besucher zu verstehen, einschließlich wer sie sind, woher sie kommen, was sie auf der Website tun und mehr. Durch Google Analytics können Website-Besitzer ihre Zielgruppe besser verstehen, Website-Inhalte und Marketingstrategien optimieren und so die Website-Leistung und das Benutzererlebnis verbessern. Google Analytics bietet eine Fülle von Datenanalysefunktionen, darunter Echtzeitdaten, Analyse des Nutzerverhaltens, Conversion-Tracking, Analyse von Verkehrsquellen und mehr. Es handelt sich um ein leistungsstarkes Tool, das häufig auf verschiedenen Websites und in Online-Marketingkampagnen eingesetzt wird.

So verwenden Sie Google Analytics

Da wir Google Analytics verwenden, benötigen wir zunächst ein Google-Konto, das Sie selbst erstellen müssen. Zweitens müssen Sie den Zugang zu Google Analytics kennen. Hier sind die beiden verwendeten Adressen:

Google Tag Manager: tagmanager.google.com/

Analytics: analytics.google.com/

Google Tag Manager
Google Tag Manager (GTM) ist ein von Google entwickeltes und bereitgestelltes Tag-Management-System. Damit können Website-Administratoren verschiedene Tracking-Codes, Analysecodes und Marketing-Tags verwalten und bereitstellen, ohne den Website-Code zu ändern. Mit GTM können Benutzer ganz einfach Tags hinzufügen, aktualisieren und löschen, ohne auf Entwickler angewiesen zu sein.

Zu den Hauptfunktionen von GTM gehören:
Im Klartext: Diese Plattform wird zum Sammeln versteckter Ereignisse verwendet, die vom Front-End ausgelöst werden, und kann Datenberichte durch Anpassen von Triggerbedingungen und Trigger-Ereignisrückrufen realisieren. Sie wird hier verwendet, um Daten zu sammeln und an Google Analytics zu melden.

Google Analytics
Wie der Name schon sagt, handelt es sich um eine Website zum Sammeln, Anzeigen und Anzeigen von Daten