vue页面在浙政钉 --前端埋点

浙政钉项目需要进行埋点操作：
添加埋点具体分为：
稳定性监控 和 流量分析 2个部分

稳定性监控

<script>
  try {
    const config = {
      bid: '6666',
      signkey: '6666666,
      gateway: 'https://wpkgate-emas.ding.zj.gov.cn'
    };
    const wpk = new wpkReporter(config);
    wpk.installAll();
    window._wpk = wpk;
  } catch (err) {
    e.error('WpkReporter init fail', err);
  }
  
</script> 

这块代码放在index.html页面中，页面加载执行一次即可。bid、signkey 需要申请取得

流量分析 模块

这块最容易出错，经常会埋点不成功，或者局部成功。
1:、需要新建一个js，页面把代码丢进去，
2、然后main.js 全局引用
3、各内容页面单独执行
分为：
1. 通用模块
2. 基础埋点
3. 用户信息埋点

为了成功率考虑，我把通用模块放在一起，单独执行。

1、新建js页面：zzdmd.js
（***

曾经js命名被后端嘲笑了一番，后面改成了zzdmd

***）

export function queue(metaId, metaName,metaPath) {
    // 通用采集 SDK
    (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://alidt.alicdn.com/alilog/mlog/aplus_cloud.js';
        f.parentNode.insertBefore(j, f);
      })(window, document, 'script', 'aplus_queue'); 
      aplus_queue.push({
        action: 'aplus.setMetaInfo',
        arguments: ['aplus-rhost-v', 'alog-api.ding.zj.gov.cn']
      });
      aplus_queue.push({
        action: 'aplus.setMetaInfo',
        arguments: ['aplus-rhost-g', 'alog-api.ding.zj.gov.cn']
      });  
      var u = navigator.userAgent
      var isAndroid = u.indexOf('Android') > -1
      var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
      aplus_queue.push({
        action: 'aplus.setMetaInfo',
        arguments: ['appId', isAndroid ? '28302650' : isIOS ? '28328447' : '47130293']
      });
    //基础埋点      
        aplus_queue.push({
            action: 'aplus.setMetaInfo',
            arguments: ['aplus-waiting', 'MAN']
        });//
        // 单页应用路由切换后 或 在异步获取到pv日志所需的参数后再执行sendPV：
        aplus_queue.push({
        'action':'aplus.sendPV',
        'arguments':[{
            is_auto: false
            }, {
                //当前你的应用信息，此两行按应用实际参数修改，不可自定义。
                sapp_id: 'xiangmuId666',
                sapp_name: 'xiangmuName666',
                // 自定义PV参数key-value键值对（只能是这种平铺的json，不能做多层嵌套），如：
                page_id: metaId,//'页面ID，与page 参数配合使用，保证唯一性',
                page_name: metaName, //'页面中文名称'
                page_url: metaPath, // ‘页面url’
            }]
           
        })
        // 用户信息埋点
        //如采集用户信息是异步行为需要先执行这个BLOCK埋点
        aplus_queue.push({
            action: 'aplus.setMetaInfo',
            arguments: ['_hold', 'BLOCK']
        });
        // 设置用户ID，用户设备ID可不做上报，若上报可使用开放平台JSAPI获取UUID
        //用户id需要埋政钉用户真实信息，用户ID必须用accountId，可通过开放平台“获取用户详情”接口获取。
        // 设置会员ID
        aplus_queue.push({
          action: "aplus.setMetaInfo",
          arguments: ["_user_id", sessionStorage.getItem('accountId')]
        });
        // 如采集用户信息是异步行为，需要先设置完用户信息后再执行这个START埋点
        // 此时被block住的日志会携带上用户信息逐条发出
        aplus_queue.push({
            action: 'aplus.setMetaInfo',
            arguments: ['_hold', 'START']
        });
        //埋点end
};

代码封装的page_id, page_name, page_url 在执行的时候传参，供后台流量统计

2、然后main.js 全局引用

import {queue} from '@/assets/zzdmd'
Vue.prototype.queue=queue;

接下来就是每个页面单独执行这段js代码，可以放在路由中执行，
router.beforeEach((to，Trom,next)={
this.queue(this.$route.meta.id,this.$route.meta.title,this.$route.path)
}）

3、内容页面单独调用执行
我选择了各页面单独执行，

 mounted(){
         this.queue(this.$route.meta.id,this.$route.meta.title,this.$route.path)
  },
  activated(){
      this.queue(this.$route.meta.id,this.$route.meta.title,this.$route.path)
  },

一般需要放在mounted中就可以了，
但如果项目使用了keep-alive缓存（比如：列表页进详情返回详情页，不需要刷新页面就会使用缓存机制）这时候就需要放在activated中，