nuxt项目中使用百度统计代码详细流程

统计网站对于站长来说是必不可少的工具之一,统计网站可以让站长知道每天的访问量、来源、以及访问页面等详细信息。

百度统计作为目前为数不多的免费统计网站,拥有着大批量的站长。那么百度统计的代码要如何才能起到作用呢?

本文介绍基于nuxt的项目如何配置及使用百度统计功能。

如果你还没有百度统计账号,需要先注册一个百度统计账号。“点击前往注册

使用过百度统计的站长应该都知道,百度统计将会提供一个javascript代码。你只需要把他提供的代码放置在网站head之间即可。

如果你不清楚百度统计详细注册、安装流程,可本站搜索“百度统计注册及安装流程图文详解”,查看百度统计完整的详细步骤。

<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxxxxxxxxxxxx";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>

但在实际情况中,nuxt项目中并不存在传统的head,那么我们又要如何放置统计代码呢?

1、根目录下/plugins新建文件baidu.js

export default ({app: {router}, store}) => {
/* 每次路由变更时进行pv统计 */
router.afterEach((to, from) => {
/* 告诉增加一个PV */
try {
window._hmt = window._hmt || []
window._hmt.push(['_trackPageview', to.fullPath])
} catch (e) {
}
})
}

2、nuxt.config.js中进行配置

plugins: [
{
src: '~/plugins/baidu'
}
]

3、需要统计的页面中放置统计代码

head: {
// ...
link: [
// ...
],
script: [
{ src: 'https://hm.baidu.com/hm.js?xxxxxxxxxxxxxxxxxxx' }
]
}

注:这里xxxxxxxxxxxxxxxxxxx是你在百度统计官网创建后,分配给你的数据。千万不能随便填,不然最终会没有效果。


六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!