【浙政钉埋点】稳定性监控对接+H5流量分析对接【2024年3月19日】

复制粘贴后 让后端出接口 微改几个参数即可使用
甲方需要提供 sapp_id、sapp_name

稳定性监控对接

在 index.html 文件中粘贴以下代码
该页面仅需更改 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 为 sapp_name + "_zzdpro" 需要根据真实sapp_name 修改
      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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

H5流量分析对接

一、更改 zzdmd.js 的配置项（文件在上面，下面也有源码）
二、在 main.js 中导入并定义成全局组件

import { funcBurialPoint as BurialPoint } from '@/common/zzdmd';
Vue.prototype.$BurialPoint = BurialPoint;
1
2

三、在对应页面中调用埋点方法

onShow() {
  this.$BurialPoint('页面名称', this.$route.path);
},
1
2
3

CV大法(复制粘贴改几个参数即可用)

zzdmd.js

/**
 * 使用须知
 * 1.需要修改的值：
 * 	 sapp_id、sapp_name
 *   dd.getAuthCode({corpId: ''}中的 corpId
 * 	 getAccessToken 方法中的 url
 * 2.根据自己实际项目 修改 pageInfoList 列表的数据
 * 	 id随便填 name和path需要对应
 */

/**
 *
 * @param {string} id 页面ID，与page 参数配合使用，保证唯一性必须要入参
 * @param {string} name 页面中文名称必须要入参
 * @param {string} path 页面完整URL，必须要入参
 */

// 001-010 一级页面
// 011-100 二级菜单页面
// 101-200 其他菜单页面
// 201-??? 功能页面
// path属性仅用于本地查询 埋点的所需要的path在调用 funcBurialPoint 方法时传入
const pageInfoList = [
	// 一级页面
	{ id: '001', name: '登录页', path: '/' },
	{ id: '002', name: '首页', path: '/pages/demo' },
	// 二级菜单
	{ id: '011', name: ' 二级菜单', path: '/pages/demo' },
	{ id: '012', name: ' 二级菜单' },
	{ id: '013', name: ' 二级菜单' },
	// 其他菜单
	{ id: '101', name: '其他菜单', path: '/pages/demo' },
	{ id: '102', name: '其他菜单' },
	{ id: '103', name: '其他菜单' },
	// 功能页面
	{ id: '201', name: '功能页面', path: '/pages/demo' },
	{ id: '201', name: '功能页面' },
	{ id: '201', name: '功能页面' },
];

/**
 * 判断是否钉钉环境 如果是钉钉环境则返回authCode
 * 获取 authCode
 * @returns
 */
function isDingtalkEnv() {
	return new Promise((resolve, reject) => {
		let ua = navigator.userAgent.toLowerCase();
		console.log('环境：', ua);
		if (ua.match(/TaurusApp/i)?.length) {
			// taurusapp专有钉钉环境
			dd.ready(() => {
				dd.getAuthCode({
					corpId: '',
				})
					.then(res => {
						// res.code  权限借鉴code
						console.log('获取浙政钉免登授权码:res|', res);
						let authCode = res.code || res.auth_code || res.authCode;
						resolve(authCode);
					})
					.catch(err => {
						console.error(`获取浙政钉免登授权码:err|`, err);
						reject(err);
					});
			});
		} else {
			reject('非专有钉钉');
		}
	});
}
/**
 * !需要后端出接口
 * 获取 access_token
 * @returns
 */
function getAccessToken() {
	return new Promise((resolve, reject) => {
		uni.request({
			url: url, // 需要后端出的接口 获取 access_token
			method: 'POST',
			sslVerify: false,
			header: {
				'Content-Type': 'application/x-www-form-urlencoded',
			},
			data: {
				client_id: 'lc_wisdom_hall',
				client_secret: '3EA5B104DCFD456AB0669C83967EF9A8',
				grant_type: 'client_credentials',
				scope: 'api1',
			},
			success: res => {
				console.log('getAccessToken|', res);
				if (res.data.access_token) resolve(res.data.access_token);
			},
			fail: err => {
				reject(err);
			},
		});
	});
}

/**
 * 获取用户信息
 * @returns
 */
function getUserInfo() {
	return new Promise((resolve, reject) => {
		isDingtalkEnv()
			.then(authCode => {
				getAccessToken()
					.then(access_token => {
						uni.request({
							url: `https://oapi.dingtalk.com/topapi/v2/user/getuserinfo?access_token=${access_token}`,
							method: 'POST',
							data: {
								code: authCode,
							},
							success: res => {
								console.log('getUserinfo|', res);
								resolve(res.Data);
							},
							fail: err => {
								reject(err);
							},
						});
					})
					.catch(err => {
						reject(err);
					});
			})
			.catch(err => {
				reject(err);
			});
	});
}

/**
 * 埋点方法
 * @param {string} page_name 页面名称 需要和 pageInfoList 中的 name 对应
 * @param {string} page_url 页面路由
 */
export function funcBurialPoint(page_name, page_url) {
	console.log('埋点:funcBurialPoint');
	getUserInfo()
		.then(res => {
			const pageInfo = pageInfoList.filter(item => item.name === page_name);
			if (!pageInfo || !pageInfo.length) {
				console.warning(`Warn:页面${page_name}未添加埋点列表`);
				return;
			}
			const page_id = pageInfo[0].id;
			// 通用采集 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',
				],
			});

			// 用户信息埋点
			// 如采集用户信息是异步行为需要先执行这个BLOCK埋点
			aplus_queue.push({
				action: 'aplus.setMetaInfo',
				arguments: ['_hold', 'BLOCK'],
			});

			// 基础埋点
			// 单页应用 或 “单个页面”需异步补充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，必须要入参
					},
				],
			});

			// 设置会员昵称
			aplus_queue.push({
				action: 'aplus.setMetaInfo',
				arguments: ['_user_nick', res.ZDRealName], // 当前会员用户昵称
			});
			// 设置会员ID
			aplus_queue.push({
				action: 'aplus.setMetaInfo',
				arguments: ['_user_id', res.ZDingId], // 当前会员ID
			});
			// 这个目前没有要求，可不设置
			// aplus_queue.push({
			// 	action: 'aplus.setMetaInfo',
			// 	arguments: ['_dev_id', '设备ID是业务定义的，用于定义唯一的设备标识。'],
			// });

			// 如采集用户信息是异步行为，需要先设置完用户信息后再执行这个START埋点
			// 此时被block住的日志会携带上用户信息逐条发出
			aplus_queue.push({
				action: 'aplus.setMetaInfo',
				arguments: ['_hold', 'START'],
			});
		})
		.catch(err => {
			console.error(err);
		});
}
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243

问题记录

开发了两个同版本应用的埋点后发现以下问题（待校验， 过几天回来更新结果）

一、远程主机地址不一致

第一个应用根据开发文档中这里使用的远程主机地址是 alog-api.ding.zj.gov.cn 【埋点成功】
第二个应用同样使用该远程主机地址但是【埋点失败】
后经排查发现第二个应用的甲方提供的文件中 远程主机地址使用的是 alog.zjzwfw.gov.cn【2024年3月22日 已处理待校验结果】