Jekyll中启用Google Analytics(GA)

Google分析（Google Analytics）是一個由Google所提供的網站流量統計服務。Google 分析（Analytics）現在是網際網路上使用最廣泛的網路分析服務。Google Analytics還提供了一個SDK，允許從iOS和Android應用程式收集使用資料，稱為Google Analytics for Mobile Apps。

如果你还不知道如何使用 Jekyll搭建网页并架设到服务器, 可以看看我前几周发的文章. 如果你还不知道如果为三步给Jekyll添加RSS订阅, 也可以看看我前几周发的这篇文章.

Google Analytics(GA), 是 Google 提供的數據分析工具，可用來分析網站或APP的數據狀況，同時也是目前全世界最普及的數據分析軟體。GA基本版完全免費！基本版的功能已經完全足夠中小型網站使用了。其面板中拥有大量的数据细节，可以很详细的了解到网页的流量来源, 流量最多的页面, 访问的地区和语言等一些奇奇怪怪的信息. 因此大部分的小型网站都会首选 GA 作为流量监控工具, 参照 GA 提供的数据创作出更好的东西以吸引更多的流量. 不仅如此, 因为有 Google 的背书, GA也一般不会被视为追踪器被拦截( Firefox 自带的追踪保护会拦截, Chrome 和 Safari 均不拦截). GA 的基本概念和使用原理, 可以参考调试消化道 - 超詳細GA網站分析入門教學，看這篇就對了！我觉得写的棒.

具体的说，通过Google Analytics分析，你会了解：

有多少人访问了你的网站？
这些访问网站的人都在哪些地区和城市？
哪些渠道有导流流量到你的网站？
你使用的哪些营销策略帮助你增长了网站流量？
哪个页面是最受欢迎的？
哪些访问者最终在线上购买了你的产品？
网站中，哪些内容是最受访问者喜爱的？
是否在一个活动上浪费钱？
不同版本的广告，哪个更受用户欢迎?

介绍完了 GA, 下面讲讲如何在 Jekyll 中加入并激活追踪器. Jekyll 激活追踪器这个问题在中文区的材料比较少提及, 可能是因为大多数人都是用 Wordpress 建站. 如果你只是不知道怎么在激活追踪代码, 请跳至文章的第二段 激活网页代码代码中的 GA.

在网页代码代码中添加 GA

添加 GA 追踪器绝大多数的 Jekyll 主题内都包含了 GA 的追踪器模块, 因此只需要在 _config.yml 内填入 GA 的追踪码即可. 追踪代码在 Google Analytics 内生成并查看. 格式如: UA-123456789-0

注: 如果你的 Jekyll 主题已添加 GA 追踪器模块(先检查一下_config.yml 内有无 GA 项), 在 _config.yml 内填入追踪码即可.

以下是 jekyll 主题中的写法, 也可以按照 GA 的提示直接把 GA 代码写在 head.html 中, 会简单一些. 在生成追踪码时会一并生成追踪码, 粘贴到 head.html 即可. 请见 GA 的官方教程.

进入 _include 目录

$ cd /path/to/site/_include

编辑 head.html 在 head 标签内加入以下内容

if site.google_analytics and jekyll.environment == 'production'
    include google_analytics.html
endif

注意: 为了防止Jekyll解析错误, 我把括号删除了. 请不要照抄!! 如果不知道怎么补全括号, 请模仿此文件中的其他代码块.

新建 google_analytics.html 在 _include 目录内, 新建 google_analytics.html 文件, 写入以下内容:

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

激活网页代码代码中的 GA

进入根目录

在 _config.yml 加入GA

# Google Analytics Tracking ID goes here:
google_analytics: UA-123456789-0

注: _config.xml 于根目录

建立带追踪器的网页

你可能会发现, 按照教程执行 jekyll build 命令获得的网页并没有带 GA 追踪器. GitHub 上的托管网页却有 GA追踪器. 实际情况确识如此. 因为 jekyll build 或 jekyll serve 命令只会生成调试模式的网页. 如果你想把你的网页架设到服务器上, 则不应该执行此环境(调试模式)的命令.

if site.google_analytics and jekyll.environment == 'production'
    include google_analytics.html
endif

注意: 为了防止Jekyll解析错误, 我把括号删除了. 请不要照抄!! 如果不知道怎么补全括号, 请模仿此文件中的其他代码块.

这是上文提到的 head 标签中关于 GA 的信息. 或许你已经注意到了, 在非 production 环境下, GA 的追踪器并不会被激活. 因此如果你想让你的追踪器激活, 就需要让 jekyll 在 production 环境下建立网页.

因此, 启用追踪器的 jekyll build 命令应该长这样

$ JEKYLL_ENV=production /usr/local/bin/jekyll build

现在就在你的服务器上试一试吧. 如果一切顺利, GA 的实时记录上就会出现你的访问信息了. 注: Firefox 需要关闭浏览器自带的追踪保护. 其位置于网址栏左边的盾牌形状的图标. 如果有安装其他的拦截插件如 EFF Privacy Bridge 需要设置 GA 为允许.

题外话: 当然, 除了在 Jekyll 内建立 GA, 也可以在如 NGINX 之类的服务器框架内加入 GA. 这就见仁见智了. 因为大部分的 Jekyll 主题已经有加入 GA 模块, 因此只需要在 build 命令前加入 JEKYLL_ENV=production 环境, 就可以激活追踪器. 在框架内加入 GA相当于自己又造了一个轮子, 我觉得没有必要. 但是, 如果你试试在框架中加入GA, 可以参考 GitHub - Add Google Analytics tracking code to HTML via nginx

参考资料:

Jekyll中启用Google Analytics(GA)

在网页代码代码中添加 GA

进入 _include 目录

激活网页代码代码中的 GA

进入根目录

Join Newsletter

Written by DolorHunter