CODEWITHSUNDEEP
reactjsnext.js
Alex
Alex

Reputation: 1420

GTM with NextJs

Having troubles registering route change events on NextJs (SSR enabled) app. I am using the History Change event trigger in GTM.

Using the react-gtm-module to initialise the Google Tag Manager.

Issue: The event fires on mount, with route eg. www.site.com/product/123 But the event does NOT fire when from the page /product/123/ I navigate to a page like /product/124/.

Product page:

return (
<div>
  <div>{props.title}</div>
  <Link href="/product/[pid]" as={`/product/124`}>
    <a>Another product (should trigger event here, but doesn't)</a>
  </Link>
</div>
)

I have tried adding this to _app.js (componentDidMount)

     import Router from 'next/router';
      ...
      componentDidMount () {
      ...
      if (process.browser) {
      Router.onRouteChangeComplete = url => {
        window.history.pushState({}, document.title, url);
      };
    }

What is the proper way of doing this in NextJs?

Upvotes: 3

Views: 6141

Answers (2)

James Hooper
James Hooper

Reputation: 2010

These links don't necessarily help with the packages mentioned above, but for other users arriving here later who want a solution without extra packages:

Here is an example repo from Next that shows how to implement GTM.

Attach listeners to route changes with next/router and call your GTM update handler:

const router = useRouter()

  useEffect(() => {
    router.events.on('routeChangeComplete', gtm.pageview)
    return () => {
      router.events.off('routeChangeComplete', gtm.pageview)
    }
  }, [router.events])

Additionally, here is the new (since Next 11) next/script component that has APIs designed to simplify the use of inline scripts.

Upvotes: 3

ddon-90
ddon-90

Reputation: 2976

You have to inject your tag manager script on every page. Since _document.js is the wrapper for every page, you should add the GTM script to _document.js in the head section as follow:

<Head>
  <script dangerouslySetInnerHTML={{
    __html: `(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-*****');`,
  }}>
  </script>
  ...
</Head>

Upvotes: 5

Related Questions