在 CodePen 学习更有效地使用 Google Analytics

大多数人如何使用 Google Analytics：您将默认跟踪代码片段复制粘贴到您的模板中。查看传入的页面浏览量数据。这很好，但对于许多网站来说，这不是最有用的分析。Google Analytics 几乎可以跟踪任何东西。它非常灵活且功能强大。Philip Walton 和我合写了这篇文章，向您展示如何进行一些自定义的 GA 操作，以帮助您收集您可能不知道可以收集的数据，以及如何以有用的方式查看这些数据。

开始

对于任何 Web 应用，您都需要某种分析，这一点相当明显。在最基本的层面上，您需要了解有多少人在使用该应用，以及这个数字是在上升还是下降。

在CodePen 上的选择是 Google Analytics，因为团队中的大多数成员之前都使用过它。它是免费且易于安装的。团队在安装 Google Analytics 时做了大多数人都会做的事情：我们复制粘贴了默认的跟踪代码片段，然后就这样了。没有任何自定义。

数据开始传入，几天后，对人们在 CodePen 上访问的页面有了大致了解。

问题在于，CodePen 并不是一个真正基于页面浏览量的网站，比如出版物。人们访问哪些页面并不能说明用户如何与 CodePen 交互。更有趣的是了解人们在这些页面上做了什么，以便可以进行优化来改善他们的体验。

不幸的是，团队中没有人真正知道如何使用 Google Analytics 获取所需的信息，因此很长一段时间什么也没做。

长话短说：Chris 去年秋天在 CSSDevConf 上遇到了 Philip。Philip 说很多开发者都处于同样的境地——没有利用触手可及的免费、强大的工具。Philip 的工作之一就是教授开发者，因此在一场史诗般的胜利风暴中，他们合作在 CodePen 中使用更智能的分析方法，并与所有人分享。

CodePen 希望从分析中获得什么

如果您还没有弄清楚要解决什么问题或要回答什么问题，那么分析数据本身就没有意义。CodePen 创建了一个他们认为对他们有用的问题列表，这些问题可以回答他们对应用使用情况的真实问题。

以下是一些快速问题

• 有多少用户登录（与未登录/匿名使用网站的用户相比）？是否有方法仅报告登录用户的交互？
• 在登录用户中，有多少用户拥有 PRO 帐户？PRO 用户的交互与非 PRO 用户有何不同？
• 所有用户中，有多少用户最近活跃？MAU（月活跃用户）是多少，正如他们所说？
• 当用户更改编辑器的布局时，他们更喜欢哪种布局：顶部、左侧或右侧？
• 当用户为笔点赞时，他们处于什么视图？他们发表评论时又如何呢？这些操作可以从多个位置执行。
• 当用户点击指向其他网站的链接时，他们会去哪里？

了解 Google Analytics 的工作原理

有几个关键概念可以使您更清楚地了解 Google Analytics 的其他所有内容。

一切都源于了解如何将数据发送到 Google Analytics。然后，了解如何以有意义的方式获取这些数据。

将数据发送到 Google Analytics

您可以发送几乎任何您想要的东西！

正常情况（默认跟踪代码片段）发送的是pageview。您实际上所做的只是发送一个 HTTP 请求，其中一些键/值数据编码在 URL 或 POST 主体中。键是诸如页面标题之类的内容，例如“在 CodePen 上浏览笔”。

使用默认跟踪代码片段，您将在最后看到这两行

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

第一行创建一个跟踪器对象，它实际上只是一个 JavaScript 对象，存储我们上面讨论的键/值数据。第二行通过 HTTP 请求将这些键/值数据发送到上一行中使用的“UA-XXXXX-Y”编号指定的 Google Analytics 帐户（技术上是“属性”）。

Google Analytics 接收这些 HTTP 请求（称为“命中”）并处理它们。根据每次命中中的数据以及接收命中时间和顺序，Google Analytics 能够将数据组织成用户、会话和交互的层次结构。

用 CodePen 的术语来说

• 用户是指访问 CodePen 网站的任何人。
• 交互是指他们在网站上执行的操作（例如，访问他们的个人资料页面或点击笔上的“点赞”按钮）。
• 会话是指同一用户在特定时间内执行的一组交互。如果用户登录 CodePen，创建一支笔，然后离开，则这将是一个会话。如果他们在当天晚些时候回来，则这将是另一个会话。

一个用户可以有多个会话，一个会话可以有多个交互。

报告数据

一旦 Google Analytics 将您的数据组织成用户、会话和交互，您就可以查询这些数据并获取报告。

Google Analytics 有很多内置报告。您不仅限于这些报告。

实际上，提高 Google Analytics 使用效率的最佳方法可能是学习如何创建自己的报告（称为“自定义报告”），以便您可以查询任何您想要的数据。如果您正在向 Google Analytics 发送特定于您的应用程序的自定义数据，那么您不可能仅使用内置报告来回答所有问题。

Google Analytics 中的每个报告（无论是内置的还是自定义的）都是查询一组维度和指标的结果。由于创建自定义报告需要自行指定维度和指标，因此了解它们是什么非常重要。

指标是对数据的定量测量，例如访问的页面总数（页面浏览量）或网站平均停留时间（平均会话时长）。指标始终为数字。它们通常是计数，但也可以是平均值或比率。

维度是您指标的横截面，它们是您进一步细分数据的方式，例如，您可能希望按页面 URL 细分页面浏览量总数，以查看哪些页面很受欢迎，或者您可能希望按人们使用的不同浏览器细分网站平均停留时间，以查看是否存在任何相关性。在这些情况下，页面和浏览器是维度。

数据以表格形式返回。维度值通常位于左侧的列中，其对应的指标值位于右侧的列中。您可以选择应用过滤器以有条件地从结果中排除行。

自定义报告示例

下表是一个自定义报告示例，显示了过去七天的数据，说明了所有这些概念。该报告查询了会话和平均会话时长指标以及浏览器和操作系统维度。然后它过滤结果以仅包含操作系统值为“Windows”的行。

浏览器	操作系统	会话	平均会话时长
Chrome	Windows	598,713	00:03:54
Firefox	Windows	127,904	00:02:49
Internet Explorer	Windows	23,864	00:02:39
Opera	Windows	11,436	00:03:04
Edge	Windows	10,208	00:03:00

如您所见，Chrome 是 Windows 用户中最受欢迎的浏览器，并且 Chrome 用户在 CodePen 上花费的时间比使用其他浏览器的用户更多。

获取 CodePen 特定问题的答案

我们列表中的前两个问题是关于区分用户：登录用户与匿名用户，以及 PRO 用户与非 PRO 用户。

由于 Google Analytics 对 PRO 帐户或 CodePen 登录系统一无所知，因此它无法默认跟踪此信息。但是我们可以向其提供这些信息！

跟踪自定义数据

如果 Google Analytics 没有内置字段来跟踪您想要的信息，您可以创建自己的字段。这些被称为“自定义维度和指标”。

我们已经提到，维度是将指标细分为相关类别的途径。用户的登录状态以及他们是否拥有 PRO 帐户最终只是用户指标的一个子类别，因此我们创建了自定义维度来跟踪这两者。

发送自定义维度数据最简单的方法是在跟踪器对象上设置其值。由于从跟踪器发送的所有点击都包含其当前存储的所有键/值数据，因此在跟踪器上设置自定义维度将确保这些值与所有未来的点击一起发送。

以下是我们对跟踪代码所做的更改，以设置“已登录”和“PRO”自定义维度

ga('create', 'UA-XXXXX-Y', 'auto');

ga('set', {
  dimension1: __isUserLoggedIn__,
  dimension2: __isUserPro__
});

ga('send', 'pageview');

变量__isUserPro__ 和 __isUserLoggedIn__ 是从 Rails 传递到视图模板的布尔值（最终转换为 JavaScript 变量），键dimension1 和 dimension2 对应于我们在 Google Analytics 帐户设置中显示的自定义维度索引。

现在我们已将这两个自定义维度与所有点击一起发送，我们可以在任何报告中查询“PRO”或“已登录”状态。

使用自定义维度的自定义报告示例

这是一个报告，显示了根据“PRO”和“已登录”自定义维度细分的平均会话时长和每会话页面数指标。

PRO	已登录	平均会话时长	每会话页面数
是	是	00:09:08	6.51
否	是	00:07:50	6.12
否	否	00:02:43	2.53

现在我们掌握了这些数据，我们可以看到 PRO 和登录用户在使用 CodePen 上花费的时间比匿名用户多得多。

以下是一个相同类型数据的示例，仅查看跨多个维度的跳出率

更准确地跟踪跨浏览器和设备的用户

默认情况下，Google Analytics 通过在浏览器的 Cookie 中存储随机 ID 值来识别用户。这有助于识别同一浏览器上的回访用户，但如果用户在多个不同的浏览器或设备上访问 CodePen，则效果不佳，并且由于使用 CodePen 的人经常将其用于跨浏览器或跨设备测试，因此这种情况经常发生。

如果您的网站有自己的用户识别方式（例如登录系统），Google Analytics 允许您将其作为用户 ID发送，除了存储在 Cookie 中的客户端 ID。然后，Google Analytics 可以更好地确定两个用户实际上是同一个人，并且不会重复计算他们。

要在 Google Analytics 中使用用户 ID 功能，您只需在您的帐户中启用此设置，然后在跟踪器对象上设置该值即可

ga('create', 'UA-XXXXX-Y', 'auto');

ga('set', {
  userId: __userID__,
  dimension1: __isUserLoggedIn__,
  dimension2: __isUserPro__
});

ga('send', 'pageview');

衡量用户活动

我们最初列表中的第三个问题是弄清楚我们所有用户中有多少人在最近活跃。Google Analytics 有一个活跃用户报告，该报告为您提供过去 1 天、7 天、14 天和 30 天的活跃用户指标。

例如，30 天活跃用户指标是过去 30 天内至少与您的网站互动过一次的唯一用户的总数。在 CodePen，我们可以查看我们的数据库以了解曾经创建的用户帐户总数，但一个更好的指标来了解我们的“真实”用户群是了解其中有多少人在最近活跃。

如上图所示，2 月 19 日，260 万不同的人在之前的 30 天内至少使用过一次 CodePen。1 月 1 日，这个数字仅为 190 万。其中一些差异可能是由于假日流量较低造成的，但总的来说，很明显 CodePen 活跃用户数量正在增加。

使用事件跟踪用户交互

默认跟踪代码段会捕获页面加载，但它不会跟踪用户在该页面上的任何操作。为了捕获更多相关数据，我们需要发送更多相关的交互点击。我们使用事件来做到这一点。

拥有我们想要回答的初始问题列表，使得确定要开始跟踪哪些事件变得非常容易。以下是我们将在本节中重点介绍的两个事件

• 当用户更改编辑器的布局时，他们更喜欢哪种布局：顶部、左侧或右侧？
• 当用户为 Pen 点赞或评论时，他们处于哪个视图？

从第一个问题开始，CodePen 编辑器由三个窗格（HTML、CSS 和 JavaScript）组成，这些窗格可以位于窗口的顶部、左侧或右侧。可以通过点击屏幕右上角的“更改视图”按钮，然后选择“编辑器布局”下的选项之一来更改此布局。

由于我们有 JavaScript 代码在有人点击这些选项之一时运行，因此我们可以向 Google Analytics 发送事件并包含所选的编辑器布局设置。

以下是我们在代码中执行此操作的基本要点

function handleEditorLayoutChange(placement) {

  // Do the change...

  // Then report it:
  ga('send', 'event', {
    eventCategory: 'Editor Layout',
    eventAction: 'change',
    eventLabel: placement
  });

}

现在我们已经开始收集这些事件，我们可以针对指标总事件数和维度事件标签运行报告。我们还必须过滤结果，使其仅包含事件类别维度设置为“编辑器布局”且事件操作维度设置为“更改”的事件。以下是过去 30 天的结果

事件标签	总事件数
左侧	73,186 (50.4%)
右侧	37,204 (25.6%)
顶部	34,794 (24.0%)

如您所见，大多数时候，人们更改编辑器布局是为了将代码窗格显示在左侧。

为了回答第二个问题，即用户从哪个视图为 Pen 发表评论或点赞，我们在用户发布评论或点赞 Pen 时添加了发送事件的逻辑。

用户所在的“视图”可以通过检查 URL 找到。例如，与模式/<profiled-username>/pen/<pen-id>匹配的 URL 为“编辑器视图”，与模式/<profiled-username>/details/<pen-id>匹配的 URL 为“详细信息视图”。

为了确定用户通常从哪个视图发表评论，我们查询了指标总事件数和维度页面（URL 路径）。然后我们过滤结果，使事件类别为“评论”，事件操作为“已发布”。最后，我们必须使用正则表达式获取与“Pen 视图”模式匹配的所有 URL 的结果，在第二个查询中，我们使用不同的正则表达式获取与详细信息视图模式匹配的所有 URL。

根据过去 30 天 CodePen 的数据，我们可以看到，用户从 Pen 视图添加评论的频率是他们从详情视图添加评论频率的三倍。

页面	总事件数
/<profiled-username>/pen/<pen-id>	2940 (73.5%)
/<profiled-username>/details/<pen-id>	1058 (26.5%)

使用细分深入分析数据

我们已经展示了如何使用维度和过滤器将指标细分为不同的类别。这非常强大，但在这两种情况下，你的查询仍然在你的整个数据集上运行。

另一种深入分析数据的方法是使用细分。

与报告过滤器在查询运行之后从结果列表中排除单个行不同，细分是在运行查询之前过滤掉会话或用户。例如，Google Analytics 提供了一些内置细分，例如“自然流量”和“已购买”。但是，就像内置报告一样，最有用的细分将是特定于你的应用程序数据的细分。

例如，在 CodePen 中，我们可能希望创建一个细分，只包含（或排除）以下任何内容

• 首次访问 CodePen 的用户
• 至少收藏了一个 Pen 的用户
• 使用教授模式的 PRO 用户
• 用户未创建新 Pen 的会话
• 用户在平板电脑上编辑 Pen 的会话

请记住，Google Analytics 使用用户、会话和交互的数据模型。通过细分，你可以从查询操作的数据中删除整个会话或用户（以及属于它们的全部交互）。真正强大的功能在于，你可以将细分应用于任何内置报告或任何自定义报告。

为了提供一个仅对数据的一部分运行报告的具体示例，请考虑以下问题：PRO 用户在不创建新 Pen 时最常访问哪些页面？

以下是如何在 Google Analytics 中构建该自定义细分的屏幕截图

以下结果（按特定用户过滤 Pen 的页面）。

页面	页面浏览量
/	71565
/login	7789
/pens/	6998
/picks/2/	2145
/posts/	2069
/patterns/	1129

要问另一个稍微复杂一些的细分问题：从百分比上看，PRO 用户收藏的 Pen 比非 PRO 用户多吗？

要回答这个问题，我们必须创建四个细分并运行四个查询。对于下表中的每个细分，我们都针对过去 30 天的指标会话运行了查询（请注意，这些查询没有维度）

细分	会话
来自 PRO 用户的会话	71337
来自 PRO 用户且包含“收藏”事件操作的会话	4945
来自已登录的非 PRO 用户的会话	832597
来自已登录的非 PRO 用户且包含“收藏”事件操作的会话	36610

然后我们进行一些计算，得到百分比

包含“收藏”事件操作的 PRO 用户会话百分比	6.93%
包含“收藏”事件操作的非 PRO 用户会话百分比	4.39%

如你所见，PRO 用户在会话期间收藏 Pen 的可能性几乎比非 PRO 用户高 60%。

使用插件跟踪常见用户交互

我们最后一个问题是关于用户点击了哪些链接跳转到其他网站。我们想要这些数据的主要原因是查看人们在我们的招聘版块上点击了哪些链接。

如果你之前曾在网站上安装过 Google Analytics，你可能已经注意到它会跟踪用户点击网站上其他页面的链接，但它不会跟踪点击外部网站的链接。原因是 Google Analytics 使用第一方 Cookie 来识别新用户和回头客，而第一方 Cookie 只能在同一个域名内共享。

如果你想跟踪用户点击了哪些外部链接，你必须使用事件来跟踪这些点击。

我们没有自己实现出站链接跟踪，而是使用了autotrack 插件来为我们完成此操作。Autotrack 带有一组用于跟踪常见用户交互的插件。它可以帮助解决很多问题，但我们主要想要的是outboundLinkTracker插件。

为了安装 autotrack，我们将`autotrack.js`文件添加到我们的主要 JavaScript 包中，并在跟踪代码中添加了以下行。现在全部一起

ga('create', 'UA-XXXXX-Y', 'auto');

ga('require', 'outboundLinkTracker');

ga('set', {
  userId: __userId__,
  dimension1: __isUserLoggedIn__,
  dimension2: __isUserPro__
});
});

ga('send', 'pageview');

设置出站链接跟踪后，我们可以为指标总事件和维度事件标签创建自定义报告，该报告根据维度事件类别等于“出站链接”和事件操作等于“点击”进行过滤。

以下是排名前五的出站链接点击。出于隐私原因，我们对招聘职位 URL 进行了匿名处理。

链接 URL	出站链接点击总百分比
http://blog.codepen.io/	24.29%
<job-posting-link>	11.38%
http://blog.codepen.io/store/	9.44%
<job-posting-link>	7.13%
<job-posting-link>	5.98%

结论

老实说，在 CodePen 升级 Google Analytics 游戏中最令人惊讶和欣慰的部分是需要更改的代码很少。主要包括

• 添加一些自定义维度并更新跟踪器以发送它们
• 在重要位置添加一些事件跟踪
• 构建自定义报告以查看数据

我们添加了 PRO 和已登录用户的自定义维度、autotrack 插件，以及几行事件跟踪代码，从而显著增加了我们可以运行的报告类型。

一旦我们学会了如何创建自定义报告和自定义细分，我们突然感觉自己掌握了主动权，并开始提出问题。以前我们主要只是浏览内置报告，希望从中获得一些见解，但通常都没有。

如果你想改进网站的分析，希望本文能激发你的兴趣，并帮助你了解可能实现的功能。

如果你想了解更多信息，以下是一些你可以开始的地方

• Analytics Academy 课程：这些课程是一系列简短的视频课程，解释了许多 Google Analytics 的核心概念。课程 1 和课程 2 非常适合全面了解平台的工作原理，并帮助你更好地回答特定情况下的问题。
• analytics.js 开发人员文档：侧边栏中“基础知识”部分的指南全面概述了 analytics.js 库的工作原理以及可以实现的功能。还可以查看字段参考，以获取有关可以在跟踪器对象上设置的字段和选项的完整列表。
• 维度和指标参考：创建自定义报告（或发出 API 请求）时，必须告诉 Google Analytics 使用哪些维度和指标，如果你不知道有哪些选项，这将很困难。此工具允许你浏览和搜索所有选项。
• 查询资源管理器：如果要自动运行自定义报告，则需要发出 API 请求。查询资源管理器是一个帮助你构建 API 请求的工具。实际上，对于快速的一次性自定义报告，你通常可以在查询资源管理器中比在 Google Analytics 中更快地完成。

如果需要帮助，Google Analytics 开发人员的帮助页面提供了一些链接，可以引导你找到正确方向。

视频中还有更多内容！

以下是我们关于所有这些内容的讨论，以及更多关于 CodePen 和 Google Analytics 的展示