Google 标签管理器 - 如何定位班级和孩子以跟踪按钮点击

Question

我不在 IT，但我被要求在 GTM 中实现一些标签。到目前为止，我自己做得还不错，但我需要为滚动条实现点击跟踪器：

根据代码，我认为最好跟踪包装类和子类，但我实现的任何东西都不会触发触发器。我认为它适用于 CSS 选择器的以下输入，但它不起作用：

.flex w-[50px] h-full items-center justify-center slider-navigation-prev swiper-button-prev group cursor-pointer, .flex w-[50px] h-full items-center justify-center slider-navigation-prev swiper-button-prev group cursor-pointer *

我已经尝试了很多次迭代，但无济于事。

我必须为按钮使用的 HTML 如下：

<div class="flex w-[50px] h-full items-center justify-center slider-navigation-prev swiper-button-prev group cursor-pointer" tabindex="0" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-55838039c394c9ef" aria-disabled="false">
  <span href="#" class="icon-btn icon-btn-teal group-hover:bg-brand-teal-bg">    
    <span class="shrink-0 flex-0 icon-fit w-4 h-4 sm:w-6 sm:h-6">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M15.7071 5.29289C16.0976 5.68342 16.0976 6.31658 15.7071 6.70711L10.4142 12L15.7071 17.2929C16.0976 17.6834 16.0976 18.3166 15.7071 18.7071C15.3166 19.0976 14.6834 19.0976 14.2929 18.7071L8.29289 12.7071C7.90237 12.3166 7.90237 11.6834 8.29289 11.2929L14.2929 5.29289C14.6834 4.90237 15.3166 4.90237 15.7071 5.29289Z" fill="currentColor"></path>
      </svg>
    </span>
  </span>
</div>

我怀疑我遇到了错误，因为 div 类中有空格，我不知道如何解决这个问题。

我将永远感激这里的任何帮助。

注意：我可以在 GTM 上看到 Click Element 变量为：

"SVGSVGElement: html.no-touchevents.inputtypes-search.inputtypes-tel." +
"inputtypes-url.inputtypes-email.no-inputtypes-datetime.inputtypes-da" +
"te.inputtypes-month.inputtypes-week.inputtypes-time.inputtypes-datet" +
"ime-local.inputtypes-number.inputtypes-range.inputtypes-color.detail" +
"s.js > body.toolbar-tray-open.toolbar-horizontal.toolbar-fixed.user-" +
"logged-in.path-frontpage.page-node-type-landing-page.scroll-down > d" +
"iv.dialog-off-canvas-main-canvas > div.layout-container > main > div" +
".flex.justify-center.mx-auto.w-full > div.container.w-full.relative." +
"px-[15px].xxl:px-0.py-12.md:py-[104px] > div.region.region-content >" +
" div.block.block-system.block-system-main-block#block-jcv-theme-cont" +
"ent > article.contextual-region.node.node--type-landing-page.node--p" +
"romoted.node--view-mode-full > div.node__content > div.field.field--" +
"name-field-flexible-content.field--type-entity-reference-revisions.f" +
"ield--label-hidden.field__items > div.field__item > div.home-bench-b" +
"ooks.bg-neutral-L100 > div.flex.justify-center.mx-auto.w-full > div." +
"container.w-full.relative.px-[15px].xxl:px-0.py-12.md:py-[104px] > d" +
"iv > div > div.w-full.mt-10.md:mt-15 > div.slider.slider-items > div" +
".hidden.sm:flex.sm:items-center.sm:justify-between.sm:w-full > div.f" +
"lex.w-[50px].h-full.items-center.justify-center.slider-navigation-pr" +
"ev.swiper-button-prev.group.cursor-pointer.swiper-button-disabled > " +
"span.icon-btn.icon-btn-teal.group-hover:bg-brand-teal-bg > span.shri" +
"nk-0.flex-0.icon-fit.w-4.h-4.sm:w-6.sm:h-6 > svg"

Answer 1

问题的解决方案选择器如下：

div.swiper-button-prev *, div.swiper-button-prev