如何将Google Analytics跟踪ID添加到GitHub Pages

Question

如何将Google Analytics跟踪ID添加到GitHub Pages

githubgoogle-analyticsgithub-pages

231

这可能是一个简单的问题，但我现在对于如何将Google Analytics跟踪ID添加到GitHub页面充满了疑虑。

我正在使用GitHub自动生成页面来创建我的GitHub页面，但它要求填写“Google Analytics跟踪ID”。我尝试在Google Analytics上注册，但那里需要网站URL。

那么我该怎么做呢？

还有一个问题：在GitHub页面创建后，我们可以稍后添加Google Analytics Tracking ID吗？

- exexzian

有很多建议的方法，但我还不能确认其中任何一个是否有效。我希望它在大约24小时内开始运行。 - Christopher

2

我头都炸了。我一直在使用Brave浏览器阻止我的网站上的跟踪器，而且一直都有效。对我来说令人困惑的是(google analytics)最近从ga移动到gtag(google tag)。显然现在只需要gtag()，不再需要ga()。有趣。这些链接帮助我诊断问题: https://chrome.google.com/webstore/detail/tag-assistant-by-google/kejbdjndbnbjgmefkgdddjlbokphdefk 和 https://www.analyticsmania.com/post/google-tag-manager-vs-google-analytics/ - Christopher

@ChrisEmerson 非常有用的更新 :) - exexzian

1

我曾经遇到过类似的问题，我的访问没有被记录下来，后来发现是AdBlock造成的。 - Andrew Zaw

12个回答

93

对于任何有兴趣的人，如果你正在使用Jekyll和GitHub Pages，我刚刚撰写了一篇文章，展示了如何正确地向Jekyll中添加Google Analytics跟踪ID。

你可以在管理页面中找到你的Universal Analytics跟踪代码，具体位置为：Admin > Property > Tracking Info > Tracking Code。
在你的Jekyll网站目录下的 _includes 文件夹中创建一个名为 analytics.html 的新文件。
将Google Analytics跟踪ID代码添加到 analytics.html 中。
最后，在 _layouts/head.html 中，在结束的 </head> 标签之前添加 {% include analytics.html %}。Google建议在此处进行设置以正确跟踪您网站上的所有页面。

- Colin

5

谢谢，好文章。值得注意的是，在GitHub Pages中，它会自动设置jekyll.environment == 'production'（https://github.com/jekyll/jekyll/issues/1219），而Jekyll默认的环境是`'development'`。 - Andrea

1

我有_layouts/default.html，但它完全正常工作（我不熟悉Jekyll）。 - Joey Baruch

或者，直接将其复制到 head.html 中。 - Nihar Karve

23

如果您正在使用 Jekyll 提供的最小模板，则 -

在 _config.yml 中添加 google_analytics: UA-xxxxxxxx-x
创建文件 _includes/google-analytics.html，并在其中添加 Google Analytics JavaScript 代码。

替换

ga('create', 'UA-xxxxxxxx-x', 'auto');

与之相关

ga('create', '{{ site.google_analytics }}', 'auto');

只需要这样做，您的Google Analytics代码就可以在生成环境下运行了。详情请参阅此处的模板源代码-https://github.com/jekyll/minima

如果您使用不同的模板，可以按照相应文件替换模板源代码的方式进行操作。

- romeo14

6

第二步实际上不需要。请参考https://github.com/pages-themes/minimal中的文档。 - kzu

截至2022年4月，上述主题有更多关于Google Analytics和使用GA的新脚本的指导：https://github.com/pages-themes/minimal/tree/814b8723af0aa0ada9b5784da6b73d862bb74150#customizing-google-analytics-code - manroe

16

最好使用GA-Beacon来实现这个功能。GA-Beacon可以跟踪您的所有GitHub存储库，即使访问的链接不是HTML文档也可以跟踪。

请查看：https://github.com/igrigorik/ga-beacon

- user4011964

它可以工作，但所有的实时数据记录都来自弗吉尼亚州阿什本。即使我在本地访问页面...离VA很远。 - jtlindsey

@jtlindsey - 你的图像/像素是否有可能被缓存在弗吉尼亚州阿什本的CDN上？ - pulkitsinghal

@pulkitsinghal 我不是很确定，那篇帖子已经过去将近一个月了，我使用了几周，数据一直显示为Ashburn VA。现在回顾我的数据，实时数据显示位置未设置，但历史记录中有来自世界各地的查询，所以我不确定错误出在哪里。我可能会将其删除，因为数据不正确。 - jtlindsey

9

通过_config.yml添加分析。

所有GitHub主题（supported themes）都原生支持Google Analytics。您只需提供跟踪代码（UA-XXXXXXXXX-X）。

Google Analytics有两种版本 - Google Analytics 4（GA4）和 Universal Analytics。您需要使用后者。 GA4不会起作用^#。

创建新的Universal Google Analytics属性（而不是GA4属性）。默认情况下，您创建的跟踪属性将是GA4类型。您必须选择“创建Universal Analytics属性”才能使该属性成为通用属性。一旦创建了GA4属性，就无法将其转换为通用属性。您只能在创建新属性时执行此操作。

1.1 在高级选项中打开通用分析功能。

1.2 配置通用分析选项。

1.3 复制此新创建属性的跟踪 ID。

将此跟踪ID添加到您的gh-pages站点的_config.yml中。

google_analytics: UA-XXXXXXXXX-X

以下内容来自modernist's readme - 这是我网站使用的主题。

提交并推送更改到github，几分钟后导航到您网站的URL。
验证一切是否正常。

如果您现在搜索跟踪ID的源代码，您将能够找到它。 Google Analytics仪表板也会开始显示活动。

以上步骤展示了如何将Google Analytics添加到现有的gh-pages站点中。在创建新的gh-pages站点时，您也可以使用相同的代码。虽然似乎自动生成页面生成器不再存在 - 在Github中找不到“自动页面生成器”按钮。

# 也许有一种方法可以通过配置_config.yml本地使用GA4。我无法做到这一点，不得不采用通用分析。

参考资料

https://www.analyticsmania.com/post/downgrade-from-google-analytics-4-to-universal-analytics/

- Sahil Singh

在1.2版本中，选择“同时创建Google Analytics 4和Universal Analytics属性”是否可行，或者我们应该只创建一个Universal Analytics属性？ - codesnerd

1

@codesnerd 我只选择了通用分析（尽管我刚刚注意到我上传的图片显示了两个单选按钮都被选中）。只要您获得表单ID为UA-XXXXXXXXX-X，两者都可能有效。GA4 ID具有不同的格式。 - Sahil Singh

6

我使用README.md文件作为我的GitHub个人页面的源。我还使用GitHub支持的主题之一“cayman”。除了_config.yml（除非您想修改受支持的主题），存储库中不需要更多文件。

要添加Google Analytics，我只需按照“cayman”存储库中的建议（https://github.com/pages-themes/cayman）操作：

如果在站点的_config.yml中设置以下变量，则Cayman将予以尊重：

google_analytics：[您的Google Analytics跟踪ID]

就这么简单！ Google Analytics的所有工作都在其侧面完成！对于那些寻求快速设置带有Google Analytics的GitHub Pages的人来说，这可能是一个可行的选择。

- Sergei Zaitseff

6

您可以像为其他网站添加 Google Analytics 一样将其添加到 Jekyll 网站中。

首先，在设置好 Google Analytics 账户后，导航至“管理”选项卡。

navbar

接下来，在左侧的帐户面板下，单击：创建新帐户。

add account

在 Google Analytics 中，一个帐户代表着您想要跟踪的页面集合。根据需要设置网站的帐户。

在创建完您的帐户后，您会收到一个包含 跟踪 ID 和 JavaScript 代码片段的页面，供您放置到您想要跟踪的页面中。只需在所有您想要跟踪的页面中放置此代码片段即可。或者，如果您使用默认布局，请将此片段放置在适当位置。

另外，因为您正在 GitHub Pages 上托管，除非您需要非常详细的分析，否则不需要 Google Analytics。如果您只关心页面浏览量，GitHub 已经提供了这个功能。

- 0xcaff

4

我很确定GitHub的跟踪仅限于GitHub存储库本身（包括源代码）的流量。我的GitHub Pages网站存储库只显示对GitHub URL的访问量。 - Nick McCurdy

5

如果您正在使用从github README.md自动生成的github页面，我发现以下是最简单的方法：只需编辑您的_config.yml文件，使其看起来像这样（使用您自己的Google Analytics UA id）：

theme: jekyll-theme-cayman
title: My Site
description: My site description
url: https://example.com
author: MyName
plugins:
  - jekyll-seo-tag
google_analytics: UA-xxx

接下来，在您的代码库根目录下添加一个名为Gemfile的新文件，并将以下内容添加到文件中：

source "https://rubygems.org”
gem "github-pages", group: :jekyll_plugins
gem 'jekyll-seo-tag'

请稍等片刻并刷新您的github页面，然后查看页面源代码。验证SEO插件是否已插入您的分析JavaScript代码。更多信息请参见：https://github.com/jekyll/jekyll-seo-tag 根据安装说明，我不需要在HTML中添加{% seo %}，幸运的是，因为我没有HTML。Github似乎已经考虑到了这一点。

- Json

2

对于我来说，之前在答案中提到的通过将google_analytics: UA-xxxxxxxx-x添加到_config.yml来配置Google Analytics 4（以前是Web+App）无法实现。

因此，我不得不在.md文件中放置Google Analytics建议的js代码。

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

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

在 .md 文件中，放在 script 标签中的任何内容都不会被渲染。

- raga

我因为同样的原因从Google Analytics 4降级到Universal Analytics。Universal Analytics提供形式为UA-xxxxxxxxx-x的跟踪代码，而GA4则没有。https://www.analyticsmania.com/post/downgrade-from-google-analytics-4-to-universal-analytics/ - Sahil Singh

0

在HTML输出的中包含全局站点标签

一旦您设置了Google Analytics帐户，详细说明将包括在“数据流”选项卡下-选择您的数据源，然后选择全局站点标签（gtag.js）的“标记说明”

全局站点标签

脚本将类似于以下内容（在我的示例中使用XXXXXXXXXXX替换id）：

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

  gtag('config', 'XXXXXXXXXXX');
</script>

将HTML脚本保存在项目目录中的文件中（例如，作为“GA_script.html”）

将HTML文件添加到页眉

在Rmarkdown YAML中，添加对您特定脚本的引用（在此处查看参考）：

output:
  html_document:
    includes: 
      in_header: GA_script.html

- Matt L.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- exexzian · Accepted Answer

更新: 为其他人添加了步骤说明

解决方法：
必须将要跟踪的链接username.github.io(我想要跟踪的链接)包含在Google Analytics网站部分中。

您可以查看GitHub帮助页面这里

输入图像描述

之后，我会提供一个跟踪器ID。

注意: 您可以在Google Analytics管理面板中轻松更改或添加更多网站。

更新2: - 将Google Analytics跟踪ID添加到已创建的Github页面 (由@avi-aryan请求)

浏览到您的github页面分支-它可能是类似于-
(https://github.com/YourUserName/YourRepository/tree/gh-pages)
然后编辑列出的文件中的index.html
现在，在index.html的HEAD标记内，粘贴您的Google Analytics跟踪ID脚本(如果已经注册了Google Analytics，则可以在管理下的跟踪信息选项卡中浏览它)