npm package: @funsdata/js-sdk
Description: The JavaScript browser client library for DataEye
Latest version: 2.0.2

# @funsdata/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
<!DOCTYPE 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/@funsdata/js-sdk@latest/dist/umd.min.js"
    ></script>
  </body>
</html>
```

</details>

### 异步载入

增加`async`标记即可

```html
<script
  async
  onload="initSDK()"
  src="https://unpkg.com/@funsdata/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 @funsdata/js-sdk
```

### do something

```javascript
import fa from "@funsdata/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

![crypto resolve fallback](./images/crypto_resolve_fallback.png)
这是一个加密工具，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)