使用自定义维度扩展 CSS-Tricks 上的 Google Analytics

这篇文章的想法是在 Chris 在 致谢（2018 版） 中写下这段话时产生的

我几乎希望我们的 URL 中包含年份，因为我仍然没有办法将分析数据范围限定到只显示今年发布的内容的数据。我可以看到今年最受欢迎的东西，但那是无论它何时发布，而且被我们多年来一直拥有并不断更新的大型指南所主导。

我一直是 CSS-Tricks 的长期读者，但我还没有什么可以贡献的。直到现在。白天作为一名 Google Analytics 专家，这终于是我可以为 CSS-Tricks 做的贡献。让我们扩展 CSS-Tricks 上的 Google Analytics 吧！

输入 Google Analytics 自定义维度

Google Analytics 通过将基本的 Google Analytics 代码片段添加到每个页面，为您提供有关访问者在网站上行为的许多有趣见解。

但 Google Analytics 是一个一刀切的工具。

为了使其对像 CSS-Tricks 这样的特定网站真正有意义，我们可以向我们的 Google Analytics 数据添加额外的元信息。

文章发布的年份是 Google Analytics 没有内置的此类元数据的示例，但它很容易添加，可以使数据更有用。这就是自定义维度发挥作用的地方。

在 Google Analytics 中创建自定义维度

第一步是创建一个新的自定义维度。在 Google Analytics UI 中，单击齿轮图标，单击自定义定义，然后单击自定义维度。

这将显示所有现有自定义维度的列表。单击红色按钮以创建一个新的自定义维度。

让我们为自定义维度起一个描述性名称。在本例中，“年份”似乎很合适，因为这就是我们想要衡量的。

范围很重要，因为它定义了元数据应该如何应用于现有数据。在本例中，文章年份与用户正在查看的每篇文章相关，因此我们需要将其设置为 “命中”范围。

另一个例子是有关整个会话的元数据，例如用户是否登录，这将保存在会话范围的自定义维度中。

好了，让我们保存我们的维度。

创建自定义维度后，Google Analytics 提供了使用 JavaScript 实现它的示例。我们最多可以使用 20 个自定义维度，每个自定义维度都由一个索引标识。在本例中，“年份”是第一个自定义维度，因此它是在索引 1 中创建的（请参阅下面 JavaScript 代码中的 dimension1）。

如果我们定义了其他自定义维度，那么它们将存在于另一个索引中。无法更改自定义维度的索引，因此请注意正在使用的索引。始终可以在概述中找到所有索引的列表

就是这样，现在该编码了！

现在我们必须在代码中提取文章年份并将其添加到有效负载中，以便它与页面浏览量命中一起发送到 Google Analytics。

这是我们需要执行的代码，根据我们在创建自定义维度时提供的代码片段

var dimensionValue = 'SOME_DIMENSION_VALUE';
ga('set', 'dimension1', dimensionValue);

这里有难点。ga() 函数是在加载 Google Analytics 代码片段时创建的。为了最大程度地减少性能损失，它被放置在 CSS-Tricks 页面底部。这是基本 Google Analytics 代码片段的样子

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//#/analytics.js','ga');
ga('create', 'UA-12345-1', 'auto');
ga('send', 'pageview');
</script>

我们需要在代码片段被解析之后和页面浏览量命中发送到 Google Analytics 之前设置自定义维度值。因此，我们需要在这里设置它

// ...
ga('create', 'UA-12345-1', 'auto');
ga('set', 'dimension1', dimensionValue); // Set the custom dimension value
ga('send', 'pageview');

这段代码通常放置在 WordPress 循环 之外，但这就是我们可以访问元信息（如文章年份）的地方。因此，我们需要在循环中将文章年份存储在 JavaScript 变量中，然后在到达页面底部时在 Google Analytics 代码片段中引用该变量。

在循环中保存文章年份

在 WordPress 中，标准循环从这里开始

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

…并在这里结束

<?php endwhile; else : ?>
	<p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

在这些行之间，我们提取年份并将其保存在 JavaScript 变量中

<script>
	var articleYear = "<?php the_time('Y') ?>";
</script>

在 Google Analytics 代码片段中引用文章年份

Google Analytics 代码片段放置在网站的所有页面上，但年份对所有页面都没有意义（例如，主页）。作为优秀的 JavaScript 开发人员，我们将检查变量是否已定义，以避免任何错误。

ga('create', 'UA-68528-29', 'auto');
if (typeof articleYear !== "undefined") {
		ga('set', 'dimension1', articleYear);
}
ga('send', 'pageview');

就是这样！现在 Google Analytics 页面浏览量命中将包含所有已定义年份的页面的文章年份。

自定义维度不适用于历史数据

关于自定义维度（或对 Google Analytics 数据的任何其他修改）需要注意的一点是，它们只适用于从网站收集的新数据。本文中描述的自定义维度是在 2019 年 1 月实现的，这意味着如果我们查看 2018 年的数据，它将不会包含任何自定义维度的数据。

在本文的其余部分，当我们开始查看数据时，这一点很重要。自定义维度被添加到 CSS-Tricks 上的所有帖子，一直追溯到 2007 年，但我们只查看了 2019 年发生（自定义维度实现之后）的页面浏览量。例如，当我们查看 2011 年的文章时，我们不是在查看 2011 年的页面浏览量，而是在查看来自 2011 年的帖子在 2019 年的页面浏览量。当我们开始查看以前年份的帖子时，这一点很重要。

一切都准备好了吗？好的，让我们看看新数据吧！

在 Google Analytics 中查看数据

查看新数据的最简单方法是转到行为 → 网站内容 → 所有页面，这将显示浏览量最多的页面

在表格上方的下拉菜单中，选择“年份”作为次要维度。

这将为我们提供类似于下面的表格，显示所有文章的年份。注意，主页（浏览量第二高的页面）已从表格中删除，因为它没有与之关联的年份。

我们开始更好地理解网站。浏览量最多的页面（远远超过其他页面）是 完整的 Flexbox 指南，它发布于 2013 年。这是关于常青内容的！

次要维度很好，主要维度更好

好的，上面的表格部分地让我们了解了浏览量最多的页面，但让我们翻转维度，使年份成为主要维度。没有标准报告可用于将自定义维度视为主要维度，因此我们需要创建一个自定义报告。

为自定义报告起一个好名字。通过搜索，可以最容易地找到指标（蓝色）和维度（绿色）。

以下是最终自定义报告的外观，包含一些有用的指标和维度。请注意，我们在**年份**下方选择了**页面**。这在稍后会变得有用。

点击保存后，我们会看到所有文章年份的汇总数字。2013年仍然排在首位，但我们现在看到2011年也有一些很棒的内容，这些内容之前没有出现在我们查看的前10个列表中。这表明，2011年没有一篇单独的文章脱颖而出，但总的来说，2011年有一些很棒的文章，这些文章在2019年仍然获得了大量浏览量。

页面浏览量旁边的百分比是总页面浏览量的百分比。请注意，2018年“仅”占所有页面浏览量的8.11%，而2019年占6.24%。这并不奇怪，但表明CSS-Tricks之所以能取得巨大成功，部分原因是多年来发布了大量的**强大参考材料**，用户一直在参考这些材料。

让我们看看2011年。

还记得我们在自定义报告中将**页面**设置在维度中的**年份**下方吗？这意味着我们现在可以点击2011年，并深入到那一年的数据。

看起来2011年发布了许多年鉴页面，这些页面在汇总时获得了大量的页面浏览量。请注意右下角显示的“1-10 of 375”。这意味着2011年的**375篇文章**在2019年被网站浏览过。这太棒了！

回到问题：2018年的大内容

我还没忘：让我们回答Chris的最初问题。

让我们将分析数据范围缩小到今年（2018年）发布的内容。以下列出了前10篇文章

理解双头野兽

在感谢你（2018版）中，Chris还写道

在过去的几年里，我一直试图将CSS-Tricks视为这只双头野兽。一个头是，我们试图制作持久且可供参考的内容。我们希望成为一个你用来寻找前端问题答案的网站。另一个头是，我们希望能够像杂志一样被阅读。订阅，每周来一次，获取RSS订阅源… 无论你喜欢什么，我们希望CSS-Tricks对于作为业余爱好者杂志或行业杂志阅读来说是很有趣的。

让我们用另一个自定义维度来深入研究：**文章类型**。除了内置的文章类型，如文章或页面外，CSS-Tricks还使用了一些自定义文章类型，例如视频、年鉴条目和代码片段。

让我们也像之前处理文章年份一样提取它

<script>
	var articleYear = "<?php the_time('Y') ?>";
	var articleType = "<?php get_post_type($post->ID) ?>";
</script>

我们将它保存到自定义维度索引2中，该索引与年份一样是点击级联的。现在，我们可以构建一个新的自定义报告，如下所示

现在我们知道博客文章占页面浏览量的55%，而 代码片段和年鉴（持久且可供参考的内容）占44%。

现在，博客文章也可以是可供参考的内容，所以可以肯定地说，CSS-Tricks上至少有一半的流量来自可供参考的内容。

从独奏乐队到333位作者的内容团队

当CSS-Tricks在2007年开始时，只有Chris一个人。在撰写本文时，333位作者做出了贡献。

让我们看看这些作者如何利用——你可能猜到了——另一个自定义维度，为CSS-Tricks的页面浏览量做出了贡献！

<script>
	var articleYear = "<?php the_time('Y') ?>";
	var articleAuthor = "<?php get_the_author_meta('ID') ?>";
	var articleType = "<?php get_post_type($post->ID) ?>";
</script>

以下是2019年浏览量最高的10位作者的作者ID。

让我们通过一个辅助维度进一步细分，并在右下角选择500行，这样我们就可以得到所有465行。

然后，我们可以将数据导出到Excel并制作一个数据透视表，统计每年的作者数量。

你喜欢图表吗？我们可以用一些漂亮的v17颜色做一个图表，显示每年的作者数量。

看到每年的作者数量稳步增长真是太棒了。鉴于2019年已经有33位不同的作者，看来2019年可能会创造新的记录。

但是，这些新作者是否产生了任何页面浏览量呢？

我们知道Chris的作者ID是2。让我们制作一个新的数据透视图表，将Chris与所有其他作者进行比较。

…然后随时间推移绘制图表。

看起来CSS-Tricks确实正在成为一个多作者网站。虽然Chris仍然是第一作者，但很高兴看到高质量内容的不断涌现并不完全依赖于他，这对CSS-Tricks来说是一个好趋势，使它能够在未来涵盖更多主题。

但是你可能会问，2011年发生了什么？让我们看看。在自定义报告中，你可以有五个维度的层次。现在我们将坚持使用四个。

现在，我们可以点击2011年，查看作者列表。

你好，作者#25！顺便说一下，那是Sara Cope。你在2011年写了什么很棒的内容呢？

看起来像是我们之前看到的很多年鉴页面。点击它！

确实，很多年鉴页面！确切地说，有107个。很多很棒的内容，而且在2019年仍然获得了大量的页面浏览量。

关于PII数据的一句话

你可能已经注意到，我们使用的是作者的ID，而不是实际的姓名。这样做是有原因的。

完整的姓名被谷歌视为PII（个人身份信息），在Google Analytics中跟踪此类PII数据违反了Google Analytics 服务条款。

这意味着，尽管在Google Analytics报告中直接访问姓名会很方便，但我们不能将完整的姓名发送到Google Analytics。我们需要跟踪ID作为匿名标识符。

对于谷歌（或任何其他第三方）来说，ID毫无意义，他们无法将其与特定的人联系起来。只有我们才能做到。而这正是使用Google Analytics等第三方跟踪服务的正确方式。

总结

Google Analytics是一个强大的工具，可以帮助你了解用户在你的网站上做了什么，只需稍微努力，就可以利用特定于你的网站的元数据，使其变得更加强大。正如本文所示，添加一些简单的元数据（这些数据在WordPress中已经可以使用），可以解锁一个全新的机会，让你分析并添加关于网站内容和访问者的全新维度的知识，就像我们在CSS-Tricks上所做的一样。

---

如果你对另一个类似的旅程感兴趣，该旅程涉及自定义维度，并使Google Analytics数据变得更有用，请查看Chris Coyier和Philip Walton在学习如何在CodePen更有效地使用Google Analytics。中的内容。