点击埋点
由于小程序无法像REACT利用 prop.children,只能使用 slot 绑定实现点击埋点。
// components/common/trackerClick/index.js
import { appendQueue } from ‘…/…/…/utils/report/reportQueue’;
import { formatDate } from ‘…/…/…/utils/formatDate’;
Component({
/**
- 虚拟化组件节点,防止影响 css 样式以及不增加 DOM 层级
*/
options: {
virtualHost: true
},
/**
- 组件的属性列表
*/
properties: {
event: {
type: String,
value: ‘Click’,
},
project: {
type: String,
value: ‘’,
},
properties: {
type: Object,
value: null,
},
},
/**
- 组件的方法列表
*/
methods: {
trackerClick() {
const { event, project, properties } = this.data;
let time = formatDate(new Date(), ‘YYYY-MM-DD hh:mm:ss.S’);
// 后端字段要求时间格式化保留两位小数
time =
time.length >= 19
-
? time.slice(0, 19)
-
${time.slice(0, 17)}0${time.slice(17, 18)}
;
appendQueue(‘click’, {
time,
event,
project,
properties,
});
},
},
});
曝光埋点
曝光埋点是最难实现的埋点,需要满足以下三点:
-
元素出现在视窗内一定的比例才算一次合法的曝光
-
元素在视窗内停留的时长达到一定的标准才算曝光
-
统计元素曝光时长
微信官方文档 – IntersectionObservers
由于微信小程序已支持 IntersectionObservers API,因此我们采用这个 API 实现曝光埋点。
不过由于小程序不具有 DOM 结构,没法像 REACT 传递 DOM 元素实现曝光埋点,并且组件内部的使用有一些需要特别注意的点。
import IntersectionObserver from ‘…/…/…/utils/report/intersection-observer’;
import { appendQueue } from ‘…/…/…/utils/report/reportQueue’;
import { formatDate } from ‘…/…/…/utils/formatDate’;
import CONFIG from ‘…/…/…/utils/report/config’;
Component({
/**
- 虚拟化组件节点,防止影响 css 样式以及不增加 DOM 层级
*/
options: {
virtualHost: true
},
/**
- 组件的属性列表
*/
properties: {
/**
- 上报的参数
*/
event: {
type: String,
value: ‘View’,
},
proj