浙政钉埋点（Vue2代码）_vue浙政钉埋点案例

前言

现在更新h5到浙政钉居然要审核（带node_module现场打包那种），巨麻烦，特此写文章总结。
bid、sapp_id等我都用*****代替，具体信息谁让你干这活儿的找谁要。

用的mixin（router当然更优，毕竟打包小一些）

参考网址

代码（vue2）

1、检测工具

vconsole可以查看xxxxx/upload，这是稳定性埋点
eruda开启 Snippets - Load Timing Plugin，可以查看xxxxx.gif，这是流量性埋点

这俩工具只能各检测一种（很有专业性）
切记，做完的时候记得各存一份埋点的各种数据，不然政府办事员他们，可能要向你要数据手动确认（挺负责的，还指出哪里不符合要求）

index.html
<!-- <script src="//cdn.jsdelivr.net/npm/eruda"></script>
    <script>
      eruda.init();
    </script> -->

main.js
// import Vconsole from "vconsole";
// const vConsole = new Vconsole();
// Vue.use(vConsole);
1
2
3
4
5
6
7
8
9
10

2、index.html

在header中放入以下代码，需要改bid
专有云地址也看甲方发来的文档确认一下

    <script src="https://wpkgate-emas.ding.zj.gov.cn/static/wpk-jssdk.1.0.2/wpkReporter.js" crossorigin="true"></script>
    <script>
      //稳定性埋点！！！
      try {
        const config = {
          bid: "*************************************", //只需要修改bid
          signkey: "1234567890abcdef",
          gateway: "https://wpkgate-emas.ding.zj.gov.cn",
        };
        const wpk = new wpkReporter(config);
        wpk.installAll();
        window._wpk = wpk;
      } catch (err) {
        console.error("WpkReporter init fail", err);
      }
    </script>

    <script>
      (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",
        //专有云应用，第二个参数在部署时请替换为正确的专有云地址dalog-api.ding.zj.gov.cn
        arguments: ["aplus-rhost-v", "alog-api.ding.zj.gov.cn"],
      });
      aplus_queue.push({
        action: "aplus.setMetaInfo",
        //专有云应用，第二个参数在部署时请替换为正确的专有云地址alog-api.ding.zj.gov.cn
        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"],
      });
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

3、utils/zzdmd.js

/* eslint-disable */
export function setMd(page_id, page_name, page_url, _user_id) {
  aplus_queue.push({
    action: "aplus.setMetaInfo",
    arguments: ["_hold", "BLOCK"],
  });
  // 用户信息埋点----------------------------------------
  // 单页应用 或 “单个页面”需异步补充PV日志参数还需进行如下埋点 ------
  /* eslint-disable-next-line */
  aplus_queue.push({
    action: "aplus.setMetaInfo",
    arguments: ["aplus-waiting", "MAN"],
  });
  /* eslint-disable-next-line */
  aplus_queue.push({
    action: "aplus.sendPV",
    arguments: [
      {
        is_auto: false,
      },
      {
        // 当前你的应用信息，此两行按应用实际参数修改，不可自定义。
        sapp_id: "*******",
        sapp_name: "*******",
        page_id: page_id, // 可以用this.$route.meta.pagePath代替
        page_name: page_name, // 可以用this.$route.meta.name代替
        page_url: page_url, // 可以用this.$route.meta.pagePath代替
      },
    ],
  });
  // 设置会员昵称（没要求，先不设置了）
  /* eslint-disable-next-line */
  // aplus_queue.push({
  //   action: "aplus.setMetaInfo",
  //   arguments: ["_user_nick", _user_nick], // 需替换为当前登录的浙政钉用户名字，uni.getStorageSync('userInfo').employeeName
  // });
  // 设置会员ID
  /* eslint-disable-next-line */
  aplus_queue.push({
    action: "aplus.setMetaInfo",
    arguments: ["_user_id", _user_id], // 需替换为当前登录的浙政钉用户id，
  });
  /* eslint-disable-next-line */
  aplus_queue.push({
    action: "aplus.setMetaInfo",
    arguments: ["_dev_id", "yourDeviceId"],
  });
  // 如采集用户信息是异步行为，需要先设置完用户信息后再执行这个START埋点
  // 此时被block住的日志会携带上用户信息逐条发出
  /* eslint-disable-next-line */
  aplus_queue.push({
    action: "aplus.setMetaInfo",
    arguments: ["_hold", "START"],
  });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

4、utils/zzdmdmx.js

accountId一般是登录成功就会给的，记得转为String

/* eslint-disable */
import { setMd } from "./zzdmd.js";

export default {
  data() {
    return {};
  },
  mounted() {
    const that = this;
    that.$nextTick(() => {
      that.zzdmdStart();
    });
  },
  methods: {
    zzdmdStart() {
    // 分别是当前页的英文名（home）、当前页的中文名（主页），当前的完整url，用户的accountId
      setMd(this.$route.name, this.$route.meta.title, "https://aaaaaaa.com/#" + this.$route.path, this.$store.state.user.accountId);
    },
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

5、main.js

import zzdmdmx from "@/utils/zzdmdmx.js";
Vue.mixin(zzdmdmx);
1
2

其他

里面的各种字段，一定要String格式，不然不接收

开了vconsole或eruda等调试工具时，点击调试工具按钮，页面会报一个错误。无伤大雅，如果谁能解决那个问题，请留言

在线urldecode

看到这里点个赞鼓励下吧，求求