uniapp H5 友盟埋点

1. 创建应用

进入友盟的U-Mini：友盟移动统计_ APP数据分析_APP流量统计_行为分析- 友盟+

上面步骤完成后，点击“进入控制台”--在 应用列表 中--点击“添加应用”，则进入下面页面

因为是H5应用，则选择“HTML5”，其它信息自行填写后，点击“注册”

2.  sdk 集成

友盟集成文档：开发者中心

本来按照文档，将内容写入 index.html 但是没有生效，因为执行顺序的问题；我这里写在App.vue中可用

<script>
export default {
    onLaunch: function () {
        console.warn(
          "当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上！"
        );
        console.log("App Launch");
    },
    onShow: function () {
        // PV曝光
        const { aplus_queue } = window;
        aplus_queue.push({
            action: "aplus.sendPV",
            arguments: [
                {
                    is_auto: false,
                },
                { page_path: "进入首页", user_id: "1234" },
            ],
        });
    },
    onHide: function () {
        console.log("App Hide");
    },
    beforeCreate() {
        (function (w, d, s, q, i) {
            w[q] = w[q] || [];
            var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s);
            j.async = true;
            j.id = "beacon-aplus";
            j.src = "https://d.alicdn.com/alilog/mlog/aplus/" + i + ".js";
            f.parentNode.insertBefore(j, f);
        })(window, document, "script", "aplus_queue", "203467608");

        //集成应用的appKey
        aplus_queue.push({
            action: "aplus.setMetaInfo",
            arguments: ["appKey", "替换成自己应用的appKey"],
        });

        //sdk提供手动pv发送机制，启用手动pv(即关闭自动pv)，需设置aplus-waiting=MAN;
        //注意：由于单页面路由改变时不会刷新页面，无法自动发送pv，所以对于单页应用，强烈建议您关闭自动PV, 手动控制PV事件
        aplus_queue.push({
            action: "aplus.setMetaInfo",
            arguments: ["aplus-waiting", "MAN"],
        });

        //是否开启调试模式
        aplus_queue.push({
            action: "aplus.setMetaInfo",
            arguments: ["DEBUG", true],
        });

        //是否指定用作计算umid的id类型，默认为cnaid，目前支持:
        //1. 微信和QQ: openid; 字节和百度 anonymousid; 支付宝 alipay_id
        //2. 微信、QQ、字节、百度平台的 unionid
        //3. 业务方自己生成的随机id uuid
        aplus_queue.push({
            action: "aplus.setMetaInfo",
            arguments: ["aplus-idtype", "xxxx"], //取值参考见附表1
        });
        console.log("aplus_queue", aplus_queue);
    },
}
</script>

其中，beforeCreate里面需改的就是将自己的appKey放入，我在beforeCreate里面集成了后

直接在onShow中使用了页面曝光事件的埋点，或者也可以在pages文件内的vue页面使用同样的代码；

3. 自定义事件

依旧是去友盟页面，去“产品”中找到“U-Mini” 后点击进入，可以看到应用列表，点击需创建自定义事件的“查看”

点击“自定义事件”

点击“事件管理”

点击“添加事件”，后点击“手工添加”

填写“事件ID”和“显示名称”，注意：事件ID后面不可更改，且代码中需要用到

例如，我这里事件id为“test”

则XXX.vue中的某个点击事件函数内就写，即可使用

aplus_queue.push({
    action: "aplus.record",
    arguments: ["test", "CLK"],
});