devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp开发浙政钉H5微应用埋点_浙政钉流量埋点发送成功但说失败

作者：小小林熬夜学编程 | 2024-03-16 07:27:49

赞

踩

浙政钉流量埋点发送成功但说失败

一、稳定性监控埋点和通用采集SDK

首先在uniapp项目根目录下新建template.h5.html作为项目入口模板（更多用法见官网：uni-app官网），同时需注意修改manifest.json中index.html模板路径（如下图）

接下来就可以把稳定性监控埋点和通用采集SDK的代码放在模板里（如下）

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">  
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. 				<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
  7.         <title>
  8.             <%= htmlWebpackPlugin.options.title %>
  9.         </title>
  10.         <script>
  11.             var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
  12.             document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
  13.         </script>
  14. 				<script type="text/javascript" src="https://assets.zjzwfw.gov.cn/assets/ZWJSBridge/1.0.1/zwjsbridge.js"></script>
  15. 				<script src="https://g.alicdn.com/gdt/jsapi/1.9.18/index.js"></script>
  16. 		
  17. 				<!-- 稳定性监控埋点 -->
  18. 				<script src='https://wpk-gate.zjzwfw.gov.cn/static/wpk-jssdk.1.0.2/wpkReporter.js' crossorigin='true'></script>
  19. 				<script>
  20. 					try {
  21. 						const config = {      
  22. 							bid: 'bid在上架申请通过后官方人员会发给你',
  23. 							signkey: 'signkey在上架申请通过后官方人员会发给你',
  24. 							gateway: 'https://wpk-gate.zjzwfw.gov.cn'
  25. 						};
  26. 						const wpk = new wpkReporter(config);
  27. 						wpk.installAll();
  28. 						window._wpk = wpk;
  29. 					} catch (err) {
  30. 						console.error('WpkReporter init fail', err);
  31. 					}
  32. 				</script>
  33. 				
  34. 				<!-- 通用采集SDK -->
  35. 				<script>
  36. 				  (function(w, d, s, q, i) {
  37. 				    w[q] = w[q] || [];
  38. 				    var f = d.getElementsByTagName(s)[0],j = d.createElement(s);
  39. 				    j.async = true;
  40. 				    j.id = 'beacon-aplus';
  41. 				    j.src = 'https://alidt.alicdn.com/alilog/mlog/aplus_cloud.js';
  42. 				    f.parentNode.insertBefore(j, f);
  43. 				  })(window, document, 'script', 'aplus_queue');
  44. 				
  45. 				  aplus_queue.push({
  46. 				    action: 'aplus.setMetaInfo',
  47. 				    arguments: ['aplus-rhost-v', 'alog.zjzwfw.gov.cn']
  48. 				  });
  49. 				  aplus_queue.push({
  50. 				    action: 'aplus.setMetaInfo',
  51. 				    arguments: ['aplus-rhost-g', 'alog.zjzwfw.gov.cn']
  52. 				  });
  53. 				  
  54. 				  var u = navigator.userAgent
  55. 				  var isAndroid = u.indexOf('Android') > -1
  56. 				  var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
  57. 				
  58. 				  aplus_queue.push({
  59. 				    action: 'aplus.setMetaInfo',
  60. 				    arguments: ['appId', isAndroid ? '28302650' : isIOS ? '28328447' : '47130293']
  61. 				  });
  62. 				</script>
  63.  
  64.  
  65.  
  66.  
  67. 				<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
  68.     </head>
  69.     <body>
  70.         <noscript>
  71.             <strong>Please enable JavaScript to continue.</strong>
  72.         </noscript>
  73.         <div id="app"></div>
  74.         <!-- built files will be auto injected -->
  75.     </body>
  76. </html>

 这里大部分代码都是固定的。

二、PV日志和用户信息采集埋点

大多数流量分析（A+）上报成功但信息不完整（埋点部分成功）都是此处出了问题造成的。

这个具体做法根据每个人具体业务逻辑，实现可能略有差别。

我的做法是首先封装一个JS函数：

  1. /** 
  2.  * 埋点统一代码 (除了个别参数，整体格式也是比较固定)
  3.  * 以下代码不可拆分，否则可能导致埋点只有部分成功
  4.  * meta 和 dingUser 是业务参数，每个人各不相同，根据你自己的项目来决定
  5.  * */
  6.  function set_MD (meta, dingUser) {
  7.      
  8. 	 let nickName = dingUser.name ? dingUser.name : 'xxxx';
  9. 	 let userId = dingUser.user_id ? dingUser.user_id : '666888';
  10. 	 
  11. 	 // 如采集用户信息是异步行为需要先执行这个BLOCK埋点
  12. 	 aplus_queue.push({
  13. 	 	action: 'aplus.setMetaInfo',
  14. 	 	arguments: ['_hold', 'BLOCK']
  15. 	 });
  16. 	 
  17. 	 
  18. 	 // 单页应用 或 “单个页面”需异步补充PV日志参数还需进行如下埋点：
  19. 	 aplus_queue.push({
  20. 	 	action: 'aplus.setMetaInfo',
  21. 	 	arguments: ['aplus-waiting', 'MAN']
  22. 	 });
  23. 	 // 单页应用路由切换后 或 在异步获取到pv日志所需的参数后再执行sendPV：
  24. 	 aplus_queue.push({
  25. 	 	'action':'aplus.sendPV',
  26. 	 	'arguments':[{
  27. 	 		is_auto: false
  28. 	 	}, {
  29. 	 		// 当前你的应用信息，此两行请勿修改
  30. 	 		sapp_id: 'sapp_id上架申请通过后官方人员会发',
  31. 	 		sapp_name: 'sapp_name上架申请通过后官方人员会发',
  32. 	 		page_id: 'xxxxx_' + meta.pagePath,
  33. 	 		page_name: meta.name,
  34. 	 		page_url: meta.pagePath
  35. 	 	}]
  36. 	 })
  37. 	 
  38. 	 
  39. 	 // 设置会员昵称
  40. 	 aplus_queue.push({
  41. 	 	action: "aplus.setMetaInfo",
  42. 	 	arguments: ["_user_nick", nickName]
  43. 	 });
  44. 	 // 设置会员ID
  45. 	 aplus_queue.push({
  46. 	 	action: "aplus.setMetaInfo",
  47. 	 	arguments: ["_user_id", userId]
  48. 	 });
  49. 	 
  50. 	 // 如采集用户信息是异步行为，需要先设置完用户信息后再执行这个START埋点
  51. 	 // 此时被block住的日志会携带上用户信息逐条发出
  52. 	 aplus_queue.push({
  53. 	 	action: 'aplus.setMetaInfo',
  54. 	 	arguments: ['_hold', 'START']
  55. 	 });
  56.  }
  57. // 切记需要保证上面代码执行时page_id、page_name、page_url、nickName、userId五个参数不是空的

紧接着我是全局混入mixin一个js文件，在onShow里面调用上面封装的函数

 关于mixins全局混入的用法不熟悉的可自己查vue官网。

完毕。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/247950
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号