Cara menggunakan SDK pelacakan web untuk JavaScript untuk mengumpulkan log situs web - Simple Log Service

Jika Anda ingin mengumpulkan dan menganalisis informasi tentang pengguna situs web, seperti browser yang digunakan oleh pengguna, catatan perilaku penjelajahan mereka, dan catatan perilaku pembelian mereka, Anda dapat menggunakan SDK pelacakan web untuk JavaScript. SDK ini memungkinkan Anda mengunggah log langsung dari halaman web ke Layanan Log Sederhana (SLS), tanpa perlu mengunggah log ke server aplikasi, sehingga membantu mengurangi beban server. Topik ini menjelaskan cara menggunakan SDK pelacakan web untuk JavaScript dalam mengumpulkan log situs web.

Prasyarat

Fitur pelacakan web harus diaktifkan untuk logstore Anda. Untuk informasi lebih lanjut tentang cara mengaktifkan dan menggunakan fitur pelacakan web, lihat Gunakan fitur pelacakan web untuk mengumpulkan log.

Batasan

Jika Anda menggunakan SDK pelacakan web untuk JavaScript, Anda hanya dapat menulis maksimal 3 MB data log atau 4.096 log dalam satu waktu. Untuk informasi lebih lanjut tentang SDK pelacakan web untuk JavaScript, lihat Web tracking SDK untuk JavaScript.

Prosedur

Langkah 1: Instal dan konfigurasikan SDK

Metode npm

Instal Node.js.
Jalankan kode berikut di server Anda untuk menginstal dependensi:
```
npm install --save @aliyun-sls/web-track-browser
```

Tambahkan kode berikut ke program Anda untuk mengonfigurasi SDK:

import SlsTracker from '@aliyun-sls/web-track-browser'

const opts = {
  host: '${host}', // Titik akhir Layanan Log Sederhana untuk wilayah tempat proyek Anda berada. Contoh: cn-hangzhou.log.aliyuncs.com.
  project: '${project}', // Nama proyek.
  logstore: '${logstore}', // Nama logstore.
  time: 10, // Interval pengiriman log. Nilai default: 10. Unit: detik.
  count: 10, // Jumlah maksimum log yang dapat dikirim dalam setiap permintaan. Nilai default: 10.
  topic: 'topic',// Topik kustom log.
  source: 'source',
  tags: {
    tags: 'tags',
  },
}

const tracker = new SlsTracker(opts)  // Buat objek SlsTracker.

Parameter	Diperlukan	Deskripsi
host	Ya	Titik akhir Layanan Log Sederhana untuk wilayah tempat proyek Anda berada. Dalam contoh ini, titik akhir Layanan Log Sederhana untuk wilayah China (Hangzhou) digunakan. Ganti nilai parameter ini dengan titik akhir aktual Anda. Untuk informasi lebih lanjut, lihat Titik Akhir.
project	Ya	Nama proyek.
logstore	Ya	Nama logstore.
time	Tidak	Interval pengiriman log. Nilai default: 10. Unit: detik.
count	Tidak	Jumlah maksimum log yang dapat dikirim dalam setiap permintaan. Nilai default: 10.
topic	Tidak	Topik log. Anda dapat menentukan nilai kustom untuk mengidentifikasi log.
source	Tidak	Sumber log. Anda dapat menentukan nilai kustom untuk mengidentifikasi log.
tags	Tidak	Informasi tag tentang log. Anda dapat menentukan nilai kustom untuk mengidentifikasi log.

Metode CDN

Catatan

Jika metode CDN digunakan, versi SDK maksimum adalah 0.3.5.

Tambahkan kode berikut ke elemen <body> file HTML Anda. Anda dapat menggunakan Alibaba Cloud CDN untuk mengimpor file sumber daya SDK pelacakan web untuk JavaScript. Untuk informasi lebih lanjut tentang versi SDK, lihat Web tracking SDK untuk JavaScript.
```
<script src="https://g.alicdn.com/sls/sls-js-sdk/0.3.5/web-track-browser.js"></script>
```

Tambahkan kode berikut ke file JavaScript situs web Anda:

if (window.SLS_Tracker) {
       const tracker = new SLS_Tracker({
       host: '${host}', // Titik akhir Layanan Log Sederhana untuk wilayah tempat proyek Anda berada. Contoh: cn-hangzhou.log.aliyuncs.com.
       project: '${project}', // Nama proyek.
       logstore: '${logstore}', // Nama logstore.
       time: 10, // Interval pengiriman log. Nilai default: 10. Unit: detik.
       count: 10, // Jumlah maksimum log yang dapat dikirim dalam setiap permintaan. Nilai default: 10.
       topic: 'topic',// Topik kustom log.
       source: 'source',
       tags: {
           tags: 'tags',
       },
    })
}

Parameter	Diperlukan	Deskripsi
host	Ya	Titik akhir Layanan Log Sederhana untuk wilayah tempat proyek Anda berada. Dalam contoh ini, titik akhir Layanan Log Sederhana untuk wilayah China (Hangzhou) digunakan. Ganti nilai parameter ini dengan titik akhir aktual Anda. Untuk informasi lebih lanjut, lihat Titik Akhir.
project	Ya	Nama proyek.
logstore	Ya	Nama logstore.
time	Tidak	Interval pengiriman log. Nilai default: 10. Unit: detik.
count	Tidak	Jumlah maksimum log yang dapat dikirim dalam setiap permintaan. Nilai default: 10.
topic	Tidak	Topik log. Anda dapat menentukan nilai kustom untuk mengidentifikasi log.
source	Tidak	Sumber log. Anda dapat menentukan nilai kustom untuk mengidentifikasi log.
tags	Tidak	Informasi tag tentang log. Anda dapat menentukan nilai kustom untuk mengidentifikasi log.

Langkah 2: Unggah log

Ketika mengunggah log tunggal, log tersebut diunggah sebagai objek terpisah. Ketika mengunggah beberapa log, log-log tersebut diunggah sebagai array yang berisi beberapa objek.

Unggah log tunggal. Tipe adalah objek. Contoh:

tracker.send({
  eventType:'view_product',
  productName: 'Tablet',
  price: 500
})

Segera unggah log tunggal. Parameter waktu dan jumlah tidak berlaku. Tipe adalah objek. Contoh:
```
tracker.sendImmediate({
  eventType:'view_product',
  productName: 'Tablet',
  price: 500
})
```

Unggah beberapa log sekaligus. Tipe adalah array. Contoh:

tracker.sendBatchLogs([
  {
    eventType: 'view_product',
    productName: 'Tablet',
    price: 500
  },
  {
    eventType: 'view_product',
    productName: 'Laptop',
    price: 1200
  }
])

Segera unggah beberapa log sekaligus. Parameter waktu dan jumlah tidak berlaku. Tipe adalah array. Contoh:

tracker.sendBatchLogsImmediate([
  {
    eventType:'view_product',
    productName: 'Tablet',
    price: 500
  },
  {
    eventType:'view_product',
    productName: 'Laptop',
    price: 1200
  }
])

Langkah 3: Lihat hasil unggahan

Anda dapat melihat hasil unggahan menggunakan konsol atau dengan memanggil operasi API.

Konsol

Masuk ke Konsol Layanan Log Sederhana.
Di bagian Proyek, klik proyek yang diinginkan.
Pada tab Log Storage > Logstores, klik logstore yang diinginkan. Kemudian klik Consumption Preview untuk melihat log.

Untuk analisis kueri pada log, lihat Panduan kueri dan analisis log.

API

Panggil operasi CreateIndex untuk membuat indeks teks penuh atau indeks bidang. Jika Anda ingin menggunakan pernyataan SELECT, Anda harus membuat indeks bidang.
Panggil operasi GetLogsV2 untuk menanyakan log dalam logstore. Hasil yang dikembalikan adalah array log. Setiap elemen dalam array adalah log.

FAQ

Apa yang harus saya lakukan jika kesalahan "401 Authorization Required" dilaporkan saat saya men-debug kode?

Sebelum menggunakan SDK pelacakan web untuk JavaScript untuk menulis log ke logstore, pastikan fitur pelacakan web telah diaktifkan untuk logstore. Untuk informasi lebih lanjut, lihat Gunakan fitur pelacakan web untuk mengumpulkan log.

Referensi

Jika respons yang dikembalikan oleh Layanan Log Sederhana berisi informasi kesalahan setelah Anda memanggil operasi API, pemanggilan gagal. Anda dapat menangani kesalahan berdasarkan kode kesalahan yang dikembalikan saat pemanggilan API gagal. Untuk informasi lebih lanjut, lihat Kode kesalahan.
Layanan Log Sederhana juga kompatibel dengan SDK Alibaba Cloud. Untuk informasi lebih lanjut, lihat Simple Log Service_SDK Center_Alibaba Cloud OpenAPI Explorer.
Layanan Log Sederhana menyediakan antarmuka baris perintah (CLI) untuk memenuhi persyaratan konfigurasi otomatis dalam Layanan Log Sederhana. Untuk informasi lebih lanjut, lihat Ikhtisar CLI Layanan Log Sederhana.