美文网首页
vue 处理单页使用百度统计#号被截断

vue 处理单页使用百度统计#号被截断

作者: YellowPoint | 来源:发表于2018-11-20 19:18 被阅读0次

vue百度统计代码;通过_trackPageview来手动添加# hash参数的链接,trackPageview说明

方案一: 有问题
var _hmt = _hmt || [];
window._hmt = _hmt; // 必须把_hmt挂载到window下,否则找不到
 (function () {
       var hm = document.createElement("script");
       hm.src = "https://hm.baidu.com/hm.js?"+ 百度站点id;
       var s = document.getElementsByTagName("script")[0];
       s.parentNode.insertBefore(hm, s);
  })();
router.beforeEach((to, from, next) => {
    if (window._hmt) {
        if (to.path) {
           window._hmt.push(['_trackPageview', '/#' + to.fullPath]);
        }
    }
    next();
});

那这样的话第一个页面的#号就没有统计到呀
再修改到router.afterEach里,以及兼容hash和search的参数
方案二:
try {
    //百度统计
    let _hmt = _hmt || [];
    window._hmt = _hmt; // 必须把_hmt挂载到window下,否则找不到
    //关闭了自动PV跟踪
    window._hmt.push(['_setAutoPageview', false]);
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?百度id";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();

} catch(e) {
    console.log('百度统计', e)
}

router.afterEach((to, from) => {
    try {
        //关闭了自动PV跟踪
        window._hmt.push(['_setAutoPageview', false]);
        
        --废弃代码开始,仅做记录,使用请删除--
        
        //  百度统计默认截断#号后面的参数,故通过手动来添加pv,去掉origin之后的所有
        //一开始以为直接用location.href后来发现
        //这里页面还没有跳转呀,获取的还是from页面的地址,还是要用to.fullpath
        window._hmt.push(['_trackPageview',  location.href.replace(location.origin,'')]);
        
        --废弃代码结束--

        //  百度统计默认截断#号后面的参数,故通过手动来添加pv
        window._hmt.push(['_trackPageview',  '/'+ location.search +'#' + to.fullPath]);
    } catch(e) {
        console.log('百度统计', e)
    }

})

vue spa中使用百度统计

相关文章

  • vue 处理单页使用百度统计#号被截断

    vue百度统计代码;通过_trackPageview来手动添加# hash参数的链接,trackPageview说...

  • Learn VueJs 2 Vue-router

    使用 Vue.js 和 vue-router 创建单页应用非常的简单,使用 Vue.js 开发,整个应用已经被拆分...

  • vue超链接跳转外部链接

    vue单页应用项目直接使用a标签跳转到外部链接报错,原因是:a标记触发的跳转默认被router处理,加上了前缀。 ...

  • 前端 SPA 单页应用数据统计解决方案 (ReactJS / V

    前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS) 一、百度统计的代码: UV PV 统计...

  • vue-cli+elementui搭建单页面后台demo(tab

    1、前台展示 首页: 添加页: 音频列表页: 修改页: 数据统计页: vue可使用 引入, 这里使用的是npm...

  • vue-cli

    === 单文件组件结合webpack处理单文件组件配置webpack相关loader使用vue文件创建vue组件引...

  • vue2.0 vue-router

    vue-router 用 Vue.js + vue-router 创建单页应用,是非常简单的。使用 Vue.js ...

  • Vue学习笔记-百度统计

    百度统计是一个可以统计页面数据的平台工具,同样也可以使用在Vue页面里。 百度统计——移动统计通过多年沉淀下来的分...

  • vue-router 配置路由

    vue-router 配置路由 用 Vue.js + vue-router 创建单页应用,是非常简单的。使用 Vu...

  • vue多页项目配置

    前言 ​ 前阵子和app端做混合开发,而我们前端使用的技术又是vue,单页肯定不行,于是就需要使用vue进行多页开...

网友评论

      本文标题:vue 处理单页使用百度统计#号被截断

      本文链接:https://www.haomeiwen.com/subject/rmaxqqtx.html