@murui/chemical v0.1.12

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

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

事件通用属性：

流量来源类型说明：

事件通用浏览器属性：

事件通用渠道广告属性：

渠道广告来源说明：

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

业务相关属性：