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.