Condivisione della tecnologia

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

Indirizzo originale

Cos'è un punto di sepoltura?

Il nome scientifico è Event Tracking, che si concentra principalmente sull'acquisizione, l'elaborazione e l'invio di tecnologie correlate e processi di implementazione per il comportamento degli utenti o i processi aziendali.
Burying a point è un termine professionale nel campo dei dati ed è anche un nome comune nel campo di Internet.

I punti sepolti costituiscono la base per l'analisi dei dati di prodotto e vengono generalmente utilizzati per il feedback da sistemi di raccomandazione, monitoraggio e analisi del comportamento degli utenti, analisi statistica di nuove funzioni o effetti dell'attività operativa, ecc.

I punti di incorporamento includono due concetti importanti: evento (evento) e attributo (param)

• Evento: cosa accade nell'applicazione, ad esempio azioni dell'utente, eventi di sistema o errori di sistema. Ad esempio, se scatti un prodotto, questo conterrà i seguenti eventi: enter_page (entra nella pagina), Leave_page (lascia la pagina).
• Param: un attributo definito per descrivere un segmento di utenti, come la preferenza della lingua o la posizione geografica. Prendi come esempio l'evento "Inserisci esercizio dopo la lezione". Contiene i seguenti attributi di evento: enter_from (da quale pagina), class_id (id del corso), ecc.
• Valore dell'attributo (value): la dimensione dell'attributo, ovvero la dimensione specifica quando viene attivato il comportamento. Ad esempio: enter_from: home (home page), system (sistema), ecc.

Piano mainstream

L'interramento senza traccia (interramento completo) utilizza il metodo di monitoraggio integrato del browser o dell'APP per monitorare la pagina di navigazione dell'utente, i clic e altri comportamenti. Viene generalmente utilizzato per l'analisi dei dati a grana grossa, come lo slardar dell'azienda
discordanza:

• I dati sono rumorosi e vengono raccolti indipendentemente dal fatto che siano utili o meno.
• Impossibile personalizzare i punti sepolti, impossibile raccogliere eventi e attributi aziendali specifici
• Meno informazioni a disposizione della DA
  vantaggio:
• Accesso semplice, quasi nessuna intrusione, nessun costo di sviluppo aggiuntivo richiesto
• La raccolta del comportamento operativo dell'utente è molto completa e non viene fatta quasi nessuna omissione

Punti di seppellimento del codice, gli sviluppatori front-end personalizzano il monitoraggio e la raccolta nel codice
discordanza:

• Il carico di lavoro è pesante, il codice è invadente e la manutenzione successiva è scomoda.
  vantaggio:
• Può seppellire accuratamente i punti e avere una chiara identificazione degli eventi
• Gli attributi del venditore sono molto ricchi
• Il metodo di attivazione del punto sepolto può essere definito in modo flessibile
• DA è più comodo e preciso da usare

SDK per punti sepolti, l'SDK espone l'interfaccia per la segnalazione di punti sepolti e gli sviluppatori non sono a conoscenza del processo di monitoraggio e raccolta, come il tè dell'azienda
Svantaggi: NA
vantaggio:

• Lo sviluppo del business deve solo prestare attenzione all’identificazione degli eventi, agli attributi aziendali, ecc.
• Tenendo conto dei vantaggi dei punti di sepoltura senza traccia e dei punti di sepoltura codificati

Attributi nascosti comuni

Di solito il front-end conta i punti sepolti in base alle dimensioni della pagina Gli attributi comuni degli eventi sono i seguenti:

Eventi sepolti comuni

Soluzione per la raccolta dei dati sulle prestazioni

Attualmente, la maggior parte dei dati degli indicatori di prestazione provengono dall'API window.performance.

Indicatori comuni di prestazione

FP

L'indicatore FP (First Paint) riflette solitamente il tempo dello schermo bianco della pagina. Il tempo dello schermo bianco rifletterà la situazione attuale è molto buono, lo schermo bianco Minore è il tempo, minore è la probabilità di abbandono dell'utente.

Questo indicatore può ottenere le informazioni sui punti fornite dall'API PerformancePaintTming tramite il metodo preformance.getEntriesByType('paint') Trova l'oggetto con il nome first-paint e la descrizione è i dati dell'indicatore FP:

FCP

FCP (First Contentful Paint) è il momento in cui il contenuto viene visualizzato per la prima volta Negli indicatori statistici delle prestazioni, il tempo dal momento in cui l'utente inizia ad accedere alla pagina Web a FCP può essere considerato generalmente come il tempo senza contenuto , FCP >= FP

Gli indicatori possono ottenere le informazioni sui punti fornite dall'API PerformancePaintTiming tramite il metodo performance.getEntriesByType('paint') Trova l'oggetto con il nome first-contentful-paint, che descrive i dati dell'indicatore FCP, come mostrato nella figura seguente:

FMP

FMP (First Meaningful Paint) è il momento in cui viene disegnato per la prima volta un contenuto significativo. Quando il layout e il contenuto testuale dell'intera pagina sono completamente renderizzati, si può considerare che il primo dipinto significativo di contenuto significativo sia completato.Pertanto, FMP misura il tempo impiegato dagli utenti per vedere il contenuto principale di una pagina web ed è un importante indicatore di misurazione dal punto di vista dell'esperienza dell'utente.

Un metodo di calcolo FMP ora riconosciuto dall'industria front-end è "il tempo di disegno dopo la modifica massima del layout della pagina durante il caricamento e il rendering". Puoi utilizzare MutationObserver per monitorare ogni modifica complessiva del DOM della pagina, attivare la richiamata di MutationObserver e calcolare il punteggio di modifica dell'albero DOM corrente durante la richiamata. Il momento in cui il punteggio cambia maggiormente è il punto temporale FMP.

TTI

TTI (Time To Interactive), ovvero il tempo impiegato dall'inizio del caricamento della pagina fino a quando la pagina è in uno stato completamente interattivo. Quando la pagina è in uno stato completamente interattivo, vengono soddisfatte le tre condizioni seguenti:

La pagina mostra già contenuti utili.
E' stata registrata la funzione di risposta all'evento associata agli elementi visibili nella pagina.
La funzione di risposta all'evento può iniziare l'esecuzione entro 50 ms dal verificarsi dell'evento.

Indicatore di caricamento delle risorse

window.performance.getEntriesByType('resource') restituirà vari indicatori di prestazione di tutte le risorse (js, css, img...) caricate nella pagina corrente, che possono essere utilizzati per la raccolta di dati statici sulle prestazioni delle risorse.

I tipi principali sono: script, link, img, css, xmlhttprequest, beacon, fetch, altro.
PerformanceResourceTiming - API Web | MDN

Altri metodi di calcolo degli indicatori

Soluzione per la raccolta dei dati di errore

Ce ne sono tre tipi

• Errori di caricamento delle risorse, errori di errore di caricamento delle risorse di acquisizione nella fase di acquisizione tramite addEventListener('error', callback, true).
• errori di esecuzione js, acquisisci errori js tramite window.onerror.
  • Gli script tra domini restituiranno un messaggio di errore "Script Error" e non sarà possibile ottenere informazioni specifiche sull'errore e sullo stack. A questo punto, è necessario aggiungere l'attributo crossorigin="anonymous" al tag script e il server di risorse deve aggiungere configurazioni relative a CORS, come Access-Control-Allow-Origin: *
• Errore di promessa, acquisisci l'errore di promessa tramite addEventListener('unhandledrejection', callback), ma non sono presenti informazioni come il numero di righe e colonne in cui si è verificato l'errore, quindi puoi solo generare manualmente le informazioni sull'errore rilevanti.

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

Piano di reporting dei dati

In questo scenario, ci sono due questioni da considerare:

Se l'interfaccia di reporting dei dati e il sistema aziendale utilizzano lo stesso nome di dominio, il browser ha limiti sul numero di richieste simultanee, quindi esiste la possibilità di concorrenza per le risorse di rete.
I browser solitamente ignorano le richieste Ajax asincrone quando la pagina viene scaricata. Se è necessaria una richiesta di dati, viene generalmente creata una richiesta Ajax sincrona nell'evento unload o beforeunload per ritardare lo scaricamento della pagina. Dal punto di vista dell'utente, i salti di pagina sono più lenti.

Navigatore.sendBeacon

vantaggio:
Invia dati in modo affidabile quando la pagina viene scaricata, senza bloccarne la chiusura.
Supporta l'invio di dati in background.

discordanza:
È possibile inviare solo richieste POST e non è possibile ottenere i risultati della risposta.

Oltre a Internet Explorer, i browser moderni più diffusi attualmente hanno un tasso di supporto molto elevato per i beacon. Beacon - Documentazione MDN

L'interfaccia Beacon viene utilizzata per pianificare richieste asincrone non bloccanti al server Web.

• Le richieste beacon utilizzano il metodo HTTP POST e non richiedono una risposta.
• Le richieste beacon assicurano che l'inizializzazione venga completata prima che la pagina attivi lo scaricamento.

In parole povere, Beacon può inviare dati in modo asincrono al server e può garantire che la richiesta venga inviata prima che lo scaricamento della pagina sia completato (risolve il problema che lo scaricamento della pagina Ajax terminerà la richiesta). Come usarlo:

navigator.sendBeacon(url, data);
1

Il parametro data è facoltativo e il suo tipo può essere ArrayBufferView, Blob, DOMString o FormData. Se il browser aggiunge con successo la richiesta beacon alla coda da inviare, questo metodo restituirà true, altrimenti restituirà false

Quando si utilizza Beacon, il backend deve utilizzare il metodo post per ricevere i parametri. Considerando i problemi tra domini, il backend deve anche modificare l'interfaccia e configurare CORS. Allo stesso tempo, l'intestazione della richiesta deve soddisfare l'intestazione della richiesta CORS-safelisted, in cui il tipo di contenuto deve essere application/x-www-form-urlencoded, multipart/form-data o 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

Immagine

vantaggio:
È semplice da usare, ha una buona compatibilità e può essere segnalato tra domini diversi.
Non bloccherà il caricamento e la chiusura della pagina.

discordanza:
È possibile inviare solo richieste GET e non è possibile ottenere risultati di risposta.
Le operazioni asincrone non sono supportate.

Il problema di compatibilità di sendBeacon è inevitabile, ma puoi sfruttare appieno la funzionalità che la maggior parte dei browser completerà caricando l'immagine prima che la pagina venga scaricata e riporterà i dati aggiungendo img alla pagina.

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

Poiché l'immagine img è una richiesta get, diversi server hanno restrizioni sulla lunghezza dell'uri. Quando la lunghezza supera il limite, si verificherà un errore HTTP 414. Pertanto, è necessario prestare attenzione anche alla frequenza di reporting per ridurre troppi attributi caricato in una sola volta.

Soluzioni compatibili

È preferibile il metodo sendBeacon e il metodo Image viene utilizzato come fallback.

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

In effetti, molte persone usano le GIF per seppellire il punto?
La segnalazione dei dati al server può essere effettuata richiedendo l'interfaccia, richiedendo file ordinari o richiedendo risorse immagine. Finché i dati possono essere segnalati, sia che si tratti di richiedere un file GIF, di un file js o di richiamare un'interfaccia di pagina, al server in realtà non interessa il metodo di reporting specifico. Allora perché tutti i sistemi utilizzano in modo uniforme il metodo di richiesta di immagini GIF per riportare i dati?
●Impedisci cross-domini
In generale, il nome di dominio punteggiato non è il nome di dominio corrente, quindi tutte le richieste di interfaccia costituiranno richieste interdominio. Le richieste interdominio possono essere facilmente intercettate dai browser a causa di una configurazione errata e di errori di segnalazione, il che è inaccettabile. Tuttavia, l'attributo src dell'immagine non attraversa il dominio ed è anche possibile avviare richieste. (Escludere i rapporti sull'interfaccia)
●Impedisci il blocco del caricamento della pagina e l'impatto sull'esperienza dell'utente
Di solito, dopo aver creato un nodo di risorse, il browser non invierà effettivamente una richiesta di risorsa finché l'oggetto non verrà inserito nell'albero DOM del browser. L'utilizzo ripetuto del DOM non solo causerà problemi di prestazioni, ma il caricamento di risorse js/css bloccherà anche il rendering della pagina e influenzerà l'esperienza dell'utente.
L'eccezione sono le richieste di immagini. Non solo non è necessario inserirlo nel DOM durante la costruzione di un'immagine, ma può avviare una richiesta purché il nuovo oggetto Image venga creato in js e non vi sono problemi di blocco in un ambiente browser senza js, è possibile essere gestito normalmente anche tramite il tag img, che è un altro tipo di richiesta di risorsa cosa che non si può fare. (Escludi metodo file)
●Rispetto a PNG/JPG, GIF ha la dimensione più piccola
Il file BMP più piccolo richiede 74 byte, PNG richiede 67 byte e una GIF legale richiede solo 43 byte.
A parità di risposta, GIF può far risparmiare il 41% di traffico rispetto a BMP e il 35% di traffico rispetto a PNG.
E la maggior parte di essi utilizza GIF trasparenti da 1 * 1 pixel per segnalare.
1x1 pixel è l'immagine legale più piccola. Inoltre, poiché viene eseguito tramite immagini, è meglio rendere le immagini trasparenti, in modo che ciò non influisca sull'effetto di visualizzazione della pagina stessa. Per indicare che l'immagine è trasparente, è sufficiente utilizzare un bit binario per contrassegnare l'immagine come colore trasparente e non è necessario memorizzare i dati dello spazio colore, il che può far risparmiare volume.

API XMLHttpRequest o Fetch

vantaggio:

È possibile inviare richieste asincrone e sono supportati più metodi HTTP come GET e POST.
I risultati della risposta possono essere ottenuti e ulteriormente elaborati.
discordanza:

La logica della richiesta e della risposta deve essere gestita manualmente.
Necessità di gestire problemi di richiesta tra domini (come la configurazione di CORS).

Utilizza XMLHttpRequest o Fetch API per inviare richieste asincrone per riportare i dati. Puoi scegliere di utilizzare il metodo GET o POST e inviare i dati come corpo della richiesta o parametri URL.

WebSocket

vantaggio:

Buone prestazioni in tempo reale e supporta la comunicazione bidirezionale.
Adatto per il monitoraggio in tempo reale e il reporting di dati su larga scala.
discordanza:

Il server deve supportare il protocollo WebSocket.
Più complesso e non adatto a semplici requisiti di punti interrati.

Piattaforma di reporting

Gli strumenti comuni per il seppellimento dei dati front-end includono Google Analytics, Baidu Statistics, Umeng Statistics, ecc. Naturalmente, puoi anche utilizzare l'interfaccia o la piattaforma interna dell'azienda per i report.

Prendiamo come esempio Google Analytics:
Google Analytics è uno strumento di analisi dei siti web sviluppato da Google per monitorare e segnalare il traffico del sito web. Aiuta i proprietari di siti Web a comprendere il comportamento dei loro visitatori, compreso chi sono, da dove provengono, cosa fanno sul sito e altro ancora. Attraverso Google Analytics, i proprietari di siti web possono comprendere meglio il proprio pubblico, ottimizzare i contenuti del sito web e le strategie di marketing, migliorando così le prestazioni del sito web e l'esperienza dell'utente. Google Analytics offre numerose funzioni di analisi dei dati, inclusi dati in tempo reale, analisi del comportamento degli utenti, monitoraggio delle conversioni, analisi delle sorgenti di traffico e altro ancora. È uno strumento potente ampiamente utilizzato in vari siti Web e campagne di marketing online.

Come utilizzare Google Analytics

Poiché utilizziamo Google Analytics, dobbiamo prima avere un account Google, che devi creare tu stesso. In secondo luogo è necessario conoscere l'ingresso di Google Analytics. Ecco i due indirizzi utilizzati:

Gestione tag di Google: tagmanager.google.com/

Analisi: analytics.google.com/

Gestore tag di Google
Google Tag Manager (GTM) è un sistema di gestione dei tag sviluppato e fornito da Google. Consente agli amministratori del sito Web di gestire e distribuire vari codici di monitoraggio, codici di analisi e tag di marketing senza modificare il codice del sito Web. Con GTM, gli utenti possono aggiungere, aggiornare ed eliminare facilmente i tag senza fare affidamento sugli sviluppatori.

Le caratteristiche principali di GTM includono:
In parole povere: questa piattaforma viene utilizzata per raccogliere eventi nascosti attivati ​​dal front-end e può realizzare report sui dati personalizzando le condizioni di attivazione e attivando i callback degli eventi. Viene utilizzata qui per raccogliere dati e segnalarli a Google Analytics.

statistiche di Google
Come suggerisce il nome, si tratta di un sito Web utilizzato per raccogliere, visualizzare e visualizzare dati