Vue中使用腾讯移动分析小结
程序员文章站
2024-02-08 21:44:04
...
打开进入网址: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 ...
}
之后可以看到更新(稍稍有点延迟)
点击查看->参数明细可得:
注意:参数统计隔天才能看到
上一篇: 等于号js是怎么解析的
下一篇: 如何设置CSS下拉层?