前言
大家好，这里是藤原豆腐店，上周有个需求是要给小程序添加统计页面访问和事件触发的埋点事件，下面我梳理下我的实现过程。
具体实现
埋点是指在应用程序或网站中插入代码以收集特定数据的过程。埋点可用于追踪用户行为、分析性能指标和监控应用程序或网站的各个方面。埋点数据收集后，可以通过数据分析工具进行处理和分析，以获取有关用户行为、应用程序性能和用户体验的洞见，从而作出数据驱动的决策和优化。
可以进行埋点统计的平台有很多，这次选用的是talkingData这个平台
小程序
- 配置域名
首先在微信公众平台里面配置合法域名，添加下面这两个域名
h5.udrig.com、api.talkingdata.com。
- sdk初始化
接下来进行sdk初始化，下载sdk包解压放到项目的文件夹中，在tdweapp-conf.js文件中作初始化配置
{
appkey: '您在TalkingData创建的小游戏App ID',
appName: '您的应用名称',
versionName: 'versionName',
versionCode: 'versionCode',
wxAppid: '微信管理后台分配的appid',
getLocation: false, // 默认不获取用户位置
}
- 基础统计
在app.vue中引入tdweapp.js文件，做如下配置：
const TDSDK = require('./units/tdweapp.js');
因为只在微信小程序进行统计，所以加了限制
onLaunch: function() {
// #ifdef MP-WEIXIN
TDSDK.App.onLaunch();//包含sdk初始化，必须调用
// #endif
}
onShow: function(options) {
// #ifdef MP-WEIXIN
TDSDK.App.onShow(options);//与TDSDK.App.onHide()成对调用
// #endif
},
onHide: function() {
// #ifdef MP-WEIXIN
TDSDK.App.onHide();//与TDSDK.App.onShow(options)成对调用
// #endif
},
- 自定义事件
对talkingData提供的自定义事件进行封装
// TalkingData方法封装
const TDSDK = require('@/units/tdweapp.js');
// 只适用于微信小程序
const talkingDataEvent=function(id, label, params) {
// #ifdef MP-WEIXIN
console.log('微信小程序talkingDataEvent')
if(params){
try{
TDSDK.Event.event({
id: id,
label: label,
params: params
});
}catch(err){
console.error(err)
}
}else{
try{
TDSDK.Event.event({
id: id,
label: label
});
}catch(err){
console.error(err)
}
}
// #endif
}
export default talkingDataEvent
对页面统计需要传入事件id，这里我在onload调用自定义事件进行统计，没有用他提供的页面统计方法
async onLoad(options) {
// 埋点
talkingDataEvent(事件id,lable)
},
自定义事件传参示例
talkingDataEvent(事件id,lable,{
articleId:id,
articleTitle:title
})
h5
小程序里面使用webview组件内嵌了h5页面，也需要对h5中的事件进行统计，这里还需要额外在h5引入sdk
<template>
<view>
<web-view :src="src"></web-view>
</view>
</template>
- 准备appId
这里同样需要配置appid，如果想要h5跟小程序的事件统计在一个应用时，需要在创建应用的时候选好小程序和h5，可以在应用的基本信息中看到不同的标识
- 引入sdk
在工程的全部页面内加入：
//对于普通的HTTP连接网站，使用的调用地址：
<script src="http://sdk.talkingdata.com/app/h5/v1?appid=APPID&vn=应用版本名称&vc=应用版本id"></script>
//如果您的网站使用HTTPS连接，请使用以下地址：
<script src="https://jic.talkingdata.com/app/h5/v1?appid=APPID&vn=应用版本名称&vc=应用版本id"></script>
这里需要注意的是public文件夹下的所有html文件都需要引入
- 自定义事件
TDAPP.onEvent (EventId, Label, MapKv);
需要注意的是：这里需要用window进行调用，同时事件参数信息是json类型
// 埋点
window.TDAPP.onEvent (事件id, label,{
"sgId":this.id,
"sgName":this.boardName
});
埋点触发成功，会有接口信息，虽然小程序使用webview调用h5,但小程序是看不到h5的接口信息的，具体能否触发得在网页上面确认
最后
以上就是对埋点实现的梳理，更多埋点的方法请参照talkingData的官方文档，看到这里如果觉得文章还不错的话，麻烦给我点个赞，万分感谢！
