业务背景:在小程序中,接入友盟统计
话不多说,上码,复制粘贴直接看效果
1. 下载SDK包
我的SDK版本是2.8.0,版本不同流程可能会有不同,但不会有太大出入
npm install umtrack-wx --save
2. 在项目src目录下新建path/umeng.js
3. 在umeng.js文件下添加如下配置
import umeng from 'umtrack-wx';
umeng.init({
appKey: 'xxxxxxxxxxxxxxxx', //友盟分配的APP_KEY(唯一)
// 是否使用Openid进行统计,此项为false时将使用友盟+uuid进行用户统计。
// 如果使用Openid来统计微信小程序的用户,会使统计的指标更为准确,对系统准确性要求高的应用推荐使用Openid。
useOpenid: false,
// 使用openid进行统计时,是否授权友盟自动获取Openid,
// 如若需要,请到友盟后台"设置管理-应用信息"(https://mp.umeng.com/setting/appset)中设置appId及secret
autoGetOpenid: false,
debug: true, //是否打开调试模式
uploadUserInfo: false // 自动上传用户信息,设为false取消上传,默认为false
})
// 挂载入 umeng 到组件实例上,方便组件内使用this.$umeng
umeng.install = function (Vue) {
Vue.prototype.$umeng = umeng;
}
export default umeng;
4. 在 main.js 中导入umeng.js
import umeng from '@/path/umeng.js'
// 启用
Vue.use(umeng)
5. 友盟后台配置自定义事件
6. 添加合法域名 链接
在微信公众平台https://mp.weixin.qq.com/, request 合法域名地方添加域名:https://umini.shujupie.com,如下
7. 代码里调用
// 点击事件
handleClick() {
// test_demo为事件id()
this.$umeng.trackEvent('test_demo', {
'url': 'pages/xxx/xxxx', // 当前小程序路径
'page_name': '页面标题',
'other_action': '其他事件',
});
}
如果对你有帮助,就赏个关注呗🙇🙇,不胜感激Thanks♪(・ω・)ノ