"linkClick" triggered twice with Draggable

[Alex Jester]

Hello, I'm having an issue with Draggable and Google's tag manager click events.

I would make a more complete demo, but because of European legislation I don't have access to Google GTM dashboard in order to check it myself.

There is an external company that sets "linkClick" events for my client and they say that the click event appears twice in GTM for the links that are in the slider.

As expected, in the demo the counting is not triggered twice. 1 click == 1 count, but apparently not for Google...

My question is if anyone had the same issue?

Because it's 2024 and 99% of the  websites still have at least one slider + some kind of tracking on those links.

See the Pen dyxYKvy by akex-jester (@akex-jester) on CodePen.

[Rodrigo]

Hi,

 

Sorry about the issues but first time ever hearing about GTM and of course never dealt with it. One approach could be to wrap the <a> tags in an extra element and make that element the target for Draggable and use the clickableTest function:

https://gsap.com/docs/v3/Plugins/Draggable/#clickableTest

 

Another option is to make those element's not draggable and see if the click events are fired just once. I'm assuming that your entire slider is the Draggable target and not just the <a> tag, right?:

https://gsap.com/docs/v3/Plugins/Draggable/#dragClickables

 

A little more detail regarding a closer and more real outlook of your HTML also could shed some light in what could be tested in order to find a solution.

[Alex Jester]

@Rodrigo Thank you very much for the reply!

It's the first time we're facing this issue and we've been using GSAP since the Flash era and we are proud GSAP Business subscribers as well.

That slider was also made a few years ago and was never changed, just updated to latest versions.

Here's the real HTML:

<div class="bt-header-stories-slider">
    <div class="bt-header-stories-slides"> <!-- Draggable bounds -->
        <div class="bt-header-stories-slides-wrapper"> <!-- Draggable element -->
            <a class="bt-header-stories-slide" href="..." target="_blank">...</a>
            <a class="bt-header-stories-slide" href="..." target="_blank">...</a>
            <a class="bt-header-stories-slide" href="..." target="_blank">...</a>
            ...
            <a class="bt-header-stories-slide" href="..." target="_blank">...</a>
        </div>
    </div>
</div>

The entire slide is clickable. You suggestion is to wrap each slide individually too?

 

[Rodrigo]

Mhhh.... no my suggestion was predicated on the fact that just some areas of the slide were clickable not the entire slide.

 

We'll have a look at this and see what can be done, but this seems more related to the fact that GTM is clearly adding an extra click event or reporting a duplicated. As mentioned before I know nothing on the subject, I did a quick google search and found out some similar issues generating from using GA4 for debugging. I don't know if this is your case, just mentioning some information I gathered from the web.

 

Also in your demo you're not even using the onClick handler by Draggable, but this clearly is related to the way those tracking handlers are being added/used/tracked  as far as I can see. Can you confirm that without Draggable in the mix the click events are reported just once? Can you add mousedown event handler in your code and see how that works with the click reports?

[Rodrigo]

Another option could be to use a draggable proxy and trigger in order to trigger the Draggable functionality and prevent the click event from propagating on the slider wrapper that will trigger the Draggable instance.

 

Here is a super simple demo illustrating this approach:

See the Pen OJKNGdG by GreenSock (@GreenSock) on CodePen.

 

[Alex Jester]

It took a while until we managed to redo all the tests, just to me sure. So here it goes. I added a click event too with a console.log() just to prove that it's a GTM issue.

1. Draggable + GTM + console.log(): GTM triggers twice and console.log() once
2. Draggable + console.log(): triggers once - as expected
3. GTM only: triggers once
4. GTM + console.log: both triggered only once
5. added e.stopPropagation() in Draggable onClick: GTM is not triggered at all (it records only a click on the document)
6. also tried stopPropagation() on a separate listener: GTM is not triggered

We did the same tests on all major browsers.

Probably they made changes on their scripts.

What was strange on this duplicate "linkClick" is the sometimes it adds properties like "eventCallback" or something similar. But not always and there is no clear pattern to reproduce. We couldn't find anything about this in their docs either.

Now we decided to trigger custom GTM events and even like that, their feedback was that "after a few seconds, sometimes a duplicate click appears".

So it's clear that GTM is adding or handling this wrong and I personally don't see any problem with Draggable. I would say that it was not set or debugged properly, since this is a common thing and no one else had any issues. Right?