@eclicktech/js-sdk
Version:
The JavaScript browser client library for DataEye
254 lines (212 loc) • 6.22 kB
Markdown
# @eclicktech/js-sdk
数眼智能产品，埋点 js-sdk 功能介绍
# Usage
## umd
[umd demo](https://gitlab.yeahmobi.com/gst/javascript-sdk/-/blob/master/dist/umd.html)
### 同步载入
<details>
<summary>点击展开收起 HTML 代码</summary>
```html
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>js-sdk sync</title>
</head>
<body>
<div>
<h3>设置访客ID</h3>
访客ID:
<input id="distinctId" type="text" />
<button onclick="identify()">配置访客ID</button>
<button onclick="getDistinctId()">获取访客ID</button>
</div>
<div>
<h3>设置账号ID</h3>
账号ID:
<input id="accountId" type="text" />
<button onclick="login()">设置账号ID</button>
<button onclick="logout()">清除账号ID</button>
</div>
<div>
<h3>获取设备ID</h3>
<button onclick="getDeviceId()">获取设备ID</button>
</div>
<div>
<h3>上传事件</h3>
<button onclick="track()">上传事件</button>
</div>
<div>
<h3>心跳</h3>
<button onclick="setHeartbeat()">开始心跳</button>
<button onclick="clearHeartbeat()">结束心跳</button>
<button onclick="setHeartbeatProps()">设置心跳参数</button>
<button onclick="removeHeartbeatProps()">删除心跳参数</button>
</div>
<script>
function initSDK() {
window.fa = window.funsdata;
// 创建 SDK 配置对象
const config = {
appId: "460",
serverUrl: "https://deapi.funsdata.com/v1/sdk/report",
showLog: false,
// debug模式,
mode: "debug",
// 开启上报加密
// encrypt: true
};
// 用配置对象初始化 SDK
fa.init(config);
}
// 配置访客ID
function identify() {
let distinctId = document.getElementById("distinctId").value;
fa.identify(distinctId);
}
// 获取访客ID
function getDistinctId() {
let distinctId = fa.getDistinctId();
alert(distinctId);
}
// 设置账号ID
function login() {
let accountId = document.getElementById("accountId").value;
fa.login(accountId);
}
// 清除账号ID
function logout() {
fa.logout();
document.getElementById("accountId").value = "";
}
// 获取设备ID
function getDeviceId() {
console.log(fa.getDeviceId());
}
// 开始心跳
function setHeartbeat() {
fa.startHeartbeat(3000);
}
// 结束心跳
function clearHeartbeat() {
fa.clearHeartbeat();
}
// 设置心跳参数
function setHeartbeatProps() {
fa.setHeartbeatProps({
test1: 1,
test2: 1,
});
fa.setHeartbeatProps({
test2: 2,
test3: 3,
});
}
// 删除心跳参数
function removeHeartbeatProps() {
// fa.removeHeartbeatProps() // 删除所有自定义心跳上报参数
// fa.removeHeartbeatProps('test1') // 删除单个心跳上报参数
fa.removeHeartbeatProps(["test1", "test3"]); // 删除多个心跳上报参数
}
// 上传事件
async function track() {
try {
const { res, req } = await fa.track(
"test", // 追踪事件的名称
{
exampleProp1: "testValue1",
exampleProp2: "testValue2",
} // 需要上传的事件属性
);
// 当前请求参数
console.log(JSON.parse(req));
// 响应参数
console.log(JSON.parse(res));
} catch (error) {
// 抛出错误
console.error(error);
}
}
</script>
<script
onload="initSDK()"
src="https://unpkg.com/@eclicktech/js-sdk@latest/dist/umd.min.js"
></script>
</body>
</html>
```
</details>
### 异步载入
增加`async`标记即可
```html
<script
async
onload="initSDK()"
src="https://unpkg.com/@eclicktech/js-sdk@latest/dist/umd.min.js"
></script>
```
## esm
esm 引入，会将 dependencies 作为 external，如果项目安装了以下依赖，可以公用依赖，减少打包体积。
```json
{
"dependencies": {
"crypto-js": "^4.2.0",
"jsencrypt": "^3.3.2",
"pako": "^2.1.0"
}
}
```
<!-- [esm demo](https://gitlab.yeahmobi.com/gst/javascript-sdk/-/blob/master/dist/esm.html) -->
### install
```bash
pnpm i @eclicktech/js-sdk
```
### do something
```javascript
import fa from "@eclicktech/js-sdk";
const config = {
appId: "460",
serverUrl: "https://deapi.funsdata.com/v1/sdk/report",
showLog: false,
// debug模式,
mode: "debug",
// 开启上报加密
// encrypt: true
};
// 用配置对象初始化 SDK
fa.init(config);
console.log("getDeviceId", fa.getDeviceId());
```
# 常见问题
## module not found, crypto resolve fallback
这是一个加密工具，webpack5 中默认取消了 node 模块的 polyfill，按照提示处理即可。以下是一个不要 polyfill 的示例。
```javascript
// webpack
module.exports = {
resolve: {
fallback: {
crypto: false,
},
},
};
// craco.config.js
const webpack = require("webpack");
module.exports = {
webpack: {
configure: (webpackConfig) => {
// 添加 fallback 配置
webpackConfig.resolve.fallback = {
...webpackConfig.resolve.fallback,
events: require.resolve("events/"),
crypto: require.resolve("crypto-browserify"),
};
return webpackConfig;
},
},
};
```
# 更多产品功能
[数眼智能埋点说明](https://www.yuque.com/maticoo/eetpxb/uuhu37cv782gp0x4)