Use the WebTracking JavaScript SDK to collect user logs from browsers - Simple Log Service

To collect and analyze user information from your website, such as browser details, browsing activity, or purchase history, use the WebTracking JavaScript SDK. This SDK sends user logs directly from the web client to a logstore, which bypasses your application servers and reduces their load. This topic describes how to upload logs with the WebTracking JavaScript SDK.

Prerequisites

The WebTracking feature is enabled for your logstore. For an introduction to WebTracking and how to enable it, see Use WebTracking to collect front-end logs.

Limitations

When you use the WebTracking JavaScript SDK to upload logs, each write request is limited to 3 MB or 4,096 log entries. For more information about the WebTracking JavaScript SDK, see SLS WebTracking JavaScript SDK.

Procedure

Step 1: Install and configure the SDK

Npm method

Install Node.js.
Run the following command to install the dependency:
```
npm install --save @aliyun-sls/web-track-browser
```

Add the following code to your application to configure the SDK:

import SlsTracker from '@aliyun-sls/web-track-browser'
const opts = {
  host: '${host}', // The endpoint for the region where your project is located. For example, cn-hangzhou.log.aliyuncs.com.
  project: '${project}', // The name of the project.
  logstore: '${logstore}', // The name of the logstore.
  time: 10, // The time interval in seconds for sending logs. Default value: 10.
  count: 10, // The number of logs to send in each batch. Default value: 10.
  topic: 'topic', // A custom log topic.
  source: 'source',
  tags: {
    tags: 'tags',
  },
}
const tracker = new SlsTracker(opts)

Parameter	Required	Description
host	Yes	The Simple Log Service endpoint for the region where your project is located. This example uses China (Hangzhou). Replace it with the actual endpoint for your region. For more information, see Service endpoints.
project	Yes	The name of the project.
logstore	Yes	The name of the logstore.
time	No	The interval, in seconds, for sending logs. Default: 10.
count	No	The number of logs to send per batch. Default: 10.
topic	No	A custom log topic for easier identification.
source	No	A custom log source for easier identification.
tags	No	Custom log tags for easier identification.

CDN method

Add the following code to the <body> element of your HTML file to import the WebTracking JavaScript SDK from a CDN. If you use the CDN method, the latest supported SDK version is 0.3.5. For other versions, see SLS WebTracking JavaScript SDK.
```
<script src="https://g.alicdn.com/sls/sls-js-sdk/0.3.5/web-track-browser.js"></script>
```

Add the following code to your website's JavaScript file:

if (window.SLS_Tracker) {
       const tracker = new SLS_Tracker({
       host: '${host}', // The endpoint for the region where your project is located. For example, cn-hangzhou.log.aliyuncs.com.
       project: '${project}', // The name of the project.
       logstore: '${logstore}', // The name of the logstore.
       time: 10, // The time interval in seconds for sending logs. Default value: 10.
       count: 10, // The number of logs to send in each batch. Default value: 10.
       topic: 'topic', // A custom log topic.
       source: 'source',
       tags: {
           tags: 'tags',
       },
    })
}

Parameter	Required	Description
host	Yes	The Simple Log Service endpoint for the region where your project is located. This example uses China (Hangzhou). Replace it with the actual endpoint for your region. For more information, see Service endpoints.
project	Yes	The name of the project.
logstore	Yes	The name of the logstore.
time	No	The interval, in seconds, for sending logs. Default: 10.
count	No	The number of logs to send per batch. Default: 10.
topic	No	A custom log topic for easier identification.
source	No	A custom log source for easier identification.
tags	No	Custom log tags for easier identification.

Step 2: Upload logs

To upload a single log, pass an Object. To upload multiple logs, pass an Array of Objects.

Upload a single log:

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

Immediately upload a single log (bypasses the time and count settings):

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

Upload a batch of logs:

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

Immediately upload a batch of logs (bypasses the time and count settings):

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

Step 3: View the upload result

You can view the uploaded logs in the console or by using the API.

Console

Log on to the Simple Log Service console.
In the Projects section, click your project.
On the Log Storage > Logstores tab, click your logstore, and then click Consumption Preview to view the logs.

To query and analyze logs, see Query and analysis quick start.

API

Call the CreateIndex operation to create a full-text index or a field index. If you want to use SELECT statements, you must create a field index.
Call the GetLogsV2 operation to query log data. This operation returns an array of log entries.

FAQ

How do I resolve the "401 Authorization Required" error that occurs during debugging?

This error occurs if WebTracking is not enabled for the logstore. To resolve this, enable the WebTracking feature. For more information, see Enable WebTracking.

References

Error codes.
In addition to its native SDK, SLS also supports the common Alibaba Cloud SDKs. For more information, see Simple Log Service_SDK Center_Alibaba Cloud OpenAPI Explorer.
Simple Log Service CLI.