I'm not in IT, but I've been asked to implement some tags in GTM. I've done reasonably well for myself until now, but I need to implement a click tracker for a scroller: Image of button on page, marked out in red box
Based on the code, I thought it best to track the wrapper class and children, but nothing I implement fires the trigger. I thought it would work with the following input for CSS Selector, but it doesn't:
.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 *
I've tried many iterations on this, but to no avail.
Image of GTM trigger implemented
The HTML I have to work with for the button is below:
<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>
I suspect I'm coming across errors because the div class has spaces in it and I don't know how to get around that.
I'd be eternally grateful for any assistance here.
Note: I can see the Click Element variable on GTM as:
"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"
The solutioning selector for the issue is as follows: div.swiper-button-prev *, div.swiper-button-prev
