TalkingData的统计代码接入项目还是很简单的,而且他的统计操作也很方便,支持,自定义事件
H5的接入方法:页面插入下面代码:
<script src="http://sdk.talkingdata.com/app/h5/v1?appid=你的appdi&vn=项目名称&vc=1.0.1"></script>
但是对于span单页面应用(如vue开发的webapp)就统计不到了。
上面的代码请求回来了一个talkingdata.js
,talkingdata.js
又引入了一个talking_release.js
,
想了一下,应该是单页面应用路由切换不会触发事件,于是动手改它的源码,把两个js文件缓存到本地。
在vue中添加:
router.afterEach((to, from, next) => {
console.log(process.env.NODE_ENV)
var script=document.createElement("script")
script.setAttribute("type", "text/javascript")
/*if(process.env.NODE_ENV == 'release'){
script.setAttribute("src", "/assets/js/talking_release.js")
}else{
script.setAttribute("src", "/assets/js/talking.js")
}*/
script.setAttribute("src", "/assets/js/talking.js")
var heads = document.getElementsByTagName("head")
if(heads.length)
heads[0].appendChild(script)
else
document.documentElement.appendChild(script)
})
通过监测路由切换动态插入js,达到触发统计的目的,然而统计事件是触发了,但是页面并没有统计到,看了一下请求,发现参数中的pages为空,猜想应该是vue路由的#符号导致页面事件不能被监测到吧。
研究了一下它的源码
talking.js
中createScriptTd()
改为本地
createScriptTd('/assets/js/sdk_release.js');
talking_release.js
中通过监测页面的pagehide
,beforeunload
触发统计事件。
H5Event.addEventListener(window, "pagehide", pageLogout),
H5Event.addEventListener(window, "beforeunload", pageLogout),
动手添加一行
H5Event.addEventListener(window, "hashchange", pageLogout),//extend moxiaonai for Single page application
通过监测hashchange
,也让它触发统计。控制台看了一下,果然可以正常统计了。
测了一下它的主动触发,也是ok的
TDAPP.onEvent(“点击Banner广告”);
tip:有点小问题,发现所有页面的离开率是100%,不清楚它的统计字段是什么,待跟客服沟通后再来补充。···
跟talkingData官方沟通结果
目前H5只支持多页面的统计,还不支持单页面的统计,如果使用单页面统计,请在单页面每一个按钮处埋点,通过自定义事件来统计页面访问次数,但不能统计页面转向;H5单页面统计目前我们已经提过相关需求,
上面的方法虽然实现了页面的额统计,但是得到的数据并不是我们想要的,而且sdk在本地,如果官网更新,很可能会出现问题,查看了https://www.talkingdata.com 的请求,因为官网也是vue做的(框架应该是talkingData团队自己的iview),猜测做法是自定义事件。
最后还是采取了自定义事件的方法。
router.afterEach((to, from, next) => {
try {
TDAPP.onEvent("leave"+from.path,to.path)
TDAPP.onEvent("enter"+to.path,from.path)
} catch(e){
}
})
基本拿到了想要的数据。期待talkingData团队更优秀的项目