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

Posted

技术标签:

【中文标题】如何将 Google Analytics 跟踪 ID 添加到 GitHub 页面【英文标题】：How to add Google Analytics Tracking ID to GitHub Pages 【发布时间】：2013-06-16 22:40:44 【问题描述】：

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

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

现在我该怎么办？

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

【问题讨论】：

不少建议的方法，但我无法让/确认其中任何一个工作。我希望它会在 24 小时左右开始工作。 /总台。我的 Brave 浏览器阻止了我网站上的跟踪器。它一直在工作。对我来说，另一个令人困惑的事情是（半）最近从 ga（谷歌分析）到 gtag（谷歌标签）的转变。显然你现在只需要 gtag() 东西，不再需要 ga() 东西。乐趣。这些链接帮助我诊断出我的问题：chrome.google.com/webstore/detail/tag-assistant-by-google/… 和 analyticsmania.com/post/google-tag-manager-vs-google-analytics @ChrisEmerson 这是一些有用的更新 :) 我有类似的访问没有注册的问题，原来是 AdBlock 负责的。 【参考方案1】：

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

解决了： 必须在 Google Analytics（分析）网站部分中包含 username.github.io（我要跟踪的链接）。

你可以查看GitHub帮助页面here

之后，我获得了一个 Tracker ID。

注意：您可以从 Google Analytics（分析）管理面板轻松地在 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，那么您可以在 admin 下浏览它，然后在 跟踪信息标签）

【讨论】：

我已经添加了它们，但是谷歌分析说没有安装跟踪。我在 G-Analytics 中指定的页面是 http://avi-aryan.github.io @OhadR 哦，如果对你没有帮助，我很抱歉 仅供参考：我使用相同的逻辑来编辑 index.html 以添加 twitter 的转换跟踪。谢谢！ @sc28 你什么时候在你的页面上加入了分析？谷歌通常会在一段时间后更新仪表板 @sc28 不，通常需要一两天.. 一两天后检查【参考方案2】：

对于任何感兴趣的人，如果您在 GitHub 页面上使用 Jekyll，我刚刚写了一篇文章，展示了如何正确地 add Google Analytics Tracking ID to Jekyll。

    您可以在管理 > 属性 > 跟踪信息 > 跟踪代码下找到您的 Universal Analytics 跟踪代码。

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

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

    最后，打开_layouts/head.html，在</head>标签的末尾添加% include analytics.html %。 Google 建议使用此展示位置正确跟踪您网站上的所有页面。

【讨论】：

谢谢你，很棒的帖子。值得注意的是，在 GitHub Pages 中自动设置了jekyll.environment == 'production'（github.com/jekyll/jekyll/issues/1219），而 Jekyll 默认环境为'development' 我有_layouts/default.html，但效果很好（我不熟悉 Jekyll） 或者，直接复制到head.html【参考方案3】：

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

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

替换

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

与

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

你准备好了！

如果您的网站是在生产环境中构建的，现在将显示谷歌分析代码。如需参考，请参阅此处的模板源代码 - https://github.com/jekyll/minima

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

【讨论】：

实际上不需要第 2 步。查看github.com/pages-themes/minimal的文档【参考方案4】：

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

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

【讨论】：

它可以工作，但我所有的实时数据记录都来自 Ashburn VA。即使我在本地访问该页面......离弗吉尼亚州很远。 @jtlindsey - 您的图像/像素是否有可能被缓存在弗吉尼亚州 Ashburn 的 CDN 中？ @pulkitsinghal 我不完全确定，那篇文章差不多是一个月前的事了，我已经使用了几个星期，数据始终是 Ashburn VA。现在回顾我的数据，数据显示的位置不是实时设置的，但是历史上有来自世界各地的查询，所以我不确定错误在哪里。我可能会删除它，因为数据不正确。【参考方案5】：

通过 _config.yml 添加分析。

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

Google 分析有两种类型 - 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 分析仪表板也将开始显示活动。

以上步骤展示了如何将谷歌分析添加到现有的 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/

【讨论】：

在 1.2 中，可以选择“同时创建 Google Analytics（分析）4 和 Universal Analytics 媒体资源”还是只创建 Universal Analytics 媒体资源？ @codesnerd 我只选择了通用分析（尽管我刚刚注意到我上传的图片显示了两个都选中的单选按钮）。只要您获得UA-XXXXXXXXX-X 形式的ID，两者都可能有效。 GA4 ID 的格式不同。【参考方案6】：

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

首先，在设置您的 Google Analytics（分析）帐户后，导航到管理选项卡。

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

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

创建帐户后，您将被发送到一个页面，该页面告诉您您的Tracking ID，并有一个 javascript sn-p 供您放置在您想要跟踪的页面上。只需将此 sn-p 放入您要跟踪的所有页面中。或者，如果您使用默认布局，请将这个 sn-p 放在其中的某个位置。

顺便说一句，由于您托管在 GitHub Pages 上，因此您不需要 Google Analytics（分析），除非您需要非常详细的分析。 If all you care about is page views GitHub has this.

【讨论】：

我很喜欢 GitHub 的跟踪仅用于 GitHub 存储库本身的流量（包括源代码）。我的 GitHub Pages 站点 repo 仅显示 GitHub URL 的流量。【参考方案7】：

我使用 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 快速设置 GitHub 页面的人来说，这可能是一个可行的选择。

【讨论】：

【参考方案8】：

如果您使用的是 github README.md 中自动生成的 github 页面，我发现这是最简单的方法： 只需将您的 _config.yml 编辑为如下所示（使用您自己的谷歌分析 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 似乎已经想到了这一点。

【讨论】：

【参考方案9】：

对于我来说，我无法通过将 google_analytics: UA-xxxxxxxx-x 添加到您的 _config.yml 来配置 Google Analytics 4（prev Web+App），如前面的答案之一所述。

所以只好把谷歌分析推荐的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 中的脚本标记中放置的任何内容都不会被渲染。

【讨论】：

出于同样的原因，我从谷歌分析 4 降级为通用分析。 Universal Analytics 提供 UA-xxxxxxxxx-x 形式的跟踪代码，GA4 没有。 analyticsmania.com/post/…【参考方案10】：

在 html 输出中包含一个全局站点标记

设置 Google Analytics（分析）帐户后，“数据流”选项卡下会包含详细说明 - 选择您的数据源，然后为 全局网站标记 (gtag.js) 选择“标记说明”

全局网站代码

脚本将如下所示（在我的示例中将 id 替换为 XXXXXXXXXXX）：

<!-- 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

【讨论】：

【参考方案11】：

这似乎是 Jekyll Minima 中的一个错误。请参阅这些 GitHub 问题以供参考：

feat: Support GA4 - Google Analytics 4 properties Google Analytics data not received

【讨论】：

以上是关于如何将 Google Analytics 跟踪 ID 添加到 GitHub 页面的主要内容，如果未能解决你的问题，请参考以下文章

在 Google Analytics 中使用 Hashtag # 新的 analytics.js 跟踪代码

当我们将 Google Analytics 添加到 iOS 应用程序时，如何指定应该和不应该将哪些内容作为会话（而不是事件）进行跟踪

在 Google Analytics 中跟踪登录事件

Google Analytics iOS：它如何跟踪用户？

php 将Google Analytics跟踪代码添加到WordPress的简单插件

php 将Google Analytics跟踪代码添加到WordPress的简单插件