一只特立独行的猪 一只特立独行的🐷
一只特立独行的🐷
  • 主页
  • web开发
  • 博客笔记
  • 软件工具
  • 随笔杂谈
  • 文章归档
  • 影音欣赏
  • 我的资源
  • 关于我
  • wechat_fill

SPA单页面应用(Vue)添加TalkingData统计

  • 2017-09-07
  • Web开发
  • 评论(0)

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团队更优秀的项目

Powered by Wordpress, Theme by Wing-magic
©2023 一只特立独行的🐷 All rights reserved
陕ICP备15006707号-5