Google Tag Manager - Tags (type: event) stop working when browsing

[Vadorequest]

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

GTM tags should work the same way on every page, whether the user arrived at this page or browsed to it.

Current Behavior

GTM tags that use the event type stop working properly as soon as a user browse the website. By "browse", I mean using client-side navigation, which doesn't refresh the page but only part of it (kinda the point of SPA)

Steps to Reproduce (for bugs)

You can reproduce on my online staging environment:

• Install Chrome plugin: https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna to be able to see the GTM events calls in the browser console
• Go to https://staging.hep.loan-advisor.studylink.fr/idrac
• Click on the top-left IDRAC logo, you should see logs on the console (event fired)
• Go to https://staging.hep.loan-advisor.studylink.fr and select the "Idrac" choice from the select input, then click "Go", you should see logs in the console again (redirection detected, which creates a pageview)
• Click on the top-left IDRAC logo, you won't see any log this time

Context

I believe that somehow GTM binds some DOM events upon loading that get cleaned when the DOM changes due to Next.js redirection, which reloads the DOM, partially.

Those GTM tags (type: event) I'm talking about are basically triggers based on HTML class/id in the DOM. When I use the GTM Preview mode (debug), I can see that there is no gtm.linkClick fired when clicking the logo, if I got redirected from another page using a frontend-redirection. But if I refresh the page and click, it works just fine.

The simplest workaround I see is to disable client-side redirection but forcing a page refresh, but that's not a nice workaround and kills the point of building an SPA in the first place.

Maybe there is a way to force refresh the GTM script (need to clean it from the DOM and add it again because it won't trigger if already loaded), or to use a feature within GTM that binds everything again? I don't know.

Your Environment

Tech	Version
next	5.0.1-canary.16
node	6.10.3
browser	Chrome

[timneutkens]

#4036 will probably help you, either way it's not an issue with the Next.js core.

[Vadorequest]

@timneutkens I'm aware of the PR but it doesn't aim to fix this at all.
The PR is about Google Analytics, while this issue is with Google Tag Manager, which is a different product (event though it can load GA)
Also, the PR is to fix the "pageview" issue with SPA, it's a different feature that the "events".

Can we reopen this issue? It's definitely not related to Next.js core (AFAICT), but I believe other people will run into this as well. It's likely caused by the way GTM works, which isn't SPA-friendly.
The goal is to find a workaround, or, even better, a solution.

For instance, I was wondering if removing the GTM script tag from the DOM and add it again at every page load would somehow force GTM to reload upon route changes, I wonder if I can trigger this behaviour in the router directly.

[timneutkens]

Feel free to ask your questions on https://spectrum.chat

[Vadorequest]

I found a workaround for anyone interested, here is the implementation for Next.js:

Router.onRouteChangeComplete = () => {

    // XXX Destroy all data of GTM, which will make it refresh all bindings (events) the next time GTM.initialize is called
    // This is a hack to make GTM works with SPA, because otherwise events don't trigger because DOM events are removed when Next.js load dynamic parts of the DOM
    delete window.google_tag_manager;
};

GTM.initialize comes from https://github.com/Vadorequest/react-gtm but you don't need it, you just need to make sure that you load the GTM script in the DOM after you delete the window.google_tag_manager variable, to force re-binding DOM events.

See SO for detailed explanation: https://stackoverflow.com/questions/49557199/google-tag-manager-tags-type-event-stop-working-when-browsing-on-a-spa