Use the WebTracking JavaScript SDK to collect user logs from browsers - Simple Log Service: Central de Documentação do Alibaba Cloud

Para coletar e analisar informações de usuários do seu site, como detalhes do navegador, atividade de navegação ou histórico de compras, use o WebTracking JavaScript SDK. Esse SDK envia logs de usuários diretamente do cliente web para um logstore, sem passar pelos servidores da aplicação, o que reduz a carga sobre eles. Este tópico descreve como enviar logs com o WebTracking JavaScript SDK.

Pré-requisitos

O recurso WebTracking deve estar ativado no seu logstore. Para obter uma introdução ao WebTracking e saber como ativá-lo, consulte Usar o WebTracking para coletar logs de front-end.

Limitações

Ao usar o WebTracking JavaScript SDK para enviar logs, cada solicitação de gravação tem limite de 3 MB ou 4.096 entradas de log. Para mais informações sobre o WebTracking JavaScript SDK, consulte SLS WebTracking JavaScript SDK.

Procedimento

Etapa 1: Instalar e configurar o SDK

Método npm

Instale o Node.js.
Execute o comando a seguir para instalar a dependência:
```
npm install --save @aliyun-sls/web-track-browser
```

Adicione o código abaixo à sua aplicação para configurar o 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)

Parâmetro	Obrigatório	Descrição
host	Sim	Endpoint do Simple Log Service para a região onde seu projeto está localizado. Este exemplo usa China (Hangzhou). Substitua pelo endpoint real da sua região. Para mais informações, consulte Endpoints de serviço.
project	Sim	Nome do projeto.
logstore	Sim	Nome do logstore.
time	Não	Intervalo, em segundos, para envio de logs. Padrão: 10.
count	Não	Quantidade de logs a serem enviados por lote. Padrão: 10.
topic	Não	Tópico de log personalizado para facilitar a identificação.
source	Não	Origem de log personalizada para facilitar a identificação.
tags	Não	Tags de log personalizadas para facilitar a identificação.

Método CDN

Adicione o seguinte código ao elemento <body> do seu arquivo HTML para importar o WebTracking JavaScript SDK via CDN. Se você utilizar o método CDN, a versão mais recente suportada do SDK é a 0.3.5. Para outras versões, consulte SLS WebTracking JavaScript SDK.
```
<script src="https://g.alicdn.com/sls/sls-js-sdk/0.3.5/web-track-browser.js"></script>
```

Inclua o código abaixo no arquivo JavaScript do seu site:

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',
       },
    })
}

Parâmetro	Obrigatório	Descrição
host	Sim	Endpoint do Simple Log Service para a região onde seu projeto está localizado. Este exemplo usa China (Hangzhou). Substitua pelo endpoint real da sua região. Para mais informações, consulte Endpoints de serviço.
project	Sim	Nome do projeto.
logstore	Sim	Nome do logstore.
time	Não	Intervalo, em segundos, para envio de logs. Padrão: 10.
count	Não	Quantidade de logs a serem enviados por lote. Padrão: 10.
topic	Não	Tópico de log personalizado para facilitar a identificação.
source	Não	Origem de log personalizada para facilitar a identificação.
tags	Não	Tags de log personalizadas para facilitar a identificação.

Etapa 2: Enviar logs

Para enviar um único log, passe um Object. Para enviar vários logs, passe um Array de Object s.

Envie um único log:

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

Envie imediatamente um único log (ignora as configurações de time e count):

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

Envie um lote de logs:

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

Envie imediatamente um lote de logs (ignora as configurações de time e count):

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

Etapa 3: Visualizar o resultado do envio

Visualize os logs enviados no console ou por meio da API.

Console

Faça login no console do Simple Log Service.
Na seção Projects, clique em seu projeto.
Na aba Log Storage > Logstores, clique em seu logstore e, em seguida, clique em Consumption Preview para visualizar os logs.

Para consultar e analisar logs, consulte Guia de início rápido para consulta e análise.

API

Chame a operação CreateIndex para criar um índice de texto completo ou um índice de campo. Para usar instruções SELECT, crie um índice de campo.
Chame a operação GetLogsV2 para consultar dados de log. Essa operação retorna um array de entradas de log.

Perguntas frequentes

Como resolver o erro "401 Authorization Required" durante a depuração?

Esse erro ocorre quando o WebTracking não está ativado no logstore. Para corrigir, ative o recurso WebTracking. Para mais informações, consulte Ativar o WebTracking.

Referências

Códigos de erro.
Além do SDK nativo, o SLS também oferece suporte aos SDKs comuns da Alibaba Cloud. Para mais informações, consulte Simple Log Service_SDK Center_Alibaba Cloud OpenAPI Explorer.
CLI do Simple Log Service.