How to integrate Google Tag Manager (gtm) in my turbo application

Hello :v:,

I am currently trying to activate the Google Tag Manager for my website.

On the website I have integrated Turbo via the following script element <script type="module" src="https://cdn.skypack.dev/@hotwired/turbo"></script>. And up to this point Turbo works as desired, takes care of downloading the corresponding HTML data and replacing the body and all the other :magic_wand::sparkles::sparkles::sparkles:.

However, if I then add the following GTM script, Turbo stops working as intended.

<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','<<$GTM_ID>>');
</script>

If I click on a link from now on, Turbo no longer fetches the corresponding URL. Now every click on a link leads to a complete reload of the page.

I have tried to debug the whole thing a little. I see in the Firefox Developer Tools that the listeners are still set correctly, both for Turbo and for the Google Tag Manager.
The difference I see is in the return value of the Turbo function clickEventIsSignificant(event). If GTM is active this function returns false if GTM is not activated true. I think that some function calls Event.preventDefault() before because in clickEventIsSignificant the value for event.defaultPrevented is true when GTM is active. However, I don’t know what I can do about this. Has anyone had any experience with this that could enlighten me?

:pray::vulcan_salute:

1 Like

I am also seeing this behavior. Not documented anywhere. Any help would be appreciated!

Simply having the following line and putting the rest within turbo:load handler breaks Turbo entirely.

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX" data-turbo-track="reload"></script>

My investigations point to some change in the GTM script recently that is interfering with the Turbo script. In fact, GTM is not working well together with @rails/ujs@7 or @rails/ujs@6 as well.

The answer is here: ruby on rails - Turbo Drive not intercepting links (but turbo:load event fires) - Stack Overflow

Disable Enhanced measurement in GA and you should be good to go. Apparently GTM outbound link tracking calls preventDefault or something.

One year already :exploding_head:

Since, no solution worked for us, we did another debug session in the last few days.

The problem was caused by “Just Links” triggers with “Wait for Tags” enabled.
As soon as one of these triggers exists, the gtm.js script will start mimicking the click (location.href = $clickedLink.href), regardless of whether the wait limit is exceeded or not. At the same time preventDefault is called.

For our project, it was fine to either delete the trigger or disable “Wait for Tags”, so we finally got it working.

:vulcan_salute: