Web SDK

一、集成SDK

获取Web SDK

• 点击下载
• 使用npm下载安装：npm install ests-sdk-web

1.1 在H5环境下使用

1.1.1 引入SDK文件 初始化并调用采集数据接口

// 引入 SDK 
<script type="text/javascript" src="js/SDK/yh-sdk-web2.1.10.min.js"></script>
var ests = window.ests
// 初始化参数
<script type="text/javascript">
  let globalConfig = {
    debug: true, // 是否在开发者工具的控制台中打印埋点上报日志， 非必须，埋点上线时应设置为false，可选
    server_url: '私有部署服务域名',//数据接收域名地址，用于私有部署服务的场景，可选
    app_key: "qa1576468657XXX", // Tracking System 分配的app_key，必须
    ts_app: "会员中心",//应用别命, 可选
  }
   // 初始化配置
  ests.tracking(globalConfig)
  // 上报页面访问数据
  ests.pageview() 
</script>

• 至此已完成对页面数据的采集，用户访问页面，即可监测到对应数据

1.2 在VUE、 React框架下使用

1.2.1 在main.js引入sdk，初始化并调用采集数据接口

import router from './router'
import ests from 'ests-sdk-web'

// 可以将SDK对象挂载到window上，以便在全局任意位置调用该对象的 ```event``` 方法来上报自定义事件、以及设置用户信息等

  let globalConfig = {
    app_key: "qa1576468657XXX", // Tracking System 分配的app_key，必须
    debug: true, // 是否在开发者工具的控制台中打印埋点上报日志， 非必须，埋点上线时应设置为false，可选
    server_url: '私有部署服务域名',// 数据接收域名地址，用于私有部署服务的场景，可选
    ts_app: "会员中心",// 应用别命, 可选
    is_track_single_page: true // 单页面应用配置，默认不开启
  }
  // 初始化配置
  ests.tracking(globalConfig);

二、设置应用全局自定义属性

接口参数类型：JsonObject
当需求整个小程序范围内访问数据都携带一些业务自定参数的时候，可以调用ests.setTsExt()进行设置

示例

//设置全局自定义扩展属性 可选
getApp().ests.setTsExt({
    appId: "小程序ID",
    appName: "小程序名称"
})

三、设置用户属性

在登录成功后调用ests.setUserInfo()设置用户属性，且应该在发送页面采集数据请求ests.pageview()前调用，否则数据上无法准确识别用户， 如果没有用户信息，可以不用设置，SDK会给用户自动分配一个device_id，可在调试模的控制台日志中看到该属性

参数说明：JsonObject，只支持以下属性的设置

示例

window.$ests.setUserInfo({ 
  guid: "xxx",//用户唯一标识，可用业务系统自己的用户ID；如果微信环境可以用open_id作为guid来标识用户；可选
  open_id: "otzXTjovtYkMOx56Phy764-XXXXX",//用于微信环境下open_id的获取；如果没有，可以不设置；可选
  union_id: "oDSWq1S0lPkZk0SVL2K_2JmpdXXX"//用于微信环境下的union_id获取；如果没有，可以不设置；可选
})

四、上报用户页面浏览行为(PV&UV)

在设置完用户信息后，可设置页面名称、页面标题等属性（否则SDK会默认获取页面的title标签的内容作为页面名称与页面标题）， 并上报用户页面浏览行为(PV&UV)

// H5及VUE、 React框架下单页面应用配置时(is_track_single_page: true)，直接调用ests.tracking(globalConfig)上报用户页面浏览行为(PV&UV)
ests.pageview()

// 非单页面应用配置时(is_track_single_page: false)，需在router.beforeEach调用ests.end_session()、router.afterEach调用ests.pageview()
// 1)在路由守卫beforeEach
router.beforeEach((to, from, next) => {
    if (ests.inited) {
        ests.end_session()
    }
    next();
})

// 2)在路由守卫afterEach
router.afterEach((to, from) => {
    Vue.nextTick(() => {
        // 上报用户页面浏览行为
        ests.pageview() 
    })
})

至此已完成对页面数据的采集，用户访问页面，即可监测到对应数据

五、 自定义事件埋码

使用sdk对象的 event 方法来上报自定义事件跟踪用户行为，并为事件添加自定义事件属性

接口参数类型：JsonObject
JsonObject中的每个参数如下

• event_name：String 事件名称，必须
• event_param：JsonObject 事件属性，非必须

示例 1：查看商品，加入购物车流程

// 在进入商品详情页面加载完成后埋点上传「商品详情」事件
var eventInfo = {
  //定义事件名称
  event_name: "商品详情",
  // 定义事件属性
  event_param: {
    "productId": "1",
    "productName": "源慧大礼品",
    "productCategory": "电子",
  }
}
//调用采集事件接口
window.$ests.event(eventInfo);

// 在商品详情页面为加入购物车按钮进行埋点上传，事件为「加入购物车」
var eventInfo = {
  //定义事件名称
  event_name: "加入购物车",
  // 定义事件属性
  event_param: {
    "productId": "1",
    "productName": "源慧大礼品",
    "productCategory": "电子",
  }
}
//调用采集事件接口
window.$ests.event(eventInfo);

示例 2：用户登录流程

// 点击登录按钮后未提交登录请求前进行埋点上传，事件为「登录」，该事件属性为空
var eventInfo = {
  //定义事件名称
  event_name: "登录"
}
//调用采集事件接口
window.$ests.event(eventInfo);

// 点击登录按钮提交登录请求后进行埋点上传，事件为「登录成功」
var eventInfo = {
    //定义事件名称
    event_name: "登录成功",
    // 定义事件属性
    event_param: {
      "status": "success",// 设置登录状态 success/fail
      "errMsg": ""// 设置登录失败错误信息
    }
}
//调用采集事件接口
window.$ests.event(eventInfo);

• 通过上面的示例，可以在任意流程进行事件埋点

六、 声明式事件埋码

除了通过调用event方法来上报事件外，我们提供了通过声明元素属性的方式，当访客点击对应元素时候，由sdk读取设置的属性值，自动上报事件。 可声明的属性有：

data-ests-eventname — 事件名称

data-ests-eventparam — 事件属性

示例：

<button type="button" data-ests-eventname="声明式事件" data-ests-eventparam="{phone: '186XXXXXXXX'}">注册</button>

当访客点击注册按钮时，会上报一个事件名称为“注册”，事件属性“phone”为“186XXXXXXXX”的事件。

数据校验指引