hugo ananke解决google analytics不工作

Google Analytics简介

Google Analytics，一般都会简称GA，是由Google 所提供的数据分析工具，可用来分析网站或APP 的数据使用状况（只是目前仍使用在网站数据分析居多），由于使用Google 搜寻引擎的人数比例将近超过80%，所以大家自然地对于GA 的数据准确度也有比较高的信任度。 GA 基本版是完全免费的，基本版的功能已经完全足够中小型网站使用了，只有数据量较大或是有其他更多需求的企业网站才会需要使用到进阶版GA 360（原名: GA Premium）。

使用 GA 的好处

了解使用者是透过怎样的方式进入网站 了解进入网站的目标对象 观察使用者进入网站后的行为流程 所以若是您也希望您的Hugo 网站能够透过GA 来分析使用上的数据，享受GA 所带来的上述好处，可以去申请GA ，再将GA 加到自己的Blog 里。

在 Hugo + ananke上启用 GA

1. 注册Google Analytics账号，并配置

Google Analitics官网。 使用自己的Google账号登录，然后创建一个统计账号，再添加媒体资源【你的网站或者APP】。

然后就得到一个衡量ID：G-XXXXXXXXXX，查看安装说明，选择手动安装就会看到如下代码：

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXXX');
</script>

2. 在hugo网站根目录下找到hugo.toml文件，增加以下配置：

googleAnalytics = "G-XXXXXXXXXX"  # 放在顶级

3. 增加google_analytics_async.html

接着先在根目录的 layouts 目录下，新增目录 _internal， 然后在刚建立的 _internal 目录下，新增 google_analytics_async.html 文件。
将如下代码复制粘贴到ggoogle_analytics_async.html 里并保存。这段代码就是GA要安装的代码稍作修改，替换了衡量ID。

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{.Description}}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', {{.Description}});
</script>

4. 打开hugo.toml, 新增下面一项：

[params]
  env = 'production' # 有此项才会生成Google Analytics代码。此项工作的前提是存在：layouts\_internal\google_analytics_async.html

这是由于ananke中layouts/_default/baseof.html有下面模板内容：

  {{- template "_internal/twitter_cards.html" . -}}
    {{ if eq (getenv "HUGO_ENV") "production" | or (eq .Site.Params.env "production")  }}
      {{ template "_internal/google_analytics.html" . }}
    {{ end }}
	{{ block "head" . }}{{ partial "head-additions.html" . }}{{ end }}
  </head>

从中可以看出，需要env变量来触发，这样生成时才会出现google analytics代码。在测试时不需要，应该注释掉env变量。

5. 验证

完成，此时public下的html文件中就有了google的统计代码。上传更新后，在google analytics后台检查代码安装情况确认统计工作正常。

通过GA 的分析，可以让我们清楚知道网站流量外，也能了解自己的博客哪篇文章点击率最高，上述就是在Hugo 配置Google Analytics 的过程，若您有更好的方式或是我有笔误的地方，欢迎通过过下方的Disqus 留言让我知道。

• Hugo
• Ananke
• Google Analytics