欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-02-08 21:44:04
...

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

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

注册成功之后进入应用管理
Vue中使用腾讯移动分析小结

由于公司要做的是页面浏览统计和点击事件统计,所以需要开启高级功能:
Vue中使用腾讯移动分析小结

记得先点击绿色的打勾按钮才算保存成功,每次修改配置之后,代码都会更新,然后复制以下代码:
Vue中使用腾讯移动分析小结

打开VUE项目的public下的index.html进行粘贴:
Vue中使用腾讯移动分析小结

此时打开运行打开项目首页的时候,就会出现统计数据了
Vue中使用腾讯移动分析小结

但是这只会统计一次,要每次跳转页面都统计,需要修改一下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分钟的延迟。

之后来做以下事件统计,先创建一个事件(我的这个事件还需要传递参数)
Vue中使用腾讯移动分析小结

之后点击参数配置,新建一个参数,结果如下:
Vue中使用腾讯移动分析小结

  • 如果你不需要传递参数,那直接在标签上写ο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中使用腾讯移动分析小结
点击查看->参数明细可得:
Vue中使用腾讯移动分析小结
注意:参数统计隔天才能看到

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

相关标签: 实践总结