Hugo中使用Google Analytics

Google Analytics ¶

使用Google Analytics，大致过程是：

1. 注册账户
2. 获取跟踪代码
3. 添加代码到网页中
4. 验证生效

注册账户 ¶

在Google Analytics官网，可以使用Google账户，直接注册。

获取代码与测试 ¶

注册后，在【管理】【媒体资源设置】【跟踪信息】【跟踪代码】页面，即可获得Tracking ID与代码。

<script>
(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', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

其中，'UA-XXXXX-Y'就是Tracking ID。

也可使用异步跟踪代码，在支持async的浏览器使用。

<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>

添加到网站后，可以通过同页面上的【发送测试流量】来查看效果。

Analytics in Hugo ¶

其实，在Hugo中不需要直接添加上述代码。

在文档页面《Hugo - Analytics in Hugo》中，可以看到Hugo已经直接支持Google Analytics了。

只需要两步，就可以简单使用Google Analytics。

首先，在config.toml中，设置Google Analytics的ID。 这个ID，既可称为媒体资源ID（Property ID），又可称为（Tracking ID）。

googleAnalytics = "UA-XXXXX-Y"

其中的"UA-XXXXX-Y"需要替换成实际的Tracking ID。

其次，在模板文件head.html中，添加以下内容：

{{ template "_internal/google_analytics_async.html" . }}

此后，在生成的页面中，就自动包含Google Analytics需要的代码了。

在调试时禁用Analytics ¶

配置完成后，Google Analytics会上传任何页面的访问信息，包括本地hugo server调试时。 为了避免这种干扰数据，暂时没有太好的办法，只有一个歪招。

{{ if not .Site.BuildDrafts }}
{{ template "_internal/google_analytics_async.html" . }}
{{ end }}

这样，在hugo server --buildDrafts时，就不会包含Analytics代码，产生上传数据。

后来，在Hugo v0.38以后，有一个更好的办法：

{{ if not .Site.IsServer }}
{{ template "_internal/google_analytics_async.html" . }}
{{ end }}

这样就可以直接判断是否为Server模式了。

Search Console ¶

在设置完Google Analytics后，会收到信息， 建议关联Google Analytics（分析）和Search Console。

前者是做数据采集与统计，而后者是做Google搜索的相关定制。

添加网站并验证 ¶

在verification页面，添加网站并验证。

使用【备用方法】【Google Analytics】来验证，可以一举两得。

提交站点地图 ¶

默认情况下，Hugo已经自动在网站根目录，生成了sitemap.xml文件。

所以，只需要在【抓取】【站点地图】页面，指定提交即可。

总结 ¶

值得一提的是，Google在孤完成上述操作后，就可以在搜索中显示结果了。

而百度，过了很久，仍然不行。 参见另一篇笔记《百度链接提交与统计》。

参考 ¶

• 设置 Google Analytics（分析）跟踪
• 将analytics.js 添加到网站中
• Hugo - Analytics in Hugo
• Hugo - Sitemap Template