Question

我有一个wordpress实例，我的主题呈现了一个带有以下HTML的按钮：

<a class="ubtn-link ubtn-left tooltip-57583ced327d9"
   href="http://www.google.de" target="_self">
    <span class="cr-animate-gen ubtn ubtn-normal ubtn-no-hover-bg margin-right extension-download ubtn-sep-icon ubtn-sep-icon-at-left ubtn-left"
    data-animate-type="transition.fadeIn" data-hover="" data-border-color="" data-hover-bg="#00ade6"
    data-border-hover="" data-shadow-hover="" data-shadow-click="none" data-shadow="" data-shd-shadow=""
    style="font-size: 16px; border: none; color: rgb(255, 255, 255); opacity: 1; display: inline-block; background: rgb(0, 198, 255);">
        <span class="ubtn-data ubtn-icon">
            <i class="dfd-icon-cloud_download" style="font-size:30px;color:;"></i>
        </span>
        <span class="ubtn-hover"></span><span class="ubtn-data ubtn-text" data-lang="en">Download for free</span>
    </span>
</a>

我有一个GTM触发器，可以监听所有元素的点击次数，点击类与CSS选择器匹配。如果我调试单击，变量选项卡会告诉不同的单击类，这取决于我单击按钮的位置（在文本上，图标上或按钮本身上）。 Click Class的不同内容如下：

ubtn-data ubtn-text
ubtn悬停
DFD-图标-cloud_download

问题是，这太普遍了。我在第一个范围内添加了课程extension-download。这是我可以添加额外课程的唯一位置。所以我想到了以下内容，在我的触发器中定义，Click Click匹配CSS选择器：extension-download > ubtn-data, extension-download > ubtn-hover, extension-download > dfd-icon-cloud_download，但这不起作用。我怎样才能轻松解决这个问题？

Answer 1

您可以尝试使用RegEx来允许多个Click Classes。

使用＆＃34;匹配RegEx＆＃34;并在括号中包含所有预期的类，用竖线分隔。

示例：

点击类匹配RegEx（ubtn-data ubtn-text | ubtn-hover | dfd-icon-cloud_download）

这意味着将捕获括号中包含3个类的Classes。

Answer 2

您可以通过查看Element是否与适用于最外部元素及其内部任何内容的CSS选择器相匹配来实现此目的：

Element matches css selector .ubtn-link, .ubtn-link *

GTM：单击触发器按钮，其中包含许多嵌套类

2 个答案: