浏览器 JavaScript SDK

更新时间： 2024-03-12 11:49

日志服务支持通过 Web Tracking 自动采集终端用户浏览器的日志。本文介绍如何使用 Web Tracking JavaScript SDK 自动采集浏览器的用户日志。

背景信息

您可以通过 Web Tracking 采集各种浏览器的用户信息，例如：

• 用户使用的浏览器、操作系统、分辨率等信息。
• 用户浏览行为记录（例如：用户在网站上的单击行为、购买行为等信息）。
• 用户在 App 中的停留时间、是否活跃等信息。

注意事项

• 使用 Web Tracking 则表示该 Logstore 打开互联网匿名写入权限，没有经过有效鉴权（不需要 AccessKey），可能产生脏数据。
• POST 请求每次写入的日志数量上限为 10 MB，日志组中每条日志下的 Value 部分建议不超过 1 MB。
• 日志服务浏览器 JavaScript SDK 独立开发，基本无任何外部依赖。
• 日志服务浏览器 JavaScript SDK 只支持部署到浏览器端，支持 cjs 打包和 es 打包两种方式。
• 日志服务浏览器 JavaScript SDK 目前仅支持使用 npm 方式进行安装，暂不支持 CDN 安装 js（es5）方式。

适用平台

dmp-track-sdk 只支持浏览器端。

数据采集

通过 JavaScript SDK 写入用户日志前，您需要导入 SDK，完成采集配置，包括配置存储日志的产品编码、登录信息和采集指标等。

1. 安装依赖包

npm install --save dmp-track-sdk

2.在您的代码工程中，导入依赖模块。

import DmpTrack from 'dmp-track-sdk';

3.配置 opts 参数

const opts = {
  domain: '${host}', // 所在地域的服务入口。例如xxx.log.com
  productCode: '${productCode}', // 产品编码
  token: '${token}', // 登录信息
  realTime: '${realTime}', // 是否实时上传日志，默认实时
  interval: '${interval}', // 非实时上传日志，发送间隔，默认10秒
  count: '${count}', // 发送日志的数量大小，默认是20条
  logs: '${logs}', // 日志埋点触发时是否输出控制台，默认否
  close: '${close}', // 日志埋点关闭状态，默认否
};

| 参数名称 | 是否必填 | 说明 | | ----------- | -------- | ------------------------------------------------ | | domain | 是 | 日志服务所在环境 api 域名。 | | productCode | 否 | 用户体系维护的产品编码。 | | token | 否 | 当前埋点产品登录会话 key。 | | realTime | 否 | 是否实时上传日志，默认实时。 | | interval | 否 | 发送日志的时间间隔，默认值为 10 秒，单位为毫秒。 | | count | 否 | 发送日志的数量大小，默认是 20 条。 | | logs | 否 | 日志埋点触发时是否输出控制台，默认否。 | | close | 否 | 日志埋点关闭状态，默认否。 |

4.创建 tracker 对象

通过该对象向日志服务发起上传日志请求。

const tracker = new DmpTrack(opts);

5.上传日志

此处为上传日志的具体业务逻辑，您可以在此定义希望采集的日志详细情况。

tracker.send({
  eventName: 'click',
  userNo: 'd49fc64bbea8a2761a46b9881248353d924a80a6',
  product: 'decision-pc',
});

核心功能

send()

说明: 单条数据上传。

参数：Object 类型

示例：

tracker.send({
  eventName: 'click',
  userNo: 'd49fc64bbea8a2761a46b9881248353d924a80a6',
  product: 'decision-pc',
});

sendBatch()

说明: 批量数据上传。

参数：Array 类型

示例：

tracker.sendBatch([
  {
    eventName: 'click',
    userNo: 'd49fc64bbea8a2761a46b9881248353d924a80a6',
    product: 'decision-pc',
  },
  {
    eventName: 'click',
    userNo: 'd49fc64bbea8a2761a46b9881248353d924a80a6',
    product: 'decision-pc',
  },
]);

部署

当您使用 webpack、rollup 等打包前端工程时，该 SDK 代码会随着您的业务代码一起被打包部署。