How to get Nextjs’s GoogleTagManager component working with Google Ads conversions

[bdlowery]

Summary

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 Google 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>
		</>
	)
}

It's not a custom event (like a button click), it's a page load event for a specific page. Google says I can just use a generic gtag script for events like this... which means I should be able to use the <GoogleTagManager component right?

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 page load 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 (this is from the <GoogleTagManager> component example) -

I commented out the <GoogleTagManager> component from the first code snippet and replaced it with the raw script Google wants... and it worked correctly first try with the Tag Assistant Companion (you need to use this to confirm a conversion event is working):

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>
		</>
	)
}

Am I doing something wrong? Why can't Google verify my page load as a conversion with the official third-party nextjs component? If they go to the /checkout/success page it should count as a conversion, but it only works if I change from using <GoogleTagManager> to the raw js script.

Additional information

No response

Example

No response

[EzXabi]

Bump

[kulterryan]

+1

[grynix]

The <GoogleTagManager> only pushes gtm.start to the dataLayer, while the google ads scripts need probably both config and js as well.

I wouldn't worry much about using the raw js script, this is not a super complex component.
https://github.com/vercel/next.js/blob/canary/packages/third-parties/src/google/gtm.tsx