5

Hugo中使用Google Analytics

 3 years ago
source link: https://note.qidong.name/2017/07/05/google-analytics-in-hugo/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Hugo中使用Google Analytics

2017-07-05 09:52:08 +08  字数:1138  标签: Hugo Web

Google Analytics

使用Google Analytics,大致过程是:

  1. 获取跟踪代码
  2. 添加代码到网页中

注册账户

在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在孤完成上述操作后,就可以在搜索中显示结果了。

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

参考


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK