Google Tag Manager causes full page reload in SPA - React

Question

When I add trigger in GTM on a React <a /> or <Link /> element it causes full page reload on click instead of re-rendering just part of application.

When I remove google tracking, everything works smoothly. Is there a way, how to configure GTM to not affect behaviour of application?

Answer 1

If strange things happens with Google Tag Manager link click tracking the first thing you should do is to go to your click trigger setup and see if the "wait for tags" and "check validation" checkboxes are enabled (as they are by default) and uncheck them.

They are not necessary in an SPA and (as evidenced) potentially harmful; "wait for tags" adds a delay so that other tags have time to fire before a the link directs a user away from the page (which does not happen within SPAs in any case), "check validation" tests if the link target is a valid URI (which within an SPA it probably isn't by GTMs standards - for example links starting with a hash are not valid etc.).

Answer 2

You can create separate function and use context router to change route ex:

myFunction(url) {
 this.context.router.push({ 
      pathname: url
    });
}
<Link onClick={this.myFunction.bind(this,url)} ></Link> 

attach this function to onClick of Link tag.