使用Google跟踪代码管理器和Google Analytics（分析）跟踪网站搜索的5种方法

在分析访问者方面，网站搜索跟踪一直是我的隐藏宝藏’网站上的行为。为什么？因为您可以快速确定访问者在您的网站上正在寻找什么，以及是否需要提供相关的东西。

Google Analytics（分析）内置 网站搜寻 您可以利用的报告。有时它们易于配置，有时—没那么多。在这篇博客中，我’将介绍如何使用Google跟踪代码管理器和Google Analytics（分析）跟踪网站搜索的各种选项。

您应该根据在网站上实施网站搜索的方式来选择选项。

注意： 这篇博客文章介绍了如何使用Universal Analytics跟踪事件。如果您想熟悉Google Analytics（分析）中的事件跟踪4， 您还可以参考此博客文章.

目录

• 为什么网站搜索报告有价值？
• ＃1具有查询参数的站点站点搜索（无GTM）
• ＃2。没有查询参数的站点搜索
  • ＃2.1。自定义JavaScript变量
  • ＃2.2。更新GA浏览量标记
  • ＃2.3。测试
  • ＃2.4。在GA视图中启用网站搜索跟踪
• ＃3。跟踪自动完成搜索
• ＃4。与开发人员一起跟踪网站搜索’s help
  • ＃4.1。触发器和变量
  • ＃4.2。 GA浏览量标记
  • ＃4.3。在GA视图中启用网站搜索报告
• ＃5。使用DOM抓取跟踪网站搜索
  • ＃5.1。返回搜索页面的变量’s H1
  • ＃5.2。提取搜索查询并将其作为查询参数返回的变量
  • ＃5.3。更新您的GA浏览量标记
  • ＃5.4。在GA视图中启用网站搜索报告
• 其他要做的事情
  • 小写搜索词
  • 零结果搜索
• 最后的话

 

为什么网站搜索报告有价值？

首先，让’首先看看为什么这很重要。如果您已经实施了网站搜索跟踪，则会在 GA > Behavior > Site 搜索.

在这里，您可以找到最受欢迎的搜索字词，使用频率等。

现在，让’接下来介绍为什么以及如何使用这些报告的原因。

＃1我检查搜索是否向访问者显示相关结果。我只是选择最受欢迎的查询，然后在我的网站上自己输入查询，然后检查搜索返回了什么。

• 最佳结果相关吗？
• 有没有废话的结果？也许搜索还返回了一些不应’t appear there? etc.

以这种方式检查搜索非常耗时且乏味，但是’是评估搜索在您的网站上是否真正正常运行的好方法。

如果确实有与关键字X相关的内容，但未在搜索结果中显示，则可以与开发人员讨论如何改进此内容。如果您使用的是流行的内容管理系统（例如WordPress），则可以尝试找到性能更好的搜索插件。

 

＃2。我发现了有关内容的新想法。 虽然您可以使用Google 搜索 Console，Ahrefs等工具进行关键字研究，但您自己的网站搜索也是金矿。如果有大量访问者登陆您的网站并在寻找X（而您没有’没有这种类型的内容），也许它’是时候创建一个了吗？

虽然它’汇总数据相当困难（因为人们可以在使用不同的关键字的同时寻找同一事物），因此您仍然可以大致了解访问者感兴趣的内容。

我说的是什么意思“使用不同的关键字查找相同的内容”？例如，可能有5个人正在寻找增强型电子商务指南，但他们的搜索字词可能如下所示：

• 增强型电子商务
• 电子商务
• 电子商务增强
• gtm ga eec
• 增强型Google Analytics（分析）

然后’功能快速介绍的结尾。那么，我们如何实施呢？答案很经典 “it depends”.

这取决于网站搜索在您的网站上的编码方式以及工作方式。

 

选项1。使用查询参数跟踪网站搜索（不使用GTM）

此选项是最简单的选项（并且完全不需要Google跟踪代码管理器）。尝试使用您的网站’的搜索功能。在搜索字段中输入任何关键字，然后点击 搜索 按钮。

网址更改了吗？

如果是，搜索词是否显示在问号之后？它看起来与此相似吗 yoursite.com/?search=我+关键字？也许像这样 yoursite.com/?s=my+关键字？

如果答案是肯定的，那么您’很幸运。如果搜索查询显示在URL的问号后（但不在＃号后），则表明您的搜索正在使用 查询参数。在我的第一个示例中，yoursite.com/?search=我+关键字），则搜索字词的查询参数为 搜索。在第二个示例中，它是 s.

现在，去 谷歌分析> Admin （点击左下角的齿轮图标）>选择要在其中实施功能的GA视图，然后转到 查看设定.

在该部分中，启用 网站搜索跟踪 并输入您的网站使用的搜索查询参数。对于第一个示例，您应输入 搜索。对于第二个示例，您应输入 s. 如果您的网站使用其他查询参数，请输入其值。

另外，我建议勾选复选框 从URL剥离查询参数

保存更改。如果要在多个GA视图上实现此功能，则需要一个接一个地执行。

那’是的！一段时间后，您将开始看到在行为中填充的数据>网站搜索报告。

 

选项2。跟踪网站搜索而无需查询参数

可以在URL中显示搜索查询的另一种情况是这样的 yoursite.com/search/search+query.

在这种情况下，搜索词不是查询参数，因此，内置的GA功能将无法捕获它。那’Google跟踪代码管理器变得方便的地方。

在这种情况下，有很多方法可以给猫加皮，但我’将向您展示一种可能的方法。这里 ’s the plan:

• 我们将从网址中提取搜索字词
• 将其作为查询参数添加到页面路径
• 我们会将这个新值作为“页面路径”发送给Google Analytics（分析）

＃2.1。自定义JavaScript变量

前两个步骤将通过一个名为的自定义JavaScript小变量完成 cjs–搜索查询的页面路径。这里’s the code:

function() {
  var 页Path = window.location.pathname;
  var 搜索Param = '/pages/search/'; //replace this with your 页 path 之前 the 搜索 term
  if (pagePath.indexOf(searchParam) > -1) {
    return 搜索Param + '?s=' + 页Path.split(searchParam)[1].split('/')[0]
  }
}

在第3行，您需要输入URL的页面路径的外观 之前 the 搜索 term. 让 me illustrate.

• 如果您的搜索网址是 yoursite.com/search/your-search-term，您需要输入 /搜索/ 在Custom JS变量中（连同开始和结束斜杠
• 如果您的搜索网址是 yoursite.com/search/results/your-search-term/，您需要输入 /搜索结果/

如果页面路径不包含 搜索Param 您定义的变量，则此Custom JS变量将返回 未定义。如果页面路径包含您的 搜索Param，则它将以以下结构返回数据 搜索Param？s =您的搜索字词， 例如， / 搜索 / results？s =您的搜索字词.

 

＃2.2。更新GA浏览量标记

让’将自定义JavaScript变量的值作为 页 参数。转到Google标记管理器> Tags >打开您现有的GA Pageview标签。

以下 Google Analytics（分析）设置 字段，单击 在此标记中启用替代设置 复选框。然后点击 更多设置> Fields to Set > Add Field 并输入：

• 栏位名称： 页
• 值： {{cjs–搜索查询的页面路径}} （或您所说的变量）。

保存标签，启用 预览模式 然后刷新您要执行站点搜索的页面。

 

＃2.3。测试

首先，让’s测试GTM预览模式。刷新搜索结果页面后，请在预览模式下单击“页面浏览”事件（或在GA“页面浏览量”代码触发时触发另一个事件）。然后点击Google Analytics（分析）综合浏览量标记，查看是否 页 字段发送的值正确：

然后让’s测试是否正确发送了对Google Analytics（分析）的请求。

启用 GA调试器扩展 （通过点击Chrome浏览器右上角的图标）。然后打开浏览器’s的JavaScript控制台并刷新页面（当您在搜索结果中时）。

在JS控制台中，您会看到很多新内容。找到网页浏览请求可能会花费一些时间，但可能看起来像这样：

然后尝试找到 页面（&dp) 参数并检查其值。它是否包含您的搜索词作为查询参数“s”?

 

＃2.4。在Google Analytics（分析）视图中启用网站搜索跟踪

现在，请执行本博客文章第1章中已解释的相同操作。去 管理员> View > 查看设定 并启用网站搜索跟踪。在这种情况下，您需要输入“s”.

 

选项＃3。跟踪自动完成搜索

某些网站使用自动完成搜索功能（当您开始输入搜索字词，并且搜索结果会在几（几秒钟）秒后开始显示。

简而言之，这里’事情如何运作的过程：

• 访客开始在搜索字段中输入搜索查询
• 如果他/她暂停或停顿了几秒钟，则虚拟网页浏览量将与修改后的内容一起发送到Google Analytics（分析） 页 字段（就像我们在第2章中所做的一样）。

我不会更深入地介绍如何进行设置，但是您可以了解更多信息 这里。我只想提及这种可能性的存在。

 

选项＃4。与开发人员一起跟踪网站搜索’s help

如果上述网站搜索跟踪选项均不适合您，则表示：

• 搜索页面的URL根本不包含搜索词
• 您的搜索不是基于自动完成

在这种情况下，您的计划B是要请开发商’的帮助。每当访问者完成搜索时，您都可以要求他/她将搜索词推送到数据层。

这里’s a sample dataLayer.push 开发人员应在其代码中的某处合并的代码：

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event' : 'search',
  'searchTerm' : 'your 搜索 term' //this should be dynamically replaced with an actual 搜索 query
});
</script>

 

＃4.1。触发器和变量

开发人员实施此代码后，我们需要创建一个 自定义事件触发器 对于 搜索 and a 数据层变量 对于 搜索词.

在GTM中，转到 扳机> New >触发配置> Custom 并输入以下设置：

保存触发器。然后去 变数> User-defined 变数> New > 数据层变量 并输入以下设置：

 

＃4.2。新的GA浏览量代码

去 标签> New >通用分析> Pageview.

然后选择您在其他代码中使用的GA设置变量，然后点击 在此标记中启用替代设置 复选框。然后去 更多设置> Fields to Set > Add Field 并输入以下设置：

分配自定义事件触发器（搜索）到此综合浏览量标记。

综上所述，只要访客访问您的搜索页面，就会发送两次综合浏览量。一个常规，另一个与搜索词。如果您非常担心搜索页面的跳出率，则可以使用单独的标签和触发器来确保只发送一次综合浏览量，而不是两次。但这对我来说不是悲剧。

 

＃4.3。在GA视图中启用网站搜索报告

再一次，您应该在GA中启用网站搜索报告功能（跳到第一章 了解更多）。

 

选项＃5。使用DOM抓取跟踪网站搜索

本指南的最后一种选择是风险最高的一种。仅当本文中提到的所有其他选项均无效时，才应尝试使用它。

重要说明：这仅是示例。 您的情况可能看起来有所不同，因此，您可能需要调整我的解决方案。

在本章中，我将向您展示一种假设情况，其中：

• 页面网址不包含搜索词
• 搜索不是自动完成的
• 开发人员不可用
• 但是搜索词会显示在页面上（例如，标题1）。像下面的例子一样：

输入搜索关键字后，它会显示在屏幕顶部（用引号引起来）。如果我右键点击该搜索字词，’会发现整个 搜索： “sample 页” 是单个元素h1。

因此，我将需要提取它，然后剥离所有不必要的部分。

 

＃5.1。返回搜索页面的变量’s H1

首先，让’s创建一个GTM变量，它将选择整个h1’的价值。我的假设是元素h1与类 档案名称 是页面上唯一的元素，并且使用CSS选择器 h1.archive-title 应该足以选择该元素（因为如果没有，我们将需要提出一种更具体的方法来选择该元素）。

要检查，请打开浏览器’的JavaScript控制台并输入命令 document.querySelectorAll（‘h1.archive-title’) 然后按Enter。

附言您最希望在网站上看到不同的CSS类，因此，您将需要使用其他选择器。如果您不知道发生了什么，请考虑加入我的 中级/高级Google跟踪代码管理器课程.

返回JS控制台。您在那里看到多少结果？如果一个，那’很好。如果很多，则需要更精确并更新选择器。

就我而言，我很幸运， h1.archive-title CSS Selector在页面上仅返回一个元素。

在GTM中，转到 变数> New > DOM Element 并输入以下设置：

保存变量并启用预览模式。用搜索结果刷新页面，然后单击DOM Ready事件。检查DOM Ready变量的值。如果它’s null，请检查您是否完全按照我的方式配置了变量的设置。

 

＃5.2。提取搜索查询并将其作为查询参数返回的变量

在我的示例中，DOM元素变量返回 搜索： “sample 页”。我要摆脱 搜索： “ 在开始和 ” 在最后。

让’为此创建一个Custom JS变量。一世’将逐步向您展示一切：

首先，让’s创建一个匿名函数：

function() {

}

然后，让’s定义将返回h1（在我们的搜索页面中）的变量。这不是必须的，但是由于我将多次提及，因此’s more convenient:

function() {
  var 搜索Title = {{DOM - h1.archive-title}};
}

看到被{{}}包围的东西吗？那’是上一章中的DOM变量。如果您以其他方式命名，请确保在“自定义JS”变量中输入正确的名称’s code too.

现在，让’s确保仅当DOM元素实际上包含时，此Custom JS变量才返回搜索查询。“Search:”。我们可以使用IF语句来做到这一点。

function() {
  var 搜索Title = {{DOM - h1.archive-title}};
  if (searchTitle.indexOf('Search:') > -1) {
     // something will happen
  }
}

如果页面标题（h1）不包含“Search:”，则变量将返回  未定义.

然后，让’从提取实际的搜索字词  搜索： “sample 页”。我们只对 样本页面。有很多方法可以做到这一点，而我’我可以肯定地雷不是最佳的，但它仍然可以完成任务。

首先，让’s get rid of the 搜索： “ 。我用 更换（） 我所处位置的方法 搜索： “ 并一无所获。

function() {
  var 搜索Title = {{DOM - h1.archive-title}};
  if (searchTitle.indexOf('Search:') > -1) {
     var 搜索Query = 搜索Title.replace('Search: “','');
  }
}

实施之后，我们的CJS变量将返回 样本页面” 代替 搜索： “sample 页” 但是那里’s still the quotation mark 在最后。 让’s add one more 更换（）.

function() {
  var 搜索Title = {{DOM - h1.archive-title}};
  if (searchTitle.indexOf('Search:') > -1) {
     var 搜索Query = 搜索Title.replace('Search: “','').replace('”','');
  }
}

最后，我们的Custom JS变量应返回新的（伪）页面路径以及搜索查询参数。如果搜索字词包含多个单词，则它们之间的空格将被编码（感谢 encoreURI 方法）。

function() {
  var 搜索Title = {{DOM - h1.archive-title}};
  if (searchTitle.indexOf('Search:') > -1) {
    var 搜索Query = 搜索Title.replace('Search: “','').replace('”','');
    return '/search?s=' + encodeURI(searchQuery);
  }
}

总结一下。如果搜索页面的H1为 搜索： “google tag manager”，此自定义JavaScript变量将返回 / 搜索？s = google％20tag％20manager。唐’不用担心，Google Analytics（分析）会识别编码的空格（％20），并将其显示为网站搜索报告中的实际空白。

 

＃5.3。更新您的GA浏览量标记

在您的GA Pageview代码中，点击 在此标记中启用替代设置 复选框 > 更多设置> Fields to Set > Add field 并输入：

• 栏位名称： 页
• 值： {{cjs– 搜索 query}} <–在此处插入您的Custom JS变量。如果您命名的名称与我的名称不同，请输入变量’s name.

如果 h1.archive-title 元素在页面上不存在，变量将返回 未定义 并且GA Tag将忽略此字段。另一方面，如果元素存在，则将发送 / 搜索？s = [您的搜索查询] 转到GA作为新网址。

重要： 另外，如果您一直在使用 所有页面 触发您的GA Pageview代码，现在您需要将其移至 DOM就绪触发器。为什么？因为有时候 页面预览 事件，页面Title元素可能还不存在，因此您的跟踪有时将不起作用

警告：对于我来说，该解决方案仅在访问者不翻译我的网站时才有效。如果他们这样做，那么 “搜索：” 也将转换为其他内容，因此CJS变量将不起作用。

 

＃5.4。在GA视图中启用网站搜索报告

再一次，您应该在GA中启用网站搜索报告功能（跳到第一章 了解更多）。

 

 

其他要做的事情

使用Google跟踪代码管理器和Google Analytics（分析）跟踪网站搜索时，您还可以做其他几件事。这些不是必需的，但可以随时考虑。

 

小写搜索词

Google Analytics（分析）区分大小写。这意味着搜索字词 Google跟踪代码管理器 和 谷歌标签管理器 将被报告为两个单独的术语（即使它们对我和您来说都是完全一样的）。

为了解决这个问题，您可以将所有搜索词小写。这可以通过GA过滤器实现。

在Google Analytics（分析）中，转到 管理员> View > Filters 并添加以下设置：

• 筛选器名称：小写字母–搜索词
• 过滤器类型：自定义> Lowercase
• 筛选栏位： 搜索词

 

零结果搜索

但是，如果您的访客在输入搜索字词时看到类似的内容怎么办？

让’会在发生这种情况时向GA发送一个非互动事件。首先，我们需要检查 错误 信息。在我的情况下，其与类的div是 存档字幕.

让’使用以下CSS选择器创建DOM元素变量 div.archive-subtitle. 现在，让’使用以下设置创建触发器：

然后，创建一个触发器，如果​​字幕DOM元素包含以下单词，该触发器将被激活 我们找不到任何搜索结果.

最后，让’使用以下设置创建GA事件代码：

将先前创建的DOM Ready触发器分配给此GA事件代码。

有了它，我们将发送返回0个搜索的搜索查询，并能够快速确定哪些搜索字词值得我们投入时间。

 

使用Google跟踪代码管理器跟踪网站搜索& GA: 最后的话

希望本指南将帮助您解决与GTM网站搜索跟踪有关的大部分挑战。大多数情况下（根据我的经验），您将处理常规搜索+查询参数和不带查询参数的搜索（而搜索词仍在URL中可见）。

Got any other questions? 让 me know.