微信小程序组件化埋点实践

具体技术实现

---

点击埋点

由于小程序无法像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: {

/**

• 上报的参数

*/