写之前吐槽一下百度的站长平台,添加新站搜索必须要备案,然后就放弃了。。。转到谷歌的Google Analytics, GA,可以统计网站的访问数据。搜索了一下,多数hexo模板都嵌入了google analytics相关的ejs,添加起来还是比较方便的。
下面以我用的模板tranquilpeak为例,介绍一下添加的步骤,
1. 注册GA账户并添加网站
首先利用谷歌帐号登录Google Analytics,设置关联,而后添加网站信息,如下图所示,
2. 获取UA
添加好网站信息以后,GA会提供一个名为UA
的ID (例如 UA-xxxxxx-x) 以及用于添加进网站页面的gtga.js
段代码,如下
1 2 3 4 5 6 7 8 9
| <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxx-x"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-xxxxx-x'); </script>
|
3. 在模板中添加GA支持
对于tranquilpeak
模板,配置google-analytics
是比较简单的,只需要修改theme/tranquilpeal/_config.yml
文件中的google-analytics-id
部分,如下所示,
1 2
| google_analytics_id: UA-xxxx-x
|
同样的,相应的google-analytics.ejs
文件可以在theme/tranquilpeak/layout/_partial
中找到, 其代码如下所示,
1 2 3 4 5 6 7 8 9 10 11
| <% if (theme.google_analytics_id) { %> <script type="text/javascript"> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', '<%= theme.google_analytics_id %>', 'auto'); ga('send', 'pageview'); </script> <% } %>
|
其中的theme.google_analytics_id
便对应刚刚我们添加的UA-xxxx-x,该文件不需要修改。当然也可以尝试将GA提供的基于
gtag.js代码替换到
google-analysis.ejs`中,感兴趣可以试试看。
4. 编译并部署
最后,利用hexo g
重新编译相关文件,在每一个.html
页面中加入GA
相关的内容,谷歌的分析服务便可以发挥作用。
Reference
[1] hexo-theme-tranquilpeak
[2] Hexo搭建Github静态博客
Comment and share