chemical

半自动埋点方案。

特点

• 支持页面浏览全埋点
• 支持元素点击、页面浏览、页面访问时长、元素曝光、自定义事件代码埋点上报
• 支持设置元素曝光条件，达到条件进行上报
• 支持自定义组装上报数据和自定义数据上报
• 支持 Vue、React、JavaScript、微信小程序

入门指南

1、安装chemical

npm i @murui/chemical --save

2、引入chemical

import chemical from '@murui/chemical'

3、chemical-sdk 使用示例

<div>
  <button data-c-click='{"message": "Hi..."}'>点击事件</button>
  <button data-c-view='{"message": "Hi..."}'>曝光事件</button>
</div>

<script>
  import chemical, { ajax } from '@murui/chemical'

  // 初始化 sdk
  chemical({
    visibleTime: 1000, // 可选，曝光元素停留时长，毫秒
    threshold: 0.2, // 可选，达到曝光元素的距离，如滑动到目标元素的50%，则写0.5
    throttleTime: 1000, // 可选，重复数据截流时长，毫秒
    dataName: { // 可选
      click: 'data-c-click', // 点击事件
      view: 'data-c-view', // 曝光事件
    },
  })
  // 触发的所有事件都会执行 add 事件，可以在 add 事件中做统一拦截，对于不需要的可以返回 false
  .on('add', (type, data)) => {
    // type 事件类型
    // data 为收集的基础属性 + 自定义的业务数据(data-c-xx)
    // 组装要提交的数据
    const eventType = {
      click: 1202,
      view: 1252,
      pageview: 1152,
      pageleave: 1253,
      pageclose: 1254,
    }

    return {
      ...data,
      pointEventId: eventType[type],
    }
  })
</script>

API

• 自定义事件上报

import { addChemicalData } from '@murui/chemical'

addChemicalData('type', {
  message: 'test'
})

• 设置用户userId

import { setUserId } from '@murui/chemical'

setUserId(123123)

• 添加公共数据

import { setChemicalCommonData } from '@murui/chemical'

setChemicalCommonData({
  account: '18300000000',
  name: '张三',
})

微信小程序

1、安装 chemical

npm i @murui/chemical --save

2、构建npm

工具 > 构建 npm

3、app.json 配置 usingComponents

{
  "usingComponents": {
    "chemical": "@murui/chemical/chemical"
  }
}

4、元素点击

<chemical data-c-click='{"message":"click"}'>
  <view>
    <text>Hello World</text>
  </view>
</chemical>

5、元素曝光

<chemical data-c-view='{"message":"view"}'>
  <view>
    <text>Hello World</text>
  </view>
</chemical>

6、app.js 引入 chemical

import chemical, { ajax } from '@murui/chemical'

// 初始化 sdk
chemical({
  visibleTime: 1000, // 可选，曝光元素停留时长，毫秒
  threshold: 0.2, // 可选，达到曝光元素的距离，如滑动到目标元素的50%，则写0.5
  throttleTime: 1000, // 可选，重复数据截流时长，毫秒
  dataName: { // 可选
    click: 'data-c-click', // 点击事件
    view: 'data-c-view', // 曝光事件
  },
})
// 触发的所有事件都会执行 add 事件，可以在 add 事件中做统一拦截，对于不需要的可以返回 false
.on('add', (type, data)) => {
  // type 事件类型
  // data 为收集的基础属性 + 自定义的业务数据(data-c-xx)
  // 组装要提交的数据
  return {
    ...data,
    nowTime: Date.now()
  }
})

参考信息

用户标识规则

进入网站后默认生成设备ID，登录后不变更；当用户取消登录后，重新生成设备ID

| 属性名 | 属性说明 | | -------- | ---------------------------------------------- | | deviceId | 随机生成的设备ID，不管有没有登录都会携带此字段 | | userId | 登录后的用户ID，未登录没有此字段 |

页面浏览时长事件特有属性：

| 属性名 | 属性类型 | 属性说明 | | ------------- | -------- | ------------------------------------------------------------ | | eventDuration | 数值 | 页面浏览时长，单位毫秒，示例：2328备注：只有 pageleave 事件有这个属性 |

事件通用属性：

| 属性名 | 属性类型 | 属性说明 | | ------------- | -------- | ----------------------------------------------------- | | eventType | 字符串 | 事件类型：click、view、pageview、pageleave、pageclose | | eventTime | 数值 | 事件触发时间戳，示例：1636957635784 | | page | 字符串 | 页面路径，示例：/user | | pageTitle | 字符串 | 页面标题，示例：用户列表页 | | pageUrl | 字符串 | 页面完整URL，示例：http://localhost:1234/user | | referPage | 字符串 | 页面来源或上一个页面URL，示例：http://localhost:1234/ | | pageWidth | 数值 | 页面宽度，示例：840 | | pageHeight | 数值 | 页面高度，示例：960 | | sdkVersion | 字符串 | SDK版本号，示例：0.1.2 | | platformType | 字符串 | 平台类型：web(web端)、miniprogram(微信小程序端) | | trafficSource | 数值 | 流量来源：0其他 1直接流量 2自然搜索 3付费广告 | | user.account | 字符串 | 账号，用户的账号，一般和手机号一致 | | user.name | 字符串 | 姓名，用户的昵称 |

流量来源类型说明：

| 来源类型 | 场景 | | ---- | ---- | | 付费广告 | 落地页地址含有 utm 参数 | 自然搜索 | 落地页地址无 utm 参数且前向地址中为常见搜索引擎地址 | 直接流量 | 落地页地址无 utm 参数且前向地址为本站自身域名或为空 | 其他 | 落地页地址无 utm 参数且前向地址非本站域名

事件通用浏览器属性：

| 属性名 | 属性类型 | 属性说明 | | --------------------------- | -------- | ----------------------------------------- | | systemInfo.browserName | 字符串 | 浏览器名称，示例：chrome | | systemInfo.browserVersion | 字符串 | 浏览器版本，示例：95.0.4638.69 | | systemInfo.browserLanguage | 字符串 | 浏览器语言，示例：zh-cn | | systemInfo.browserUserAgent | 字符串 | 完整浏览器UserAgent信息，小程序端无此字段 | | systemInfo.engineName | 字符串 | 浏览器渲染引擎，示例：blink | | systemInfo.engineVersion | 字符串 | 浏览器渲染引擎版本号，示例：95.0.4638.69 | | systemInfo.osName | 字符串 | 操作系统名称，示例：mac os | | systemInfo.osVersion | 字符串 | 操作系统版本，示例：10.15.7 | | systemInfo.deviceType | 字符串 | 设备类型：desktop、mobile | | systemInfo.deviceModel | 字符串 | 设备型号，示例：iphone | | systemInfo.screenWidth | 数值 | 屏幕宽度，示例：1920 | | systemInfo.screenHeight | 数值 | 屏幕高度，示例：1080 |

事件通用渠道广告属性：

| 属性名 | 属性类型 | 属性说明 | | ------------ | -------- | -------------------------------------------- | | utm.campaign | 字符串 | 广告名称，打开页面的 url 有 utm 参数就采集 | | utm.source | 字符串 | 广告来源，打开页面的 url 有 utm 参数就采集 | | utm.medium | 字符串 | 广告媒介，打开页面的 url 有 utm 参数就采集 | | utm.term | 字符串 | 广告关键词，打开页面的 url 有 utm 参数就采集 | | utm.content | 字符串 | 广告内容，打开页面的 url 有 utm 参数就采集 |

渠道广告来源说明：

https://www.xxx.com/?utm-ca=activity2021&utm-so=baidu&utm-me=banner&utm-te=花型展会&utm-co=米绘2021花型展会

utm_ca对应utm.campaign

utm_so对应utm.source

utm_me对应utm.medium

utm_te对应utm.term

utm_co对应utm.content

业务相关属性：

| 属性名 | 属性类型 | 属性说明 | | -------------- | -------- | -------------------------------------------- | | customData.*** | 未知 | 所有业务相关数据都会放入到customData对象中 |