uniapp、小程序接入友盟

@前端小白

已于 2024-01-15 14:36:40 修改

阅读量825

点赞数 9

文章标签： uni-app 小程序前端 vue.js javascript 微信开放平台

于 2024-01-15 14:35:28 首次发布

本文链接：https://blog.csdn.net/lzz123987csdn/article/details/135596556

版权

业务背景：在小程序中，接入友盟统计

话不多说，上码，复制粘贴直接看效果

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': '其他事件',
    });
}