浙政钉2.0 |
您所在的位置：网站首页 › h5在哪看 › 浙政钉2.0 |
浙政钉2.0
|
简单说明：
本人项目的前端使用vue做H5页面，页面有很多，比如列表页面，详情页面，其它页面等等，准确的来说，这些页面其实都是模块，因为vue做页面打包后整体来看，就是一个单页应用，说页面可能不太准确，应该是说路由跳转吧，毕竟有些路由跳转到某个页面后，这个页面里面引用了很多模块。非专业前端，不知道这样说对不对。 官方开发手册地址 部分参数获取问题bid、sapp_id、sapp_name类似的这种参数，需要向业主获取，业主一般都已经有浙政钉的账号及管理账号，需要用管理账号登录平台去看，具体登录后去哪里看，我也不清楚，毕竟我没账号 (T_T)，还有些参数是要请求某些api接口接口能获取的，比如accountId，需要请求登录接口获取 添加埋点埋点分为 稳定性监控 和 流量分析 2个块 稳定性监控直接按照文档里面的案例来就行(参数改成自己的) 前面说了，vue是个单页应用，所以这段代码加一次就好，页面加载完毕执行下面这个，基本就OK了。 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); } 流量分析流量分析模块我自己给分成了3块内容： 通用模块基础埋点用户信息埋点 通用模块通用模块代码： (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'] });这块内容其实就是动态加载了一个采集的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页面里面只加了稳定性监控代码： 下面说流量分析的问题，看很多人都是卡在这里，只是部分成功。 先看下我们的项目目录结构： 定义一个通用的函数，接收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 : false2 第二种方法，使用下面的方式，注意框架(插件)版本，不同版本写法可能不同 (未测试) configureWebpack:{ externals: { aplus_queue:"aplus_queue" } }文章来源：https://blog.csdn.net/chwei1305656176/article/details/121124883 |
这样稳定性就成功了，这个应该最简单，都能看懂吧。再看不懂，我也没办法了。
目录截图中的第一个红框： date.js (这个就是封装了一个通用的js，为啥取这个名字，我怎么知道前端同学的脑回路，让我取名字肯定不叫这个，叫个zzdmd.js(浙政钉埋点)也比date强啊 [easter egg > 被前端同学看到这个了，当时就来找我 T_T ] )【本文地址】
今日新闻 |
推荐新闻 |