jekyll, google analytics,

Jekyll中启用Google Analytics(GA)

DolorHunter DolorHunter Follow Mar 15, 2020 · 13 mins read

Jekyll中启用Google Analytics(GA)
Share this

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

参考资料:

Join Newsletter
Get the latest news right in your inbox. We never spam!
DolorHunter
Written by DolorHunter
Developer & Independenet Blogger