Gunakan WebTracking JavaScript SDK untuk mengumpulkan log pengguna dari browser - Simple Log Service

Untuk mengumpulkan dan menganalisis informasi pengguna dari situs web Anda—seperti detail browser, aktivitas penelusuran, atau riwayat pembelian—gunakan WebTracking JavaScript SDK. SDK ini mengirim log pengguna langsung dari klien web ke logstore, sehingga melewati server aplikasi Anda dan mengurangi beban pada server tersebut. Topik ini menjelaskan cara mengunggah log menggunakan WebTracking JavaScript SDK.

Prasyarat

Fitur WebTracking telah diaktifkan untuk logstore Anda. Untuk informasi tentang WebTracking dan cara mengaktifkannya, lihat Gunakan WebTracking untuk mengumpulkan log front-end.

Batasan

Saat menggunakan WebTracking JavaScript SDK untuk mengunggah log, setiap permintaan tulis dibatasi hingga 3 MB atau 4.096 entri log. Untuk informasi selengkapnya tentang WebTracking JavaScript SDK, lihat SLS WebTracking JavaScript SDK.

Prosedur

Langkah 1: Instal dan konfigurasikan SDK

Metode Npm

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

Tambahkan kode berikut ke aplikasi Anda untuk mengonfigurasi SDK:

import SlsTracker from '@aliyun-sls/web-track-browser'
const opts = {
  host: '${host}', // Titik akhir untuk wilayah tempat proyek Anda berada. Contohnya, cn-hangzhou.log.aliyuncs.com.
  project: '${project}', // Nama proyek.
  logstore: '${logstore}', // Nama logstore.
  time: 10, // Interval waktu dalam detik untuk mengirim log. Nilai default: 10.
  count: 10, // Jumlah log yang dikirim dalam setiap batch. Nilai default: 10.
  topic: 'topic', // Topik log kustom.
  source: 'source',
  tags: {
    tags: 'tags',
  },
}
const tracker = new SlsTracker(opts)

Parameter	Wajib	Deskripsi
host	Ya	Titik akhir Simple Log Service untuk wilayah tempat proyek Anda berada. Contoh ini menggunakan China (Hangzhou). Ganti dengan titik akhir aktual untuk wilayah Anda. Untuk informasi selengkapnya, lihat Titik akhir layanan.
project	Ya	Nama proyek.
logstore	Ya	Nama logstore.
time	Tidak	Interval, dalam detik, untuk mengirim log. Default: 10.
count	Tidak	Jumlah log yang dikirim per batch. Default: 10.
topic	Tidak	Topik log kustom untuk memudahkan identifikasi.
source	Tidak	Sumber log kustom untuk memudahkan identifikasi.
tags	Tidak	Tag log kustom untuk memudahkan identifikasi.

Metode CDN

Tambahkan kode berikut ke elemen <body> file HTML Anda untuk mengimpor WebTracking JavaScript SDK dari CDN. Jika menggunakan metode CDN, versi SDK terbaru yang didukung adalah 0.3.5. Untuk versi lainnya, lihat SLS WebTracking JavaScript SDK.
```
<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 untuk wilayah tempat proyek Anda berada. Contohnya, cn-hangzhou.log.aliyuncs.com.
       project: '${project}', // Nama proyek.
       logstore: '${logstore}', // Nama logstore.
       time: 10, // Interval waktu dalam detik untuk mengirim log. Nilai default: 10.
       count: 10, // Jumlah log yang dikirim dalam setiap batch. Nilai default: 10.
       topic: 'topic', // Topik log kustom.
       source: 'source',
       tags: {
           tags: 'tags',
       },
    })
}

Parameter	Wajib	Deskripsi
host	Ya	Titik akhir Simple Log Service untuk wilayah tempat proyek Anda berada. Contoh ini menggunakan China (Hangzhou). Ganti dengan titik akhir aktual untuk wilayah Anda. Untuk informasi selengkapnya, lihat Titik akhir layanan.
project	Ya	Nama proyek.
logstore	Ya	Nama logstore.
time	Tidak	Interval, dalam detik, untuk mengirim log. Default: 10.
count	Tidak	Jumlah log yang dikirim per batch. Default: 10.
topic	Tidak	Topik log kustom untuk memudahkan identifikasi.
source	Tidak	Sumber log kustom untuk memudahkan identifikasi.
tags	Tidak	Tag log kustom untuk memudahkan identifikasi.

Langkah 2: Unggah log

Untuk mengunggah satu log, berikan sebuah Object. Untuk mengunggah beberapa log, berikan sebuah Array berisi Object.

Unggah satu log:

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

Unggah segera satu log (melewati pengaturan time dan count):

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

Unggah batch log:

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

Unggah segera batch log (melewati pengaturan time dan count):

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

Langkah 3: Lihat hasil unggahan

Anda dapat melihat log yang diunggah di Konsol atau dengan menggunakan API.

Konsol

Masuk ke Konsol Simple Log Service.
Pada bagian Projects, klik proyek Anda.
Di tab Log Storage > Logstores, klik logstore Anda, lalu klik Consumption Preview untuk melihat log.

Untuk melakukan kueri dan analisis log, lihat Panduan cepat kueri dan analisis.

API

Panggil operasi CreateIndex untuk membuat indeks teks penuh atau indeks bidang. Jika ingin menggunakan pernyataan SELECT, Anda harus membuat indeks bidang.
Panggil operasi GetLogsV2 untuk melakukan kueri data log. Operasi ini mengembalikan array entri log.

FAQ

Bagaimana cara mengatasi error "401 Authorization Required" yang muncul saat debugging?

Error ini terjadi jika WebTracking belum diaktifkan untuk logstore tersebut. Untuk mengatasinya, aktifkan fitur WebTracking. Untuk informasi selengkapnya, lihat Aktifkan WebTracking.

Referensi

Kode error.
Selain SDK native-nya, SLS juga mendukung SDK Alibaba Cloud umum. Untuk informasi selengkapnya, lihat Simple Log Service_SDK Center_Alibaba Cloud OpenAPI Explorer.
Simple Log Service CLI.