Nextjs's GoogleTagManager component not working with Google Ads

[bdlowery]

In the docs for third parties it shows examples of using a tag with GTM-xxxx, but with Google Ads it wants me to use a tag with AW-xxxx.

Does the GoogleTagManager component support this? I’ve tested it out and it says I have a tag on the site, but it doesn’t want to track conversions on page load with it. Here is how I’m using it in my RootLayout -

import { GoogleTagManager } from '@next/third-parties/google'
export default function RootLayout({ children }: { children: React.ReactNode }) {
	return (
		<>
			<GoogleTagManager gtmId="AW-xxxxxxxx" />
			<main className="flex-1">{children}</main>
		</>
	)
}

Because it’s not a custom event, like a button click, I can just use a generic gtag script. This is the snippet Google wants me to install -

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-xxxxxxxx"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'AW-xxxxxxxx);
</script>

The event I’m trying to track is a pageload of a specific url.

On that specific page (and every page) I can see this script at the bottom, just above the closing body tag-

[swarnava (Swarnava Sengupta)]

Hello, yep it should:

import { GoogleTagManager, GoogleAnalytics } from '@next/third-parties/google'

...
  return (
   ...
        <Component {...pageProps} />

        <Footer />
        <GoogleTagManager gtmId="G-Wxxxxxxx" />
        <GoogleAnalytics gaId="G-Wxxxxxxx" />
        <GoogleTagManager gtmId="AW-xxxxxxx" />
        <GoogleAnalytics gaId="AW-xxxxxx" />
  );
};

You can file an issue here in case it’s not working as expected or Start a discussion in Next.js community.

You can also read how other have implemented it on GitHub

[bdlowery]

For reference, I commented out the <GoogleTagManager> component and I did this and it worked correctly first try.

Also, this is for tracking a conversion event on pageload. The tag works correctly otherwise.

export default function RootLayout({ children }: { children: React.ReactNode }) {
	return (
		<>
			{/* <GoogleTagManager gtmId="AW-xxxxxx" /> */}
			<Script src="https://www.googletagmanager.com/gtag/js?id=AW-xxxxxx" strategy="afterInteractive" />
			<Script id="google-analytics" strategy="afterInteractive">
				{`
				window.dataLayer = window.dataLayer || [];
				function gtag(){window.dataLayer.push(arguments);}
				gtag('js', new Date());

				gtag('config', 'AW-xxxxxx');
				`}
			</Script>
			<main className="flex-1">{children}</main>
		</>
	)
}