Vue中使用腾讯移动分析小结

打开进入网址：https://mta.qq.com , 打开右上角的进入管理台,选择HTML5应用，并新建应用，填写相关信息：

注册成功之后进入应用管理：

由于公司要做的是页面浏览统计和点击事件统计，所以需要开启高级功能：

记得先点击绿色的打勾按钮才算保存成功，每次修改配置之后，代码都会更新，然后复制以下代码：

打开VUE项目的public下的index.html进行粘贴：

此时打开运行打开项目首页的时候，就会出现统计数据了

但是这只会统计一次，要每次跳转页面都统计，需要修改一下router.js:

router.afterEach((to: any, from: any, next: any):void =>{
	setTimeout(()=>{
		var _mtac = {};
      (function() {
        var mta = document.createElement("script");
        mta.src = "//pingjs.qq.com/h5/stats.js?v2.0.4";
        mta.setAttribute("name", "MTAH5");
        mta.setAttribute("sid", "500712926");
        mta.setAttribute("cid", "500712927");
		var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(mta, s);
      })();
	})
})

这样访问每个页面，页面的浏览量就会发生改变了，可能会有1-2分钟的延迟。

之后来做以下事件统计,先创建一个事件（我的这个事件还需要传递参数）

之后点击参数配置，新建一个参数，结果如下：

• 如果你不需要传递参数，那直接在标签上写οnclick=‘MtaH5.clickStat(“workbenchpotentialguest”)’：

<button @click="doSomething" onclick='MtaH5.clickStat("workbenchpotentialguest")'>潜客</buutton>

• 如果是需要动态传递某个参数的话

<button @click="doSomething">潜客</buutton>

doSomething(){
	MtaH5.clickStat('workbenchPotentialGuest',{
		staffcode: this.userInfo.staff_code
	});
    // do others ...
}

之后可以看到更新（稍稍有点延迟）

点击查看->参数明细可得：

注意：参数统计隔天才能看到

参考链接：vue项目引入腾讯移动分析平台统计页面浏览量和功能按钮点击量的具体方法步骤