Teknologian jakaminen

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

Alkuperäinen osoite

Mikä on hautauspaikka?

Tieteellinen nimi on Event Tracking, joka keskittyy pääasiassa käyttäjien käyttäytymiseen tai liiketoimintaprosesseihin liittyvien teknologioiden ja toteutusprosessien sieppaamiseen, käsittelyyn ja lähettämiseen.
Pisteen hautaaminen on ammatillinen termi tietokentässä ja yleinen nimi myös Internet-kentällä.

Haudatut pisteet ovat tuotetietojen analyysin perusta ja niitä käytetään yleensä palautejärjestelmistä suositusjärjestelmistä, käyttäjien käyttäytymisen seurantaan ja analysointiin, uusien toimintojen tai operatiivisen toiminnan vaikutusten tilastolliseen analysointiin jne.

Upotuskohdat sisältävät kaksi tärkeää käsitettä: tapahtuma (tapahtuma) ja attribuutti (param)

• Tapahtuma: Mitä sovelluksessa tapahtuu, kuten käyttäjän toimet, järjestelmätapahtumat tai järjestelmävirheet. Jos esimerkiksi kuvaat tuotetta, se sisältää seuraavat tapahtumat: enter_page (syötä sivu), left_page (poistu sivulta).
• Param: Attribuutti, joka on määritetty kuvaamaan käyttäjäsegmenttiä, kuten kieliasetusta tai maantieteellistä sijaintia. Otetaan esimerkkinä "Enter after-class harjoitus" -tapahtuma, joka sisältää seuraavat tapahtumaattribuutit: enter_from (mältä sivulta), class_id (kurssin tunnus) jne.
• Attribuutin arvo (arvo): Attribuutin ulottuvuus, eli tietty ulottuvuus, kun toiminta käynnistyy. Esimerkiksi: enter_from: koti (kotisivu), järjestelmä (järjestelmä) jne.

Päävirtasuunnitelma

Traceless burying (täysi hautaus) käyttää selaimen tai APP:n sisäänrakennettua seurantamenetelmää käyttäjän selaussivun, napsautusten ja muiden käyttäytymisen seuraamiseen. Sitä käytetään yleensä karkearakeiseen data-analyysiin, kuten yrityksen slardar
puute:

• Tiedot ovat meluisia ja niitä kerätään riippumatta siitä, onko niistä hyötyä vai ei.
• Ei voida mukauttaa haudattuja pisteitä, ei voida kerätä tiettyjä tapahtumia ja liiketoimintamääritteitä
• DA:n käytettävissä on vähemmän tietoa
  etu:
• Yksinkertainen pääsy, lähes ei tunkeutumista, ei vaadi lisäkehityskustannuksia
• Käyttäjien toimintakäyttäytymisen kokoelma on hyvin täydellinen, eikä siinä ole juuri mitään puutteita

Koodin hautauspisteet, käyttöliittymäkehittäjät mukauttavat koodin seurantaa ja keräämistä
puute:

• Työtaakka on raskas, koodi häiritsevä ja myöhempi ylläpito on hankalaa.
  etu:
• Pystyy hautaamaan pisteitä tarkasti ja tunnistamaan tapahtumat selkeästi
• Myyjän ominaisuudet ovat erittäin rikkaat
• Haudatun pisteen laukaisumenetelmä voidaan määritellä joustavasti
• DA on kätevämpi ja tarkempi käyttää

Buried Point SDK, SDK paljastaa rajapinnan haudattujen pisteiden ilmoittamista varten, eivätkä kehittäjät ole tietoisia seuranta- ja keräysprosessista, kuten yrityksen teestä.
Haitat: NA
etu:

• Liiketoiminnan kehittämisessä on kiinnitettävä huomiota vain tapahtuman tunnistamiseen, liiketoiminnan ominaisuuksiin jne.
• Ottaen huomioon jäljittämättömien hautauspisteiden ja koodin hautauspisteiden edut

Yleisiä piilotettuja ominaisuuksia

Yleensä käyttöliittymä laskee haudatut pisteet sivun mittojen mukaan. Yleiset tapahtumaattribuutit ovat seuraavat:

Yleiset haudatut tapahtumat

Suorituskykytiedonkeruuratkaisu

Tällä hetkellä suurin osa suoritusindikaattoritiedoista tulee window.performance API:sta.

Yhteiset suoritusindikaattorit

FP

FP (First Paint) -ilmaisin heijastaa yleensä sivun valkoisen näytön aikaa on erittäin hyvä, valkoinen näyttö Mitä lyhyempi aika, sitä pienempi on käyttäjän vaimenemisen todennäköisyys.

Tämä osoitin voi saada PerformancePaintTming API:n tarjoamat pistetiedot preformance.getEntriesByType('paint') -menetelmän avulla. Etsi objekti, jonka nimi on first-paint, ja kuvaus on FP-indikaattoritiedot:

FCP

FCP (First Contentful Paint) on aika, jolloin sisältö renderöidään ensimmäistä kertaa , FCP >= FP

Indikaattorit voivat saada PerformancePaintTiming API:n tarjoamat pistetiedot performance.getEntriesByType('paint') -menetelmän kautta. Etsi objekti, jonka nimi on first-contentful-paint, joka kuvaa FCP-indikaattoritietoja seuraavan kuvan mukaisesti:

FMP

FMP (First Meaningful Paint) on aika, jolloin merkityksellinen sisältö piirretään ensimmäistä kertaa Kun koko sivun ulkoasu ja tekstisisältö on kokonaan renderöity, voidaan katsoa, ​​että ensimmäinen merkityksellinen maalaus on tehty.Siksi FMP mittaa aikaa, jonka käyttäjät näkevät verkkosivun pääsisällön, ja se on tärkeä mittausindikaattori käyttökokemuksen näkökulmasta.

Käyttöliittymäteollisuuden nyt tunnistama FMP-laskentamenetelmä on "piirtoaika sivun suurimman asettelun muutoksen jälkeen latauksen ja renderöinnin aikana". Voit käyttää MutationObserveria sivun jokaisen yleisen DOM-muutoksen seuraamiseen, MutationObserverin takaisinkutsun käynnistämiseen ja nykyisen DOM-puun muutospisteiden laskemiseen takaisinkutsun aikana. Hetki, jolloin pistemäärä muuttuu eniten, on FMP-aikapiste.

TTI

TTI (Time To Interactive), joka on aika, joka kuluu sivun latauksen alusta, kunnes sivu on täysin interaktiivisessa tilassa. Kun sivu on täysin interaktiivisessa tilassa, seuraavat kolme ehtoa täyttyvät:

Sivulla on jo hyödyllistä sisältöä.
Sivun näkyviin elementteihin liittyvä tapahtumavastaustoiminto on rekisteröity.
Tapahtumavastaustoiminto voi alkaa toimia 50 ms kuluessa tapahtuman tapahtumisesta.

Resurssien latausilmaisin

window.performance.getEntriesByType('resurssi') palauttaa erilaisia ​​suorituskykyindikaattoreita kaikista nykyiselle sivulle ladatuista resursseista (js, css, img...), joita voidaan käyttää staattisten resurssien suorituskykytietojen keräämiseen.

Päätyypit ovat: script, link, img, css, xmlhttprequest, beacon, fetch, other.
PerformanceResourceTiming - Verkkosovellusliittymät | MDN

Muut indikaattorin laskentamenetelmät

Virhetietojen keräämisratkaisu

Niitä on kolmenlaisia

• Resurssien latausvirheet, sieppausvaiheen resurssien latausvirhevirheet addEventListener('error', callback, true) kautta.
• js-suoritusvirheet, kaappaa js-virheet window.onror-sovelluksen kautta.
  • Verkkotunnusten väliset skriptit antavat "Script Error" -kehotteen, eikä tarkkoja virhetietoja ja pinotietoja voida saada. Tällä hetkellä sinun on lisättävä crossorigin="anonymous"-attribuutti komentosarjatunnisteeseen ja resurssipalvelimen on lisättävä CORS-määritykset, kuten Access-Control-Allow-Origin: *
• Lupausvirhe, kaappaa lupausvirhe addEventListener('unhandledrejection', callback) avulla, mutta siinä ei ole tietoja, kuten niiden rivien ja sarakkeiden lukumäärä, joissa virhe tapahtui, joten voit heittää asianmukaiset virhetiedot vain manuaalisesti.

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

Tietojen raportointisuunnitelma

Tässä skenaariossa on otettava huomioon kaksi asiaa:

Jos tiedonraportointirajapinta ja liiketoimintajärjestelmä käyttävät samaa verkkotunnusta, selaimella on rajoituksia samanaikaisten pyyntöjen määrälle, joten verkkoresursseista on mahdollista kilpailla.
Selaimet yleensä jättävät huomioimatta asynkroniset ajax-pyynnöt, kun sivu puretaan. Jos datapyyntö on tarpeen, synkroninen ajax-pyyntö luodaan yleensä purkamis- tai ennen purkamistapahtumassa sivun purkamisen viivyttämiseksi. Käyttäjän näkökulmasta sivuhypyt hidastuvat.

Navigator.sendBeacon

etu:
Lähettää luotettavasti tiedot, kun sivu on purettu, estämättä sivua sulkeutumasta.
Tukee tietojen lähettämistä taustalla.

puute:
Vain POST-pyyntöjä voidaan lähettää, eikä vastaustuloksia voida saada.

Internet Explorerin lisäksi nykyiset valtavirran nykyaikaiset selaimet tukevat erittäin paljon majakoita. Majakka - MDN-dokumentaatio

Beacon-rajapintaa käytetään asynkronisten ei-estävien pyyntöjen ajoittamiseen Web-palvelimelle.

• Majakkapyynnöt käyttävät HTTP POST -menetelmää eivätkä vaadi vastausta.
• Majakkapyynnöt varmistavat, että alustus on valmis, ennen kuin sivu laukaisee latauksen.

Maallikon termein Beacon voi lähettää tietoja asynkronisesti palvelimelle ja varmistaa, että pyyntö lähetetään ennen kuin sivun purkaminen on valmis (ratkaise ongelma, että ajax-sivun purkaminen lopettaa pyynnön). Kuinka käyttää sitä:

navigator.sendBeacon(url, data);
1

Tietoparametri on valinnainen, ja sen tyyppi voi olla ArrayBufferView, Blob, DOMString tai FormData. Jos selain onnistuu lisäämään majakkapyynnön lähetettävään jonoon, tämä menetelmä palauttaa arvon tosi, muuten se palauttaa false

Kun käytät Beaconia, taustajärjestelmän on käytettävä post-menetelmää parametrien vastaanottamiseen. Kun otetaan huomioon verkkotunnusten väliset ongelmat, taustajärjestelmän on myös muokattava käyttöliittymää ja määritettävä CORS. Samanaikaisesti pyynnön otsikon on täytettävä CORS-suojattu pyyntöotsikko, jossa sisältötyypin tulee olla application/x-www-form-urlencoded, multipart/form-data tai 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

Kuva

etu:
Se on helppokäyttöinen, sillä on hyvä yhteensopivuus ja se voidaan raportoida eri verkkotunnuksissa.
Ei estä sivun lataamista ja sulkemista.

puute:
Vain GET-pyyntöjä voidaan lähettää, eikä vastaustuloksia voida saada.
Asynkronisia toimintoja ei tueta.

SendBeaconin yhteensopivuusongelma on väistämätön, mutta voit hyödyntää täysimääräisesti ominaisuutta, jonka mukaan useimmat selaimet lataavat kuvan loppuun ennen kuin sivu on purettu, ja raportoi tiedot lisäämällä img sivulle.

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

Koska img-kuva on get-pyyntö, eri palvelimilla on rajoituksia uri:n pituudelle ladattu kerralla.

Yhteensopivia ratkaisuja

SendBeacon-menetelmä on suositeltava, ja Image-menetelmää käytetään varavaihtoehtona.

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

Itse asiassa monet ihmiset käyttävät GIF haudata pisteen?
Tietojen raportointi palvelimelle voidaan tehdä pyytämällä käyttöliittymää, pyytämällä tavallisia tiedostoja tai pyytämällä kuvaresursseja. Niin kauan kuin tiedot voidaan raportoida, olipa kyseessä sitten GIF-tiedoston pyytäminen, js-tiedoston pyytäminen tai sivurajapinnan kutsuminen, palvelin ei itse asiassa välitä tietystä raportointimenetelmästä. Joten miksi kaikki järjestelmät käyttävät yhdenmukaisesti GIF-kuvien pyytämistä tietojen raportoinnissa?
●Estä verkkotunnusten välinen raja
Yleisesti ottaen pisteillä oleva verkkotunnuksen nimi ei ole nykyinen verkkotunnuksen nimi, joten kaikki käyttöliittymäpyynnöt muodostavat verkkotunnusten välisiä pyyntöjä. Selaimet voivat helposti siepata verkkotunnusten väliset pyynnöt virheellisten määritysten vuoksi ja raportoida virheistä, mikä ei ole hyväksyttävää. Kuvan src-attribuutti ei kuitenkaan ylitä toimialuetta, ja pyyntöjä voidaan myös käynnistää. (Ei käyttöliittymäraportointia)
●Estä sivun lataamisen estäminen ja käyttökokemuksen vaikuttaminen
Yleensä resurssisolmun luomisen jälkeen selain ei lähetä resurssipyyntöä ennen kuin objekti on lisätty selaimen DOM-puuhun. DOM:n toistuva käyttö ei aiheuta vain suorituskykyongelmia, vaan js/css-resurssien lataaminen estää myös sivun hahmontamisen ja vaikuttaa käyttökokemukseen.
Poikkeuksena ovat kuvapyynnöt. Sen lisäksi, että sitä ei tarvitse lisätä DOM:iin kuvaa rakennettaessa, se voi käynnistää pyynnön niin kauan kuin uusi Image-objekti luodaan js:ssä, eikä selainympäristössä ilman js:ää ole esto-ongelmaa voidaan myös hallita normaalisti img-tunnisteen kautta, joka on toinen resurssipyyntö. Mitä ei voida tehdä. (Sulje pois tiedostomenetelmä)
●PNG/JPG-muotoon verrattuna GIF on pienin koko
Pienin BMP-tiedosto vaatii 74 tavua, PNG vaatii 67 tavua ja laillinen GIF vain 43 tavua.
Samalla vastauksella GIF voi säästää 41 % liikenteestä kuin BMP ja 35 % liikenteestä kuin PNG.
Ja useimmat heistä käyttävät 1*1 pikselin läpinäkyvää GIF-tiedostoa raportoinnissa.
1x1 pikseli on pienin laillinen kuva. Lisäksi, koska se tehdään kuvien kautta, on parasta tehdä kuvista läpinäkyviä, jotta se ei vaikuta itse sivun näyttötehoon. Voit osoittaa, että kuva on läpinäkyvä, merkitse vain binääribitti kuvan läpinäkyvänä värinä, eikä väriavaruustietoja tarvitse tallentaa, mikä voi säästää äänenvoimakkuutta.

XMLHttpRequest或Fetch API

etu:

Asynkronisia pyyntöjä voidaan lähettää ja useita HTTP-menetelmiä, kuten GET ja POST, tuetaan.
Vastaustulokset voidaan saada ja käsitellä edelleen.
puute:

Pyynnön ja vastauksen logiikka on käsiteltävä manuaalisesti.
On käsiteltävä verkkotunnusten välisiä pyyntöjä (kuten CORS:n määrittäminen).

Käytä XMLHttpRequest- tai Fetch API:ta lähettääksesi asynkronisia raportointipyyntöjä. Voit käyttää GET- tai POST-menetelmää ja lähettää tiedot pyynnön runko- tai URL-parametreina.

WebSocket

etu:

Hyvä reaaliaikainen suorituskyky ja tukee kaksisuuntaista viestintää.
Soveltuu reaaliaikaiseen seurantaan ja laajamittaiseen dataraportointiin.
puute:

Palvelimen on tuettava WebSocket-protokollaa.
Monimutkaisempi ja ei sovellu yksinkertaisiin haudattuihin pistevaatimuksiin.

Raportointialusta

Yleisiä etupään tiedonhautaustyökaluja ovat Google Analytics, Baidu Statistics, Umeng Statistics jne. Raportointiin voi tietysti käyttää myös yrityksen sisäistä käyttöliittymää tai alustaa.

Otetaan esimerkkinä Google Analytics:
Google Analytics on Googlen kehittämä verkkosivuston analytiikkatyökalu verkkosivuston liikenteen seurantaan ja raportointiin. Se auttaa verkkosivustojen omistajia ymmärtämään vierailijoidensa käyttäytymistä, mukaan lukien keitä he ovat, mistä he tulevat, mitä he tekevät sivustolla ja paljon muuta. Google Analyticsin avulla verkkosivustojen omistajat voivat ymmärtää paremmin yleisöään, optimoida verkkosivuston sisältöä ja markkinointistrategioita, mikä parantaa verkkosivuston suorituskykyä ja käyttökokemusta. Google Analytics tarjoaa runsaasti data-analyysitoimintoja, mukaan lukien reaaliaikaiset tiedot, käyttäjien käyttäytymisen analysointi, tulosseuranta, liikenteen lähteiden analyysi ja paljon muuta. Se on tehokas työkalu, jota käytetään laajasti erilaisissa verkkosivustoissa ja verkkomarkkinointikampanjoissa.

Kuinka käyttää Google Analyticsia

Koska käytämme Google Analyticsia, meillä on ensin oltava Google-tili, joka sinun on luotava itse. Toiseksi sinun on tiedettävä sisäänkäynti Google Analyticsiin Tässä on kaksi käytettyä osoitetta:

Google Tag Manager: tagmanager.google.com/

Analytics: analytics.google.com/

Google Tag Manager
Google Tag Manager (GTM) on Googlen kehittämä ja tarjoama tagien hallintajärjestelmä. Sen avulla verkkosivustojen järjestelmänvalvojat voivat hallita ja ottaa käyttöön erilaisia ​​seurantakoodeja, analytiikkakoodeja ja markkinointitageja muuttamatta verkkosivuston koodia. GTM:n avulla käyttäjät voivat helposti lisätä, päivittää ja poistaa tunnisteita ilman, että kehittäjät tarvitsevat apua.

GTM:n tärkeimmät ominaisuudet ovat:
Selkeästi englanniksi: tätä alustaa käytetään käyttöliittymän käynnistämien piilotettujen tapahtumien keräämiseen, ja se voi toteuttaa dataraportoinnin mukauttamalla käynnistysehtoja ja käynnistää tapahtuman takaisinkutsuja. Sitä käytetään tässä keräämään tietoja ja raportoimaan ne Google Analyticsille.

Google Analytics
Kuten nimestä voi päätellä, se on verkkosivusto, jota käytetään tietojen keräämiseen, katseluun ja näyttämiseen