实际上,不论Hexo博客使用的主题是否支持,都可以通过向主题的head.ejs内添加代码的方式使生成的网站支持Google Analytics(以下简称GA)。

Hexo作为一个无服务器的博客系统(实际上算不上是系统,只是一个静态网站生成器),生成网站页面时是按照指定主题的相应文件内容拼接生成网站,
而这些布局元素(.ejs)一般存放在主题文件夹下的layout文件夹内。所以,只要向相应的文件添加指定的内容即可向页面添加相应功能。

这里记录了博主使用Hexo主题Diaspora时对博客使用GA时遇到的问题和解决方案。

初次尝试GA

刚刚换新博客主题时,Diaspora在它的_config.yml里提供了GA衡量ID(有时称为跟踪ID,取决于你目前使用的GA版本是GA4还是GA3)的填写位, 我将自己的衡量ID填写进去后发现,GA管理后台并不能正常收到访问数据。

博客使用错误配置运行了三个月,直到上手试用了GA发现其强大之处于是决定着手解决这个问题。

进入主题目录的layout/_partial内,我发现了主题所自带的google-analytics.ejs文件,显然就是GA的页面代码了,打开发现如下内容:

1
2
3
4
5
6
7
8
9
10
<!-- Google Analytics-->
<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','https://www.google-analytics.com/analytics.js','ga');

ga('create', '<%= theme.google_analytics %>', 'auto');
ga('send', 'pageview');
</script>

运行hexo g后生成的页面按下F12可找到如下代码

1
2
3
4
5
6
7
8
9
10
<!-- Google Analytics-->
<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','https://www.google-analytics.com/analytics.js','ga');

ga('create', '这儿是你在配置文件中填写的衡量ID', 'auto');
ga('send', 'pageview');
</script>

因为谷歌升级了GA4,后期创建的统计媒体资源将统一启用新的gtag.js来统计数据,虽然旧版本analytics.js从官方文档描述来看貌似依旧可用(参看文档) ,但未知原因GA后台无法正常统计到数据,那就乘此机会升级到新的页面代码吧。

使用gtag.js

google-analytics.ejs内部分内容替换成以下内容:

1
2
3
4
5
6
7
8
9
10
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=<%= theme.google_analytics %>"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', '<%= theme.google_analytics %>');
</script>
<!-- End Google Analytics -->

注:<%= theme.google_analytics %>是Hexo主题的全局变量,当然你也可以将其直接替换成自己的GA衡量ID(不过主题配置文件内的变量将不再可用)。

生成并部署到GitHub Pages后再次访问静态博客,可以看到GA后台已经能够显示数据了。

如果你使用的主题不是Diaspora

  1. 如果主题不支持GA,则直接添加gtag.js页面代码到head.ejs
  2. 如果主题支持GA但GA后台无法收到统计信息,尝试升级旧版页面代码或许有助于解决问题,访问该页面了解如何从analytics.js迁移到gtag.js

文章未完……