Hello ,
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 .
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?