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

Question

可能是一个简单的问题，但我现在对将 Google Analytics跟踪ID 添加到 GitHub页面感到怀疑。

我正在使用GitHub自动页面生成器创建我的GitHub页面，但它要求“Google Analytics跟踪ID”。我尝试使用Google Analytics注册，但在那里要求提供网站网址。

现在该怎么办？

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

Answer 1

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

解决了它：
必须在Google Analytics网站部分中添加username.github.io（我想跟踪的链接）。

您可以查看GitHub帮助页面here

---

---

之后我获得了跟踪器ID。

---

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

---

更新2： - 将Google Analytics跟踪ID添加到已创建的Github页面（根据@avi-aryan的要求）

1. 浏览你的github pages分支 - 就像 - （https://github.com/ YourUserName / YourRepository / tree / gh-pages）
   
2. 然后从列出的文件中编辑index.html
3. 现在位于HEAD的{​​{1}}标记内 - 粘贴您的Google Analytics跟踪ID脚本（如果已经注册了Google Analytics，那么您可以在 admin 下浏览它然后跟踪信息标签）

Answer 2

对于任何有兴趣的人，如果你使用Jekyll和GitHub页面，我只是写了一篇文章，展示了如何正确add Google Analytics Tracking ID to Jekyll。

1. 您会在Admin＆gt;下找到您的Universal Analytics跟踪代码。物业＆gt;跟踪信息＆gt;跟踪代码。

2. 在Jekyll网站目录中的analytics.html文件夹中创建一个名为_includes的新文件。

3. 将Google Analytics跟踪ID代码添加到analytics.html。

4. 最后，打开_layouts/head.html，然后在结束{% include analytics.html %}标记之前添加</head>。 Google建议此展示位置正确跟踪您网站上的所有网页。

Answer 3

最好使用GA-Beacon。即使访问过的链接不是html文档，GA-Beacon也可以跟踪所有GitHub仓库。

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

Answer 4

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

1. 将google_analytics: UA-xxxxxxxx-x添加到_config.yml
2. 创建一个文件_includes / google-analytics.html并在其中添加google analytics js代码。

替换

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

带

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

你就定了！

如果您的网站是在生产环境中构建的，那么现在将显示Google Analytics代码。有关参考，请参阅此处的模板源代码 - https://github.com/jekyll/minima

如果您通过引用模板的源代码并替换相应的文件来使用其他模板，则可以使用相同的方法。

Answer 5

您可以像使用任何其他网站一样将Google Analytics添加到Jekyll网站。

首先，在设置Google Analytics帐户后，请导航至管理标签页。

接下来，在帐户面板的左侧，点击：Create New Account。

在Google Analytics中，帐户代表您要跟踪的一组网页。根据需要设置网站的帐户。

创建帐户后，您将收到一个页面，该页面会告诉您Tracking ID，并有一个JavaScript代码段供您放置要跟踪的页面。只需将此代码段放在您要跟踪的所有页面中即可。或者，如果您使用默认布局，请将此代码段放在其中。

顺便说一下，由于您在GitHub页面上托管，除非您需要非常详细的分析，否则您不需要Google Analytics。 If all you care about is page views GitHub has this.

Answer 6

通过 _config.yml 添加分析。

所有 GitHub 主题 (supported themes) 本身都支持谷歌分析。 您只需提供跟踪代码 (UA-XXXXXXXXX-X)。

Google 分析有两种形式 - Google 分析 4 (GA4) 和通用分析。为此，您将不得不使用后者。 GA4 不起作用 ^#。

1. 创建一个新的通用谷歌分析属性（并且非 GA4 属性）。默认情况下，您创建的跟踪属性的类型为 GA4。您必须选择“创建 Universal Analytics 媒体资源”才能使该媒体资源成为通用媒体资源。 一旦创建了 GA4 属性，就无法将其转换为通用属性。您只能在创建新媒体资源时执行此操作。

1.1 在高级选项中开启通用分析。

1.2 配置通用分析选项。

1.3 复制此新创建的媒体资源的跟踪 ID。

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

   google_analytics：UA-XXXXXXXXX-X

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

3. 提交更改并将更改推送到 github，几分钟后导航到您网站的 URL。

4. 确认一切正常。

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

上述步骤显示了如何将 google 分析添加到现有的 gh-pages 站点。您也可以在创建新的 gh-pages 站点时使用相同的代码。虽然似乎不再存在自动页面生成器 - Can't locate "automatic page generator" button in Github

#也许有一种方法可以通过配置_config.yml来原生使用GA4。我无法做到这一点，不得不求助于通用分析。

参考文献

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

Answer 7

如果您使用的是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插件已插入分析Java脚本。 此处更多信息：https://github.com/jekyll/jekyll-seo-tag

幸运的是，根据安装说明，我不必在html中添加{％seo％}，因为我没有html。 Github似乎已经想到了这一点。

Answer 8

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

要添加Google Analytics（分析），我只是遵循了“开曼”存储库（https://github.com/pages-themes/cayman）中的建议：

如果在您网站的_config.yml中设置，Cayman将遵循以下变量：

google_analytics：[您的Google Analytics（分析）跟踪ID]

句号！还要别的吗！一切都在Google Analytics（分析）方面发挥作用！ 对于那些希望通过Google Analytics（分析）快速设置GitHub Pages的人来说，这可能是一个可行的选择。

Answer 9

与我一起，我无法通过将google_analytics：UA-xxxxxxxx-x添加到您的_config.yml中来配置Google Analytics（分析）4（上一个Web + App）。

所以我不得不将Google Analytics（分析）推荐的js放在.md文件中。

<!-- 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标签中放置的任何内容都不会呈现。

Answer 10

在 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 中，添加对您的特定脚本 (see ref here) 的引用：

output:
  html_document:
    includes: 
      in_header: GA_script.html

Answer 11

要将Google Analytics跟踪ID添加到现有页面，您无需将跟踪javascript代码添加到index.html。您只需修改params.json分支的根目录中的gh-pages。

params.json

{
  "name":"Datastream.github.com",
  "tagline":"my personal blog docs",
  "body":"some text goes here",
  "google":"",
  "note":"Don't delete this file! It's used internally to help with page regeneration."
}

您需要将“google”字段设置为Google Analytics ID的任何内容（以UA开头 - ）