使用Google跟踪代码管理器跟踪手风琴的点击次数

当您想以更结构化的方式呈现内容时，手风琴可能会很有用。通常，网站所有者将它们用于FAQ（常见问题）之类的部分，人们可以在其中快速浏览问题列表，如果发现有用的内容，则可以单击以查看答案。

在今天’s blog post, I’将向您展示几个如何使用Google跟踪代码管理器跟踪手风琴点击的示例。

顺便说一句，手风琴有时也被称为 崩溃 （至少 那’就是他们在Boostrap中的称呼）。

在我们继续之前，这里’快速免责声明。对于手风琴的编码没有标准。这完全取决于开发人员’的想象力（或他/她正在使用的框架）。

因此，我的方法’下面将仅显示示例。它们不是通用的。我在此博客文章中的目标是为您提供有关如何解决类似问题的启发。

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

 

目录

• 不同的手风琴，不同的跟踪方式
• 我们到底要测量什么？
• 情况1：仅可点击标签
  • ＃1.1。启用与点击相关的变量
  • ＃1.2。单击触发器
  • ＃1.3。更新点击触发器
  • #1.4. 谷歌分析Tag
  • #1.5. 让’s test
• 案例2：手风琴的行/标题包含更多可点击的元素
  • ＃2.1。需求
  • ＃2.2。解决方案
  • ＃2.3。 Polyfill（自定义HTML标记）
  • ＃2.4。自定义JavaScript变量1–找到正确的元素
  • ＃2.5。自定义JavaScript变量2–手风琴科标题
  • ＃2.6。测试变量
  • ＃2.7。更新点击触发器– Option #1
  • ＃2.8。更新点击触发器– Option #2
  • #2.9. 谷歌分析Tag
  • ＃2.10测试
• ＃3。如果可以区分何时折叠元素，请执行此操作
  • ＃3.1。返回aria扩展的变量’s value
  • ＃3.2。更新您的点击触发器
• 看起来复杂吗？
• 最后的话

 

不同的手风琴，不同的跟踪方式

就像我在引言结尾提到的那样，手风琴可以用不同的方式编码。因此，关于如何跟踪它们有不同的方法。

在这篇博客中，我’将向您展示两个手风琴示例：

• 只有文字可点击的地方
  （然后单击它，该部分将展开）
• 可点击多个元素的地方（标签+图标）
  

 

我们到底要测量什么？

例如，如果您在手风琴列表中有20个项目可以单击，那么您可能会对哪个部分的点击次数最多感兴趣。而这正是我们要衡量的。

我们的目标是在单击手风琴元素（展开/折叠）后发送带有单击文本的事件。通过发送文本值，我们将能够知道点击最多的手风琴列表项。

 

情况1：仅可点击标签

这是我想到的手风琴示例。仅可单击的文本。如果单击该按钮的背景部分中的任何位置，则什么都不会发生。

但是，如果您单击任意位置并展开，则 跳到下一章 在这里，我解释了如何处理多个可点击元素。

 

＃1.1。启用与点击相关的变量

如果你没有’t yet, go to GTM> 变数> Configure （在[内置变量]部分中），并启用所有与点击相关的变量（通过单击复选框）。

 

＃1.2。单击触发器

GTMoffers two click-related triggers, 只是链接和所有元素点击。您应该选择哪一个？这取决于手风琴的编码方式。通常， 只是链接 触发器在这种情况下不起作用。

那’这就是为什么我与 所有元素点击 在这种情况下触发。

在GTM中，启用/刷新 调试模式Â检查单击页面上的任何元素后会发生什么。如果你不这样做’t see 请点击 预览模式下的事件，这意味着您在页面上没有活动的点击触发器。

在 那 case, go to 扳机> New >触发配置> 所有元素点击 触发并保存触发。启用或刷新预览模式，然后刷新手风琴所在的页面并单击它。的 点击 事件应该出现。

现在，执行以下操作：

单击手风琴中的标题

然后在该手风琴的背景上单击任意位置（但您必须单击通常会展开该部分的区域的背景。

在 GTMpreview mode, click the 请点击 事件（当您单击该部分的标题时出现），然后转到 变数 标签。

您是否在Click Text变量中看到正确的文本？我的意思是，您在网页上看到该手风琴部分的标题吗 点击文字 变量？如果是，请继续阅读本章。如果没有的话 跳转到案例2 本指南。

现在，选择第二个 请点击 单击扩展该部分的手风琴按钮的背景时出现的事件。的价值是什么 点击文字 变量？如果是 未定义, 跳至案例2 此博客文章。

如果在两种情况下，Click Text变量都包含适当的值（即该手风琴节的标题），请执行以下步骤。

 

＃1.3。更新点击触发器

现在它’是时候更新触发器了。记住那两个 点击 我在本博客文章的上一章中描述的事件？ （您必须在 单击文本 变量）。

现在，做同样的事情，但是检查 点击ID 或 点击类 变量。

如果两次单击具有相同（或相似）的单击ID或单击类，则可以将它们用作触发器。

在我的示例中，两个事件都包含相同的值 点击类 （它的价值是 手风琴-头衔），因此，我决定接受这一点。

去 那 所有元素点击 在上一章中创建的触发器并更新条件。在我的示例中，我切换到 一些点击和then entered the following condition:

点击类 包含 手风琴-头衔

 

#1.4. 谷歌分析Tag

现在，让’将手风琴的点击事件作为事件发送给Google Analytics（分析）。在GTM中，转到 标签> New > Universal Analytics和enter the following configuration:

然后为我们分配点击触发器’在上一章中进行了更新。

结果，当访问者点击其中的网站元素时 点击类 是 手风琴-头衔，Google Analytics（分析）代码将触发，并将事件发送给Google Analytics（分析）。通过该事件，我们还将（自动）发送Click Text（该手风琴部分的标题）。

 

#1.5. 让’s test

将所有更改保存在容器中。刷新预览和调试模式，然后刷新手风琴所在的页面。单击手风琴中任何标题的标题。你应该看到 请点击 事件在调试控制台的左侧。单击它，然后检查您的GA标签是否已触发。

然后在手风琴中单击该标题的背景，然后单击 点击 事件，并检查是否触发了GA代码。然后尝试点击其他不相关的网站元素，并检查您的GA代码是否未触发（因为它不应该触发）。

确定您的代码仅在预期的时间触发后，请转到 谷歌分析> Realtime > Events和check whether the events is visible there.

一段时间后，您的活动也会显示在标准GA报告中（ 行为> Events > Tops events）。

在一切正常运行并经过正确测试之后，发布容器（单击右上角的Submit按钮），然后完成所有步骤。

 

情况2：一排手风琴包含多个可点击元素

这种情况比较常见（至少根据我的经验）。手风琴的每一行不仅包含可以单击的标题，还包含其他元素，例如箭头或加号。

单击箭头后，该部分也会展开，但是， 点击文字 变量将是 未定义.

这就是使这一挑战更加棘手的原因。使用Google跟踪代码管理器，我们将尝试以某种方式返回 点击文字即使单击的元素不包含任何文本，也不会显示展开部分的内容。

 

＃2.1。需求

此方法适用于所有其他可点击元素（扩展该部分），它们是该部分的子元素’我们要访问的标题。让我说明一下。

在此示例中，扩展手风琴部分的部分是标题2（h2）。我知道，因为我在该标题上单击了鼠标右键，然后选择了 检查元素.

展开后，我会看到多个元素：

• 文本
• 图标（可以是“plus” 要么 “minus”取决于该部分是展开还是折叠）。

在我的示例中，所有这些元素都是h2主元素的直接子元素。

如果您的案例看起来很相似（就层次结构而言，以下解决方案将正常工作）。

 

＃2.2。解决方案

此解决方案的功劳归功于Simo Ahava，他 写了这篇很棒的文章。我已经对其进行了修改（为此情况专门做了一些细微的更改，因此，请使用我博客中的代码段节省一些时间和头痛）。

 

＃2.3。 Polyfill（自定义HTML标记）

默认情况下，并非所有浏览器都支持此解决方案，因此，我们需要创建一个自定义HTML标记来解决此问题。复制下面的代码，创建一个新的“自定义HTML”代码，粘贴代码并在其上启用代码 所有页面. Do not change anything in 那 code.

<script>
  if (!Element.prototype.matches) {
    Element.prototype.matches = 
        Element.prototype.matchesSelector || 
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector || 
        Element.prototype.oMatchesSelector || 
        Element.prototype.webkitMatchesSelector ||
        function(s) {
            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                i = matches.length;
            while (--i >= 0 && matches.item(i) !== this) {}
            return i > -1;            
        };
  }
</script>

 

＃2.4。自定义JavaScript变量1–找到正确的元素

然后去 变数> New （在“用户定义的变量”部分） > Custom JavaScript和paste the following code (do not change anything in it):

function() {
  return function(target, selector) {
    while (!target.matches(selector) && !target.matches('body')) {
      target = target.parentElement;
    }
    return target.matches(selector) ? target : 未定义;
  }
}

重要： 命名变量“cjs – find closest”（不带引号）。这里的名字非常重要，因为我们’将在下一个变量中使用该名称。

 

＃2.5。自定义JavaScript变量2–手风琴科标题

该变量将根据单击以展开（或折叠）元素的手风琴节的正确标题。这将需要进行编辑，对初学者来说将是一个挑战。

function() {
  var el = {{cjs - find closest}}({{Click Element}}, '在此处输入您的CSS选择器');
  return typeof el !== 'undefined' ? el.innerText : 未定义;
}

这里有几件重要的事情：

• 确保您的自定义JavaScript变量1被称为 cjs– find closest。如果您使用了其他标题，请相应地更新上述代码
• 确保已启用 点击类 variable in your GTMcontainer (that is a built-in variable)
• 您将需要输入CSS Selector，它将选择手风琴节的标题（而不是 在此处输入您的CSS选择器）。如果您不熟悉，这将是一项艰巨的任务 CSS选择器.

让’看看我的例子。我在“手风琴”部分的标题上单击鼠标右键，然后选择 检查元素。这是我的要素’m interested in.

它的阶级是 section-title mbr-fonts-style display-7 i-amphtml-accordion-header.

的 i-amphtml-accordion-header 看起来是区分手风琴标题中任何随机元素的好方法。

让’使用它并准备我们的CSS选择器。在CSS中，类始终以其前面的点开始。

.i-amphtml-accordion-header

另外，我们可能想更具体一些，并仅当元素是Heading 2（h2）。我们必须将其添加到选择器的开头。

h2.i-amphtml-accordion-header

Done! This is our selector. 让’将其复制并粘贴到我们的自定义JavaScript变量2的代码中。

function() {
var el = {{cjs - find closest}}({{Click Element}}, 'h2.i-amphtml-accordion-header');
return typeof el !== 'undefined' ? el.innerText : 未定义;
}

给该变量起一个标题，例如 cjs–手风琴节标题 并保存变量。

重要：最好检查CSS选择器是否未跟踪任何不必要的元素（因为同一选择器可能返回了更多项目）。

打开浏览器’的JavaScript控制台并粘贴以下命令：

document.querySelectorAll（‘在此处输入您的CSS选择器’)

根据指示，粘贴您的CSS选择器，然后按Enter。检查退回了多少物品。您可以单击黑色三角形，展开列表，然后检查（通过将鼠标悬停并查看站点上突出显示了哪个元素）是否没有误报。

 

＃2.6。测试变量

确保您至少启用了 所有元素点击 在页面上触发（触发条件暂时不重要）。然后启用或刷新GTM中的“预览和调试”，然后单击手风琴节标题的多个部分（文本，图标，背景）。

结果，您应该看到多个 点击 预览控制台中的事件。单击第一个，然后转到 变量 调试控制台的标签并找到 cjs–手风琴节标题 变量。

它的值应该是“手风琴”部分的标题。

然后再次单击并执行相同的操作。预期结果：展开手风琴部分的所有点击都必须返回正确的 cjs–手风琴节标题 值。

 

＃2.7。更新点击触发器– Option #1

有多种方法可以解决此问题。

首先，检查 点击类 要么 点击编号 展开/折叠手风琴部分的元素的名称。

就我而言，有两个元素：文本和图标。文本’s 点击类 等于 section-title mbr-fonts-style display-7i-amphtml-accordion-header 而图标’s 点击类 是 amp-iconfont fa-minus fa 减去-sign.

不幸的是，图标’s类的唯一性不足以确保它专门用于手风琴中。但是，如果是这样的话 amp-iconfont fa-minus fa 减去-sign 手风琴图标, 然后，我可以在点击触发器中使用以下条件：

点击类匹配RegEx（忽略大小写） i \ -amphtml \ -accordion \ -header | accordion \ -icon

我贴了 i-amphtml-accordion-header 和 手风琴图标然后用管道将它们隔开|然后在每个破折号前添加一个反斜杠（了解有关 正则表达式在这里）。

保存触发器。

 

＃2.8。更新点击触发器– Option #2

让’回到我的图标没有适当类别的情况。在点击触发条件下我们应该使用哪种条件？

我们应该改变思维方式并这样说：我们想跟踪所有元素的点击，这些元素是扩展手风琴部分的主要元素的直接子元素。

是的，听起来令人困惑。忍受我

看我的例子，最重要的元素是 h2 包含一个文本和几个孩子（“plus” 和 “minus” icons).

我们想做的是跟踪在父元素（h2）。这可以通过 通配符CSS选择器.

首先，让’使用我们感兴趣的top元素的CSS选择器（h2）。

h2.i-amphtml-accordion-header

添加逗号

h2.i-amphtml-accordion-header，

添加空间并再次粘贴CSS选择器

h2.i-amphtml-accordion-header，h2.i-amphtml-accordion-header

添加空间和一个星号

h2.i-amphtml-accordion-header，h2.i-amphtml-accordion-header *

做完了！这是新的CSS选择器，它将选择所有与 h2.i-amphtml-accordion-header 选择器或是其后代（表示它们在低于h2元素的某个级别（例如子代，孙代等）。

让’可以在我们的点击触发器中使用它。

去 GTM> 扳机> New >触发配置> 所有元素点击和create enter the following conditions:

重要：使用Click Element变量。其他与点击相关的变量将不起作用。

保存触发器。

 

#2.9. 谷歌分析Tag

最后一步是创建一个标签，该标签会在手风琴部分展开或折叠时将事件发送到Google Analytics（分析）。

去 标签> New > Universal Analytics和enter the following settings:

如果你没有’尚未，我强烈建议您使用 GA设定变数.

分配我们在上一章中创建的点击触发器。

保存标签。

 

＃2.10测试

刷新预览模式，刷新手风琴所在的页面，并测试是否：

• 您的标签正在触发
• 您会在Google Analytics（分析）实时报告中看到点击数据

去和 检查＃1.5。章节 这篇博客文章了解我的意思。

 

＃3。如果可以区分元素何时已扩展，请执行此操作

我的解决方案’上述内容将跟踪对手风琴标题的任何点击。它是展开还是折叠都没有关系。

那可能不正是您想要的，对吧？如果我们仅在访问者扩展某个部分时才可以跟踪怎么办？

让’我们再来看一下我的例子。

检查手风琴’标题，用于扩展部分。在保留浏览器的同时’的开发人员工具多次打开，扩展和折叠该部分。您是否注意到开发人员工具中的任何更改？

在我的情况下，有一个参数不断变化，它称为 咏叹调扩展。如果手风琴部分折叠， 咏叹调扩展‘s value 是 假。 当我展开该部分时， 参数’s value changes to 真正.

我们可以更新触发器以仅在以下情况下触发GA代码 咏叹调扩展‘s value 等于 假 (meaning 那 it’s closed).

重要： 咏叹调扩展 在我的示例中可用。在您的情况下，参数可能（可能会）不同。因此，不要’不要盲目复制我的解决方案，使其适应您的需求。

 

＃3.1。返回aria-expanded的变量’s value

创建一个新的Custom JavaScript变量并粘贴以下代码：

function() {
  var el = {{cjs - find closest}}({{Click Element}}, 'h2.i-amphtml-accordion-header');
  return typeof el !== 'undefined' ? el.getAttribute（'aria-expanded') : 未定义;
}

有几件事要提到：

• 第2行：使用与＃2.5章中的变量相同的CSS选择器。就我而言’s h2.i-amphtml-accordion-header .
• 第3行：我改变了 el.innerText 到 el.getAttribute（‘aria-expanded’) . 如果要获取元素的另一个属性，只需替换 咏叹调扩展 以及元素中使用的其他名称。

保存变量。

此变量将返回 真实的 如果手风琴部分已经扩展。

 

＃3.2。更新您的点击触发器

打开点击触发您’在第2.8章中创建并添加了附加条件：

cjs– 咏叹调扩展 （或您所说的变量）等于false。

这意味着如果该部分尚未展开，则将激活单击触发器。

 

看起来复杂吗？

花费一些时间来熟悉这些跟踪技术。因此，如果您感到不知所措，请不要’t worry. You’re not the only one.

但是，如果您以后希望能够解决类似级别的跟踪问题，请查看我的 中级/高级Google跟踪代码管理器课程.

我的学生总是得到优先支持。所以，如果你’停留在课程的任何主题/模块上，我’ll help.

 

关于如何使用Google跟踪代码管理器跟踪手风琴点击的最终决定

即使我不’在我的项目中不必经常处理手风琴，我偶尔会在论坛，社区等中注意到有关手风琴的问题。’s why I’ve决定编写本指南，并介绍了几种可能的情况。

通过遵循我的步骤’如上所述，您将能够使用Google跟踪代码管理器跟踪手风琴的点击并将其发送到Google Analytics（分析）。每个事件还将包含单击部分的文本。

如果您只想在访问者展开该部分时进行跟踪，请确保遵循此博客文章的第3章中列出的提示。

任何问题？将它们张贴在下面。