Berbagi teknologi

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

Alamat asli

Apa yang dimaksud dengan titik pemakaman?

Nama ilmiahnya adalah Pelacakan Peristiwa, yang terutama berfokus pada penangkapan, pemrosesan, dan pengiriman teknologi terkait dan proses implementasi untuk perilaku pengguna atau proses bisnis.
Mengubur suatu titik adalah istilah profesional di bidang data, dan juga merupakan nama umum di bidang Internet.

Poin terkubur adalah dasar untuk analisis data produk dan umumnya digunakan untuk umpan balik dari sistem rekomendasi, pemantauan dan analisis perilaku pengguna, analisis statistik fungsi baru atau efek aktivitas operasional, dll.

Poin penyematan mencakup dua konsep penting: peristiwa (event) dan atribut (param)

• Peristiwa: Apa yang terjadi dalam aplikasi, seperti tindakan pengguna, peristiwa sistem, atau kesalahan sistem. Misalnya, jika Anda memotret suatu produk, produk tersebut berisi peristiwa berikut: enter_page (masuk ke halaman), Leave_page (keluar dari halaman).
• Param: Atribut yang ditentukan untuk mendeskripsikan segmen pengguna, seperti preferensi bahasa atau lokasi geografis. Ambil contoh acara "Masuk latihan setelah kelas". Ini berisi atribut acara berikut: enter_from (dari halaman mana), class_id (id kursus), dll.
• Nilai atribut (nilai): Dimensi atribut, yaitu dimensi spesifik ketika perilaku dipicu. Misalnya: enter_from: home (halaman beranda), sistem (sistem), dll.

Rencana arus utama

Penguburan tanpa jejak (penguburan penuh) menggunakan metode pemantauan bawaan browser atau APP untuk memantau halaman penelusuran pengguna, klik, dan perilaku lainnya
kekurangan:

• Data bersifat berisik dan dikumpulkan terlepas dari apakah itu berguna atau tidak.
• Tidak dapat menyesuaikan poin terkubur, tidak dapat mengumpulkan peristiwa dan atribut bisnis tertentu
• Kurangnya informasi yang tersedia untuk DA
  keuntungan:
• Akses sederhana, hampir tidak ada intrusi, tidak diperlukan biaya pengembangan tambahan
• Kumpulan perilaku operasi pengguna sangat lengkap dan hampir tidak ada kelalaian yang dilakukan

Poin mengubur kode, pengembang front-end menyesuaikan pemantauan dan pengumpulan dalam kode
kekurangan:

• Beban kerjanya berat, kodenya mengganggu, dan pemeliharaan selanjutnya tidak nyaman.
  keuntungan:
• Dapat mengubur poin secara akurat dan memiliki identifikasi acara yang jelas
• Atribut tenaga penjualan sangat kaya
• Metode pemicu titik terkubur dapat didefinisikan secara fleksibel
• DA lebih nyaman dan tepat untuk digunakan

SDK titik terkubur, SDK memperlihatkan antarmuka untuk melaporkan titik terkubur, dan pengembang tidak mengetahui proses pemantauan dan pengumpulan, seperti teh perusahaan
Kekurangan: TIDAK
keuntungan:

• Pengembangan bisnis hanya perlu memperhatikan identifikasi peristiwa, atribut bisnis, dll.
• Mempertimbangkan keuntungan dari titik penguburan tanpa jejak dan titik penguburan kode

Atribut tersembunyi yang umum

Biasanya front-end menghitung poin yang terkubur menurut dimensi halaman. Atribut peristiwa yang umum adalah sebagai berikut:

Peristiwa terkubur yang umum

Solusi pengumpulan data kinerja

Saat ini, sebagian besar data indikator kinerja berasal dari window. Performance API.

Indikator kinerja umum

Bahasa Inggris

Indikator FP (First Paint) biasanya mencerminkan waktu layar putih suatu halaman. Waktu layar putih akan mencerminkan situasi saat ini. Semakin pendek waktu tunggu pengguna untuk konten, semakin baik kinerja pemuatan jaringan halaman Web sangat bagus, layar putih Semakin pendek waktunya, semakin rendah kemungkinan churn pengguna.

Indikator ini dapat memperoleh informasi titik yang disediakan oleh PerformancePaintTming API melalui metode dalm.getEntriesByType('paint') Temukan objek dengan nama first-paint, dan deskripsinya adalah data indikator FP:

FCP

FCP (First Contentful Paint) adalah titik waktu ketika konten dirender untuk pertama kalinya. Dalam indikator statistik kinerja, waktu sejak pengguna mulai mengakses halaman web ke FCP dapat dianggap sebagai waktu tanpa konten , FCP >= FP

Indikator dapat memperoleh informasi titik yang disediakan oleh PerformancePaintTiming API melalui metode performance.getEntriesByType('paint') Temukan objek dengan nama first-contentful-paint, yang menjelaskan data indikator FCP, seperti yang ditunjukkan pada gambar berikut:

FMP

FMP (First Meaningful Paint) adalah waktu ketika konten bermakna digambar untuk pertama kalinya. Ketika tata letak dan konten teks seluruh halaman dirender secara lengkap, lukisan bermakna pertama dari konten bermakna dapat dianggap selesai.Oleh karena itu, FMP mengukur waktu yang dibutuhkan pengguna untuk melihat konten utama halaman web, dan merupakan indikator pengukuran penting dari perspektif pengalaman pengguna.

Metode penghitungan FMP yang kini dikenal oleh industri front-end adalah "waktu gambar setelah perubahan tata letak halaman maksimum selama pemuatan dan rendering". Anda dapat menggunakan MutationObserver untuk memantau setiap perubahan DOM keseluruhan halaman, memicu callback MutationObserver, dan menghitung skor perubahan pohon DOM saat ini selama callback. Momen ketika skor paling banyak berubah adalah titik waktu FMP.

TTI

TTI (Time To Interactive), yaitu waktu yang dibutuhkan dari awal pemuatan halaman hingga halaman berada dalam keadaan interaktif penuh. Saat halaman berada dalam keadaan interaktif penuh, tiga kondisi berikut terpenuhi:

Halaman tersebut sudah menampilkan konten yang bermanfaat.
Fungsi respons peristiwa yang terkait dengan elemen yang terlihat di halaman telah didaftarkan.
Fungsi respons peristiwa dapat mulai dijalankan dalam waktu 50 md setelah peristiwa terjadi.

Indikator pemuatan sumber daya

window.kinerja.getEntriesByType('resource') akan mengembalikan berbagai indikator kinerja semua sumber daya (js, css, img...) yang dimuat pada halaman saat ini, yang dapat digunakan untuk pengumpulan data kinerja sumber daya statis.

Tipe utamanya adalah: skrip, tautan, img, css, xmlhttprequest, beacon, ambil, lainnya.
PerformanceResourceTiming - API Web | MDN

Metode penghitungan indikator lainnya

Solusi pengumpulan data kesalahan

Ada tiga macam

• Kesalahan pemuatan sumber daya, menangkap kesalahan kegagalan pemuatan sumber daya dalam fase pengambilan melalui addEventListener('error', callback, true).
• kesalahan eksekusi js, tangkap kesalahan js melalui window.onerror.
  • Skrip lintas domain akan memberikan pesan "Kesalahan Skrip", dan tidak ada informasi kesalahan spesifik serta informasi tumpukan yang dapat diperoleh. Saat ini, Anda perlu menambahkan atribut crossorigin="anonymous" ke tag skrip, dan server sumber daya perlu menambahkan konfigurasi terkait CORS, seperti Access-Control-Allow-Origin: *
• Kesalahan janji, tangkap kesalahan janji melalui addEventListener('unhandledrejection', callback), tetapi tidak ada informasi seperti jumlah baris dan kolom tempat kesalahan terjadi, jadi Anda hanya dapat membuang informasi kesalahan yang relevan secara manual.

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

Rencana pelaporan data

Dalam skenario ini, ada dua masalah yang perlu dipertimbangkan:

Jika antarmuka pelaporan data dan sistem bisnis menggunakan nama domain yang sama, browser memiliki batasan jumlah permintaan secara bersamaan, sehingga ada kemungkinan persaingan untuk sumber daya jaringan.
Browser biasanya mengabaikan permintaan ajax asinkron saat halaman dibongkar. Jika permintaan data diperlukan, permintaan ajax sinkron biasanya dibuat di acara unload atau beforeunload untuk menunda pembongkaran halaman. Dari sudut pandang pengguna, lompatan halaman melambat.

Navigator.kirimBeacon

keuntungan:
Mengirimkan data dengan andal saat halaman dibongkar, tanpa memblokir halaman agar tidak ditutup.
Mendukung pengiriman data di latar belakang.

kekurangan:
Hanya permintaan POST yang dapat dikirim, dan hasil respons tidak dapat diperoleh.

Selain Internet Explorer, browser modern arus utama saat ini memiliki tingkat dukungan yang sangat tinggi untuk beacon. Beacon - Dokumentasi MDN

Antarmuka Beacon digunakan untuk menjadwalkan permintaan non-pemblokiran asinkron ke server Web.

• Permintaan suar menggunakan metode HTTP POST dan tidak memerlukan respons.
• Permintaan suar memastikan bahwa inisialisasi selesai sebelum halaman memicu pembongkaran.

Dalam istilah awam, Beacon dapat mengirim data secara asinkron ke server, dan dapat memastikan bahwa permintaan dikirim sebelum pembongkaran halaman selesai (memecahkan masalah bahwa pembongkaran halaman ajax akan menghentikan permintaan). Bagaimana cara menggunakannya:

navigator.sendBeacon(url, data);
1

Parameter data bersifat opsional, dan tipenya dapat berupa ArrayBufferView, Blob, DOMString, atau FormData. Jika browser berhasil menambahkan permintaan suar ke antrian yang akan dikirim, metode ini akan mengembalikan nilai true, jika tidak maka akan mengembalikan false

Saat menggunakan Beacon, backend perlu menggunakan metode post untuk menerima parameter. Mengingat masalah lintas domain, backend juga perlu memodifikasi antarmuka dan mengkonfigurasi CORS. Pada saat yang sama, header permintaan harus memenuhi header permintaan yang masuk dalam daftar aman CORS, yang tipe kontennya harus berupa application/x-www-form-urlencoded, multipart/form-data, atau 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

Gambar

keuntungan:
Mudah digunakan, memiliki kompatibilitas yang baik, dan dapat dilaporkan ke seluruh domain.
Tidak akan memblokir pemuatan dan penutupan halaman.

kekurangan:
Hanya permintaan GET yang dapat dikirim, dan hasil respons tidak dapat diperoleh.
Operasi asinkron tidak didukung.

Masalah kompatibilitas sendBeacon tidak dapat dihindari, namun Anda dapat memanfaatkan sepenuhnya fitur yang sebagian besar browser akan menyelesaikan pemuatan gambar sebelum halaman dibongkar, dan melaporkan data dengan menambahkan img ke halaman.

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

Karena gambar img adalah permintaan get, server yang berbeda memiliki batasan panjang uri. Jika panjangnya melebihi batas, kesalahan HTTP 414 akan terjadi. Oleh karena itu, Anda juga harus memperhatikan frekuensi pelaporan untuk mengurangi terlalu banyak atribut diunggah sekaligus.

Solusi yang kompatibel

Metode sendBeacon lebih disukai, dan metode Image digunakan sebagai cadangan.

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

Faktanya, banyak orang menggunakan GIF untuk mengubur maksudnya?
Pelaporan data ke server dapat dilakukan melalui permintaan antarmuka, permintaan file biasa, atau permintaan sumber daya gambar. Selama data dapat dilaporkan, apakah itu meminta file GIF, meminta file js, atau memanggil antarmuka halaman, server sebenarnya tidak peduli dengan metode pelaporan tertentu. Jadi mengapa semua sistem secara seragam menggunakan metode meminta gambar GIF untuk melaporkan data?
●Mencegah lintas domain
Secara umum, nama domain bertitik bukanlah nama domain saat ini, sehingga semua permintaan antarmuka akan merupakan permintaan lintas domain. Permintaan lintas domain dapat dengan mudah disadap oleh browser karena kesalahan konfigurasi dan pelaporan yang tidak tepat, dan hal ini tidak dapat diterima. Namun, atribut src pada gambar tidak melintasi domain, dan permintaan juga dapat dimulai. (Kecualikan pelaporan antarmuka)
●Mencegah pemblokiran pemuatan halaman dan memengaruhi pengalaman pengguna
Biasanya, setelah membuat node sumber daya, browser tidak akan benar-benar mengirimkan permintaan sumber daya sampai objek tersebut dimasukkan ke dalam pohon DOM browser. Mengoperasikan DOM berulang kali tidak hanya akan menyebabkan masalah kinerja, tetapi memuat sumber daya js/css juga akan memblokir rendering halaman dan memengaruhi pengalaman pengguna.
Pengecualian adalah permintaan gambar. Tidak hanya tidak perlu dimasukkan ke dalam DOM saat membuat gambar, tetapi juga dapat memulai permintaan selama objek Gambar baru dibuat di js, dan tidak ada masalah pemblokiran di lingkungan browser tanpa js juga dikelola secara normal melalui tag img, yang merupakan jenis permintaan sumber daya lainnya. (Kecualikan metode file)
●Dibandingkan dengan PNG/JPG, GIF memiliki ukuran paling kecil
File BMP terkecil membutuhkan 74 byte, PNG membutuhkan 67 byte, dan GIF legal hanya membutuhkan 43 byte.
Untuk respons yang sama, GIF dapat menghemat 41% lalu lintas dibandingkan BMP dan 35% lalu lintas dibandingkan PNG.
Dan kebanyakan dari mereka menggunakan GIF transparan 1*1 piksel untuk melaporkan.
1x1 piksel adalah gambar legal terkecil. Selain itu, karena dilakukan melalui gambar, maka sebaiknya gambar dibuat transparan, sehingga tidak mempengaruhi efek tampilan halaman itu sendiri, untuk menunjukkan bahwa gambar tersebut transparan, Anda hanya perlu menggunakan bit biner untuk menandai gambar sebagai warna transparan, dan tidak perlu menyimpan data ruang warna, yang dapat menghemat volume.

XMLHttpRequest atau Fetch API

keuntungan:

Permintaan asinkron dapat dikirim dan beberapa metode HTTP seperti GET dan POST didukung.
Hasil respon dapat diperoleh dan diproses lebih lanjut.
kekurangan:

Logika permintaan dan respons perlu ditangani secara manual.
Perlu menangani masalah permintaan lintas domain (seperti menyiapkan CORS).

Gunakan XMLHttpRequest atau Fetch API untuk mengirim permintaan asinkron untuk melaporkan data. Anda dapat memilih untuk menggunakan metode GET atau POST dan mengirim data sebagai isi permintaan atau parameter URL.

Soket Web

keuntungan:

Performa real-time yang baik dan mendukung komunikasi dua arah.
Cocok untuk pemantauan waktu nyata dan pelaporan data skala besar.
kekurangan:

Server harus mendukung protokol WebSocket.
Lebih kompleks dan tidak cocok untuk persyaratan titik terkubur yang sederhana.

Platform pelaporan

Alat penguburan data front-end yang umum mencakup Google Analytics, Statistik Baidu, Statistik Umeng, dll. Tentu saja, Anda juga dapat menggunakan antarmuka atau platform internal perusahaan untuk pelaporan.

Ambil Google Analytics sebagai contoh:
Google Analytics adalah alat analisis situs web yang dikembangkan oleh Google untuk melacak dan melaporkan lalu lintas situs web. Ini membantu pemilik situs web memahami perilaku pengunjungnya, termasuk siapa mereka, dari mana asal mereka, apa yang mereka lakukan di situs, dan banyak lagi. Melalui Google Analytics, pemilik website dapat lebih memahami audiensnya, mengoptimalkan konten situs web dan strategi pemasaran, sehingga meningkatkan kinerja situs web dan pengalaman pengguna. Google Analytics menyediakan banyak fungsi analisis data, termasuk data waktu nyata, analisis perilaku pengguna, pelacakan konversi, analisis sumber lalu lintas, dan banyak lagi. Ini adalah alat ampuh yang banyak digunakan di berbagai situs web dan kampanye pemasaran online.

Cara menggunakan Google Analytics

Karena kita menggunakan Google Analytics, kita harus memiliki akun Google terlebih dahulu, yang harus Anda buat sendiri. Kedua, Anda perlu mengetahui pintu masuk ke Google Analytics. Berikut adalah dua alamat yang digunakan:

Pengelola Tag Google：tagmanager.google.com/

Analisis: analytics.google.com/

Pengelola Tag Google
Google Pengelola Tag (GTM) adalah sistem pengelolaan tag yang dikembangkan dan disediakan oleh Google. Hal ini memungkinkan administrator situs web untuk mengelola dan menyebarkan berbagai kode pelacakan, kode analitik, dan tag pemasaran tanpa mengubah kode situs web. Dengan GTM, pengguna dapat dengan mudah menambahkan, memperbarui, dan menghapus tag tanpa bergantung pada pengembang.

Fitur utama GTM meliputi:
Dalam bahasa Inggris sederhana: platform ini digunakan untuk mengumpulkan peristiwa tersembunyi yang dipicu oleh front-end, dan dapat mewujudkan pelaporan data dengan menyesuaikan kondisi pemicu dan memicu panggilan balik peristiwa. Ini digunakan di sini untuk mengumpulkan data dan melaporkannya ke Google Analytics.

Analisis Google
Seperti namanya, ini adalah situs web yang digunakan untuk mengumpulkan, melihat, dan menampilkan data