基于vue或nuxt.js的单页应用怎么添加统计功能?
首页 >  Web前端 > Vue  > 2018年12月23日阅(572)评(0

普通vue项目中

以CNZZ统计为例(CNZZ统计API),先在index.html中的head标签中加入:

<script>
var _czc = _czc || [];
_czc.push(["_setAutoPageview", false]);
(function() {
    var cnzz_s_tag = document.createElement('script');
    cnzz_s_tag.type = 'text/javascript';
    cnzz_s_tag.async = true;
    cnzz_s_tag.charset = 'utf-8';
    cnzz_s_tag.src = 'CNZZ统计提供的链接';
    var root_s = document.getElementsByTagName('script')[0];
    root_s.parentNode.insertBefore(cnzz_s_tag, root_s);
})();
</script>

然后全局路由钩子中:

router.afterEach(function(to, from){
    // 生产环境才开始统计
    if(_czc && process.env.MY_API_ENV === 'product'){
        var content_url = to.fullPath
        var referer_url = from.fullPath
        _czc.push(['_trackPageview', content_url, referer_url])
    }
})

百度统计用法类似。百度统计API

<script>
var _hmt = _hmt || [];
_hmt.push(['_setAutoPageview', false]);
(function() {
    var hm = document.createElement("script");
    hm.src = "百度统计提供的链接";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
})();
</script>

相应的

router.afterEach(function(to, from){
    // 生产环境才开始统计
    if(_hmt && process.env.MY_API_ENV === 'product'){
        _hmt.push(['_trackPageview', to.fullPath])
    }
})

nuxt.js项目中

nuxt官方提供了“可以定制化 Nuxt.js 默认的应用模板”功能,那么我们可以直接在nuxt项目的根目录创建一个app.html文件,内容大致如下:

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head>
    {{ HEAD }}
<script>
var _czc = _czc || [];
_czc.push(["_setAutoPageview", false]);
(function() {
    var cnzz_s_tag = document.createElement('script');
    cnzz_s_tag.type = 'text/javascript';
    cnzz_s_tag.async = true;
    cnzz_s_tag.charset = 'utf-8';
    cnzz_s_tag.src = 'CNZZ统计提供的链接';
    var root_s = document.getElementsByTagName('script')[0];
    root_s.parentNode.insertBefore(cnzz_s_tag, root_s);
})();
</script>
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

然后在 plugins 目录下创建 plugins/ga.js 文件

export default ({ app: { router }, store }) => {
    router.afterEach((to, from) => {
        if(process.env.MY_API_ENV === 'product'){
            try{
                var content_url = to.fullPath
                var referer_url = from.fullPath
                _czc.push(['_trackPageview', content_url, referer_url])
            }catch(e){
                
            }
        }
    })
}

最后,在nuxt.config.js配置如下:

plugins: [
    { src: '~/plugins/ga.js', ssr: false },
],

相关资料

PC端支付宝开发最终的页面跳转问题
nuxt.js项目客户端和服务端怎么共享用户信息?

有朋自远方来...评论一下呗O(∩_∩)O哈哈~

QQ
昵称*
邮箱*
主页