由于单页面应用只有一个页面,路由到其他url时页面是不会刷新的,而腾讯移动分析默认情况下是自动上报,而是需要刷新页面才能记录到的,因此这里不能使用自动上报,修改下面截图所以的勾选项,去掉自动上报的勾选,即为手动上报(注意修改了这里,下面的统计代码也会相应变化,记得使用最新的统计代码),下面都是基于使用手动上报的相关操作
一、查看我的应用相关配置信息
进入到应用管理->翻到最下面的配置指南,有一段统计代码(注:这段代码会根据你上面高级功能、可选功能的勾选相应的变化,记得使用最新的统计代码)
二、npm的方式引入WEB SDK
1 install 安装
npm install mta-h5-analysis --save
2 import 引入(正常在main.js中引入)
import MtaH5 from 'mta-h5-analysis';
3 调用初始化(main.js)
// 初始化腾讯移动分析
MtaH5.init({
"sid":'500722912', //必填,统计用的appid
"autoReport":0,//是否开启自动上报(1:init完成则上报一次,0:使用pgv方法才上报)
"senseHash":1, //hash锚点是否进入url统计
"senseQuery":0, //url参数是否进入url统计
"performanceMonitor":0,//是否开启性能监控
"ignoreParams":[] //开启url参数上报时,可忽略部分参数拼接上报
});
三、使用
在需要统计的组件中加上这句代码:可以放在钩子函数中,如mouted,created,activated(如果加了keep-alive,该页面还是要上报,则需要放在这个钩子函数中)等,到这里已经完成了,到腾讯移动分析系统上查看我的应用是否统计到了自己要统计的页面
MtaH5.pgv();
四、还有另外一个方式
将配置指南的那段统计代码放到index.html中(放在所有<script>后去引入),然后在这个统计代码的script标签后再引入:
<script src="http://pingjs.qq.com/h5/stats.js?v2.0.4" name="MTAH5" sid="看管理台统计代码中的sid填写" cid="如果没有cid可删除cid"></script>
这个的效果和使用npm install并在main.js中初始化的效果是相同的,可以替代,不过最后都需要手动调用MtaH5.pgv()来上报
可参考官方文档:https://mta.qq.com/docs/h5_advance_access.html#%E6%89%8B%E5%8A%A8%E4%B8%8A%E6%8A%A5