hugo 养成记-添加 Google Analytics 并关联 Google Search Console

前言

在 hugo 网站中添加谷歌分析 Google Analytics 跟踪代码的流程一般是:1. 到 Google Analytics 网站获取跟踪代码(需要注册);2. 添加代码到所需跟踪的页面(一般添加到<head> 标签内);3. 验证跟踪是否生效。

谷歌分析跟踪代码

谷歌分析可以对 APP 或网站的访问数据流进行跟踪,拥有谷歌分析账户后在后台的【管理】-【媒体资源】-【数据流】-【代码添加说明】中获取跟踪代码与衡量 ID,在我的案例中,G-JZL13D****就是我网站的衡量 ID,这里记下这个衡量 ID,后面 hugo 需要用到。一般网站添加只需要将谷歌分析提供的全局网站代码添加到网页头即可,添加后访问目标网站,能够在谷歌分析中看到实时访问用户表明添加成功。若未成功可以查看自己网站页面源代码,检查跟踪代码位置跟衡量 ID 是否正确,或者排除是否因网络原因或浏览器插件原因阻止了谷歌分析获取访问数据流。

为 hugo 添加 Google Analytics

在 hugo 中不需要手动添加谷歌分析提供的 js 跟踪代码,其已提供了一个内置模板文件,用于添加同步或异步跟踪代码。

1、在 hugo 配置文件 config.toml 中配置我们前面记下来的谷歌分析衡量 ID

googleAnalytics = "G-JZL13D****"

2、引用 Google Analytics 模板

同步跟踪代码的 hugo 内置模板

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

异步跟踪代码的 hugo 内置模板

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

以上两个模板选其一添加到需要跟踪的网页<head> 标签中。完成后 hugo 在生成页面时就会自动添加谷歌跟踪代码。

如果不想引用内置模板,hugo 亦提供了.Site.GoogleAnalytics 变量,该变量指向我们在 config.toml 中配置的 googleAnalytics,可以根据需要添加到自己的模板中。

hugo 添加 Google Analytics 无效的排查

按照前面的步骤进行之后,如果发现无论如何 hugo 都没有生成跟踪代码,一个可能的原因是你没有将 googleAnalytics 配置项放在 config.toml 文件顶端,将其移到顶端即可。

假设你的 config.toml 是以下这样的,GoogleAnalytics 没有位于第一部分的节点,而是在其他节点(带有 [] 的节点之后),那 hugo 将不会获取到你添加的 GoogleAnalytics,也就不会自动在生成的网页内容中添加跟踪代码,即便你已经在对应位置引入内置跟踪代码模板。

baseurl = "/"
...

[permalinks]
    post = "/:year/:month/:day/:slug/"

[blackfriday]
  hrefTargetBlank = false

# Enable analytics by entering your Google Analytics tracking ID
GoogleAnalytics = "G-JZL13D****"

...

调整 GoogleAnalytics 配置项的位置,修改后的 config.toml 如下:

baseurl = "/"
...
GoogleAnalytics = "G-JZL13D****"
...

[permalinks]
    post = "/:year/:month/:day/:slug/"

[blackfriday]
  hrefTargetBlank = false

...

通过配置项顺序的修改,hugo 就成功获取到 GoogleAnalytics 配置项内容。这个 bug 可能是 toml 解析器的问题,该问题在 hugo0.75.0 中持续存在。

在调试时禁止添加 Google Analytics

有时候我们不希望在进行 hugo 调试时添加 GoogleAnalytics,可以采用以下代码引入跟踪模板,这样使用 hugo server 命令启动内置服务器调试时就不会自动添加谷歌分析跟踪代码。

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

进一步关联 Google Search Console

Google Analytics(谷歌分析)用于获取用户访问网站(或 App)的数据流,分析访客情况。Google Search Console(谷歌站长工具)则用于统计网站在谷歌搜索引擎中的 SEO 情况,包括关键词排名、曝光情况、点击率等。

1、首先到 Google Search Console 添加网站域名并验证,根据提示采用 “网域” 或 “网址前缀” 验证。

验证方法

2、验证通过后根据 Console 后台指引添加站点地图 sitemap.xml 文件。

关联成功后就可以直观地查看网站在谷歌搜索中的 SEO 情况。

暂无评论

发送评论 编辑评论


				
上一篇
下一篇