普通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 },
],
有朋自远方来...评论一下呗O(∩_∩)O