Uniapp 开发微信公众号H5-接入友盟统计

445 阅读2分钟

友盟工作台地址:workbench.umeng.com/#

1、创建应用H5应用:

注册成功获得appkey

2、Umeng SDK配置

在App.vue中的beforeCreate()函数中

(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://d.alicdn.com/alilog/mlog/aplus/' + i + '.js';
			 f.parentNode.insertBefore(j, f);
			})(window, document, 'script', 'aplus_queue', '203467608');
						
			  //集成应用的appKey
			  aplus_queue.push({
			    action: 'aplus.setMetaInfo',
			    arguments: ['appKey', '申请的Appkey']
			  });
			  /************************以下内容为可选配置内容****************************/
			  //sdk提供手动pv发送机制,启用手动pv(即关闭自动pv),需设置aplus-waiting=MAN;
			  //注意:由于单页面路由改变时不会刷新页面,无法自动发送pv,所以对于单页应用,强烈建议您关闭自动PV, 手动控制PV事件
			  aplus_queue.push({
			    action: 'aplus.setMetaInfo',
			    arguments: ['aplus-waiting', 'MAN']
			  });
			  //是否开启调试模式 
			  aplus_queue.push({
			    action: 'aplus.setMetaInfo',
			    arguments: ['DEBUG', true]
			  });
			  //是否指定用作计算umid的id类型,默认为cnaid,目前支持:
			  //1. 微信和QQ: openid; 字节和百度 anonymousid; 支付宝 alipay_id
			  //2. 微信、QQ、字节、百度平台的 unionid
			  //3. 业务方自己生成的随机id uuid
			  
			  //  aplus_queue.push({
			  //   action: 'aplus.setMetaInfo',
			  //   arguments: ['aplus-idtype', 'openid'] //取值参考见附表1
			  // });
			  
			  // 关闭自动PV
			  aplus_queue.push({
			   action: 'aplus.sendPV',
			    arguments: [{
			        is_auto: false
			    }]
			  });
			  /******************************************************************/

在公众号H5中关闭PV自动上报

aplus_queue.push({
			   action: 'aplus.sendPV',
			    arguments: [{
			        is_auto: false
			    }]
			  });

不需要设置

 //  aplus_queue.push({
			  //   action: 'aplus.setMetaInfo',
			  //   arguments: ['aplus-idtype', 'openid'] //取值参考见附表1
			  // });

最初集成时加入了此方法,上报数据一直在UMeng平台无法查看,经过与客服沟通

建议删除,删除以后数据就上报成功!

3、自定义事件上报:

在UMeng平台创建自定义事件-事件管理

批量导入:

导入模板:模板规则(事件字段名,事件名)一行一个事件

Um_Event_PageView, 页面浏览
Um_Event_ModularClick, 功能按钮点击

api调用:

在使用api时从window对象获取aplus_queue

const { aplus_queue } = window;

调用api上报自定义事件:

aplus_queue.push({
			action: 'aplus.record',
			arguments: [eventId, 'CLK', data]
		});

简单封装:


const {
	aplus_queue
} = window;

const EVENT_ID = {
	PAGE_VIEW: 'Um_Event_PageView', //页面浏览	
	MODULAR_CLICK: 'Um_Event_ModularClick', //功能按钮点击
	BOTTOM_NAVI_CLICK: 'Um_Event_BottomNaviClick', //下导航点击
	LOGIN_SUC_CLICK: 'Um_Event_LoginSuc', //登录成功
}


	const trackEvent=(eventId,data)=>{
		// #ifdef H5
		aplus_queue.push({
			action: 'aplus.record',
			arguments: [eventId, 'CLK', data]
		});
		// #endif
		
	}

module.exports={
	trackEvent
}

api调用:

	TrackEventRecord.trackEvent('Um_Event_PageView',{
					"参数名","参数"
				})

在微信开发者工具中就可以看到UMeng统计上报的web_logs请求!