浙政钉2.0-应用监控（埋点）完整分析及成功实现埋点

大概率是eslint的问题。可以试试禁用解决方案：config.js配置1 第一种方法，使用下面的属性2 第二种方法，使用下面的方式，注意框架(插件)版本，不同版本写法可能不同(未测试)文章来源：https://blog.csdn.net/chwei1305656176/article/details/121124883。

文章共6,215字 · 阅读需要大约21分钟

一键AI生成摘要，助你高效阅读

问答

DavidStyleVIP

12129人浏览 · 2021-11-03 17:42:09

DavidStyleVIP · 2021-11-03 17:42:09 发布

简单说明：

本人项目的前端使用vue做H5页面，页面有很多，比如列表页面，详情页面，其它页面等等，准确的来说，这些页面其实都是模块，因为vue做页面打包后整体来看，就是一个单页应用，说页面可能不太准确，应该是说路由跳转吧，毕竟有些路由跳转到某个页面后，这个页面里面引用了很多模块。非专业前端，不知道这样说对不对。

官方开发手册地址

部分参数获取问题

bid、sapp_id、sapp_name类似的这种参数，需要向业主获取，业主一般都已经有浙政钉的账号及管理账号，需要用管理账号登录平台去看，具体登录后去哪里看，我也不清楚，毕竟我没账号 (T_T)，还有些参数是要请求某些api接口接口能获取的，比如accountId，需要请求登录接口获取

添加埋点

埋点分为 稳定性监控 和 流量分析 2个块

稳定性监控

直接按照文档里面的案例来就行(参数改成自己的)
前面说了，vue是个单页应用，所以这段代码加一次就好，页面加载完毕执行下面这个，基本就OK了。

<script
src='https://wpk-gate.zjzwfw.gov.cn/static/wpk-jssdk.1.0.2/wpkReporter.js'
crossorigin='true'></script>
<script>
try{
constconfig={
bid:'************',
signkey:'1234567890abcdef',
gateway:'https://wpk-gate.zjzwfw.gov.cn'
};
constwpk=newwpkReporter(config);
wpk.installAll();
window._wpk=wpk;
}catch(err){
console.error('WpkReporterinitfail',err);
}
</script>

流量分析

流量分析模块我自己给分成了3块内容：

通用模块
基础埋点
用户信息埋点

通用模块

通用模块代码：

<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',
    arguments: ['aplus-rhost-v', 'alog.zjzwfw.gov.cn']
  });
  aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['aplus-rhost-g', 'alog.zjzwfw.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>

这块内容其实就是动态加载了一个采集的js插件。原理就是：动态的在页面里创建了一个script标签，设定一个src路径(js插件路径)，然后就可以使用 aplus_queue 这个对象了，这个对象有push函数，可以理解为jquery的post函数。此函数接收一个对象作为参数。
对象参数属性说明：
action：请求的接口
arguments：接口带的参数

这段代码逻辑大概就是：加载了一个js插件，加载完毕后就可以使用aplus_queue对象。先设定2个地址，然后发送客户端是IOS还是Android.

由于vue是单页应用，所以这段也只需要写一次就好，页面加载完毕再执行一次这段代码就行了。
然后，整个应用里面都可以使用aplus_queue对象了。不管是在列表，或者详情里面。

基础埋点

先看代码:

// 单页应用 或 “单个页面”需异步补充PV日志参数还需进行如下埋点：
aplus_queue.push({
  action: 'aplus.setMetaInfo',
  arguments: ['aplus-waiting', 'MAN']
});
// 单页应用路由切换后 或 在异步获取到pv日志所需的参数后再执行sendPV：
aplus_queue.push({
  'action':'aplus.sendPV',
  'arguments':[{
		is_auto: false
  }, {
		sapp_id:'*****',
		sapp_name:'*********',
		//自定义PV参数key-value键值对
		//只能是这种平铺的json，不能做多层嵌套，类似对象里面有子对象，子对象里面还有子对象这种情况是不行的
		page_id: '页面ID，与page 参数配合使用，保证唯一性',
		page_name: '页面中文名称',
		page_url: '页面URL'
  }]
})

这段代码就是说提交有哪些页面，或者说是哪些模块。参数改成自己的就好
重点：page_id, page_name, page_url 这3个参数一定要按照文档中的要求设定好。

用户信息埋点

直接先看代码：

// 如采集用户信息是异步行为需要先执行这个BLOCK埋点
aplus_queue.push({
  action: 'aplus.setMetaInfo',
  arguments: ['_hold', 'BLOCK']
});
// 设置用户ID，用户设备ID可不做上报，若上报可使用开放平台JSAPI获取UUID
//用户id需要埋政钉用户真实信息，用户ID必须用accountId，可通过开放平台“获取用户详情”接口获取。
aplus_queue.push({
  action: "aplus.setMetaInfo",
  arguments: ["_user_id", "当前用户ID"]
});
aplus_queue.push({
  action: "aplus.setMetaInfo",
  arguments: ["_dev_id", "当前用户设备ID"]
});

// 如采集用户信息是异步行为，需要先设置完用户信息后再执行这个START埋点
// 此时被block住的日志会携带上用户信息逐条发出
aplus_queue.push({
  action: 'aplus.setMetaInfo',
  arguments: ['_hold', 'START']
});

这段代码分析下来，我个人感觉就是基本上埋点上报都是异步的，所以直接先来个BLOCK，然后放你要埋点的数据，比如用户id,设备id等等，最后再来个START。

根据文档说明上说的，设备id不需要进行埋点上报，所以我的项目里面只有3块内容。
第一块：BLOCK
第二块：_user_id
第三块：START

这里说明下 _user_id，用户id需要埋政钉用户真实信息，必须用accountId。怎么获取政钉用户的真实accountId呢，其实授权登录接口里面返回的有，只需要取出就行了。

你们可能没发现的东西(划重点)

不知道你们发现没有，我这4个代码片段下面，第一段和第二段的说明里面都有说：这段代码只需执行一次就好。但是第三和第四段就没有说，在这里解释下(划重点)：
不同页面(模块)跳转都要执行一下第三和第四段代码，因为要求是：每个页面都要加埋点

举个例子：授权登录后，进入首页的列表，页面加载完毕后这4段代码依次执行完毕，从列表进入详情页面(模块)，加载完毕后执行了第三和第四段代码，第一段和第二段是不需要执行的，因为那两块只需要执行一次就好。然后代码里面的参数都设置对就基本没问题了。
祝你成功!!

后期补充

=========== 追加(2021-11-22) ============

ps:看到很多人还是再问，看来我之前写的还不够清晰啊，没办法，上源码吧

在index.html页面里面只加了稳定性监控代码：
在这里插入图片描述
这样稳定性就成功了，这个应该最简单，都能看懂吧。再看不懂，我也没办法了。

下面说流量分析的问题，看很多人都是卡在这里，只是部分成功。
先看下我们的项目目录结构：
在这里插入图片描述
目录截图中的第一个红框：
date.js (这个就是封装了一个通用的js，为啥取这个名字，~~我怎么知道前端同学的脑回路，让我取名字肯定不叫这个，叫个zzdmd.js(浙政钉埋点)也比date强啊 [easter egg > 被前端同学看到这个了，当时就来找我 T_T ]~~ )

//接收3个参数：page_id，page_name，page_url
export function queue(metaId, metaName,metaPath) {
    (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.zjzwfw.gov.cn']
      });
      aplus_queue.push({
        action: 'aplus.setMetaInfo',
        arguments: ['aplus-rhost-g', 'alog.zjzwfw.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']
      });



    //单页应用或“单个页面”需异步补充PV日志参数还需进行如下埋点：
    //console.log('执行埋点')  
    //基础埋点      
    aplus_queue.push({
        action: 'aplus.setMetaInfo',
        arguments: ['aplus-waiting', 'MAN']
        });//
        // 单页应用路由切换后 或 在异步获取到pv日志所需的参数后再执行sendPV：
        aplus_queue.push({
        'action':'aplus.sendPV',
        'arguments':[{
            is_auto: false
            }, {
                //当前你的应用信息，此两行按应用实际参数修改，不可自定义。
                sapp_id: 'xxx',
                sapp_name: 'xxxxxxxx',
                // 自定义PV参数key-value键值对（只能是这种平铺的json，不能做多层嵌套），如：
                page_id: metaId,//'页面ID，与page 参数配合使用，保证唯一性，自定义',
                page_name: metaName,//'页面中文名称，自定义'
                page_url: metaPath
            }]
        })
        // 用户信息埋点
        //如采集用户信息是异步行为需要先执行这个BLOCK埋点
        aplus_queue.push({
            action: 'aplus.setMetaInfo',
            arguments: ['_hold', 'BLOCK']
        });
        // 设置用户ID，用户设备ID可不做上报，若上报可使用开放平台JSAPI获取UUID
        //用户id需要埋政钉用户真实信息，用户ID必须用accountId，可通过开放平台“获取用户详情”接口获取。
        aplus_queue.push({
          action: "aplus.setMetaInfo",
          arguments: ["_user_id", sessionStorage.getItem('accountId')]
        });
        // 如采集用户信息是异步行为，需要先设置完用户信息后再执行这个START埋点
        // 此时被block住的日志会携带上用户信息逐条发出
        aplus_queue.push({
            action: 'aplus.setMetaInfo',
            arguments: ['_hold', 'START']
        });
        //埋点end
    
};

定义一个通用的函数，接收3个参数：page_id，page_name，page_url
因为每个页面的这3个参数都不一样

怎么用它呢？只要在每个页面里面调用就行了啊，看代码：

import {queue} from './assets/date'
Vue.prototype.queue=queue;
//引入刚刚的通用js  上面这2行，我们是放在main.js里面的，你也可以在每个页面都加，

//每个xxx.vue页面里面直接调用
//直接调用
mounted () {
    this.queue(this.$route.meta.id,this.$route.meta.title,this.$route.path)  
}
//调用的时候要根据具体流程，什么时候执行，比如：第一个默认进入的页面要判断是否授权成功，有缓存的页面要放在activated里面，更细节的我就不说了，我又不懂前端。

上面这个代码每个xxx.vue页面里面都要调一次

目录截图中的第二个红框：
第二个红框内都是页面：为啥给你们截图目录结构了，就为了让你看看我们这里面有多少页面，每个页面都要调用(再次强调：xxx.vue里面都要调用一次)。
前面这个段代码，前端同学调了几十次，辛苦她了。

代码写的很渣，至少成功了，也懒得改了，因之前埋点老是不成功，都改了半个月了，万一改完又不行了呢，不敢动了啊，就这样吧。

(优化方向)

(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.zjzwfw.gov.cn']
      });
      aplus_queue.push({
        action: 'aplus.setMetaInfo',
        arguments: ['aplus-rhost-g', 'alog.zjzwfw.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']
      });

其实这段代码可以放到index.html里面的，因为这个只需要执行一次，不用每个页面都执行。

最后说一句，看了这个文章对你有用的话，记得回来说下你的成功了没，哪里没有说清晰也给我提意见，我好改改，争取让更多人看到都能懂，都能埋点成功。

=====追加(2024-01-24)

一、重要的事情说三遍

（！！！！bid、sapp_id、sapp_name不清楚，就问业主要，业主不清楚，就让他问浙政钉方要！！！！！！）
（！！！！bid、sapp_id、sapp_name不清楚，就问业主要，业主不清楚，就让他问浙政钉方要！！！！！！）
（！！！！bid、sapp_id、sapp_name不清楚，就问业主要，业主不清楚，就让他问浙政钉方要！！！！！！）
（别！！再！！问！！是！！什！！么！！了！！）
（别！！再！！问！！是！！什！！么！！了！！）
（别！！再！！问！！是！！什！！么！！了！！）

aplus_queue报未定义

error: 'aplus_queue' is not defined

大概率是eslint的问题。
可以试试禁用

解决方案：config.js配置
1 第一种方法，使用下面的属性

lintOnSave : false

2 第二种方法，使用下面的方式，注意框架(插件)版本，不同版本写法可能不同 (未测试)

configureWebpack:{
	externals: {
		aplus_queue:"aplus_queue"
	}
}

文章来源：https://blog.csdn.net/chwei1305656176/article/details/121124883

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

GitTalk | 使用面向业务的狮偶编程语言提升开发效率

GitCode 开源社区

GitTalk | DevUI Suits 场景解决方案

GitCode 开源社区

GitTalk | DevUI Admin 前端项目构建

GitCode 开源社区

所有评论(0)

查看更多评论

DavidStyleVIP

@chwei1305656176

已为社区贡献1条内容

浙政钉2.0-应用监控（埋点）完整分析 及 成功实现埋点

DavidStyleVIP

简单说明：

部分参数获取问题

添加埋点

稳定性监控

流量分析

通用模块

基础埋点

用户信息埋点

你们可能没发现的东西(划重点)

后期补充

一、重要的事情说三遍

aplus_queue报未定义

所有评论(0)

DavidStyleVIP

浙政钉2.0-应用监控（埋点）完整分析及成功实现埋点