Converting Google Ads tag to Next Third Party sendGAEvent #62386

heldtogether · 2024-02-22T08:45:07Z

heldtogether
Feb 22, 2024

Summary

I'm trying to add Google Ads conversion tracking to my site. The tag they provide is:

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

  gtag('config', <ID>);
</script>

And to fire the event:

<!-- Event snippet for Page view conversion page -->
<script>
  gtag('event', 'conversion', {'send_to': '<ID>/<EVENT>'});
</script>

Following the documentation (https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries#sending-events), it seems like it's quite straightforward.

In layout.tsx, I've got:

<html lang="en">
      <body>
        {children}
        <GoogleAnalytics gaId=<ID> />
      </body>
    </html>

Then in page.tsx, I've got

export default function Home() {
  useEffect(() => {
    sendGAEvent({
      event: "conversion",
      value: { 'send_to': '<ID>/<EVENT>' },
    });
  }, []);
  ...

Using Tag Assistant (https://tagassistant.google.com/), I can see that the data layer is initialised but there's no conversion event firing. I accept the possibility that I've done something wrong here, but it also seems like the docs might not be up to date.

[EDIT: actually given the code above, the console gives the warning @next/third-parties: GA dataLayer dataLayer does not exist. When I change to put above the {children}, I don't get the warning but still no conversion event.]

Any help would be appreciated.

Additional information

No response

Example

No response

Answered by chuckwhisler

Jun 28, 2024

You are using Google Tag Manager so you have to change

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

Then in layout.tsx

You don't need this code:

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

  gtag('config', <ID>);
</script>

As this is automatically added by nextjs,

Then event using:

import { sendGTMEvent } from '@next/third-parties/google'

sendGTMEvent({ event: 'conversion', value: { 'send_to': '<ID>/<EVENT>' }})
I hope so this helps

View full answer

chuckwhisler · 2024-06-28T15:53:39Z

chuckwhisler
Jun 28, 2024

You are using Google Tag Manager so you have to change

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

Then in layout.tsx

You don't need this code:

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

  gtag('config', <ID>);
</script>

As this is automatically added by nextjs,

Then event using:

import { sendGTMEvent } from '@next/third-parties/google'

sendGTMEvent({ event: 'conversion', value: { 'send_to': '<ID>/<EVENT>' }})
I hope so this helps

0 replies

tobiholic · 2025-02-22T08:41:31Z

tobiholic
Feb 22, 2025

Hi all!

I know the answer has been provided to this issue already, but I am running in a similar problem and hope to find some help...

In my layout file, I added:

import { GoogleTagManager } from '@next/third-parties/google';
<GoogleTagManager gtmId="AW-12345678910" />

When I run the google tag extension in chrome, I get the following information:

Google tags found: AW-12345678910

So I guess the googleTag is setup correctly in my app.

In a dialog I created a form, where new users can sign up. If the sign up is successful, I want to fire the conversion:

 const onSubmit = handleSubmit(async (data) => {
   try {
     const response = await createUser(data);
     if (response.success) {

       sendGTMEvent({
         event: 'conversion',
         value: {
           send_to: '12345678910/<label>',
           value: 1.0,
           currency: 'EUR',
         },
       });

     } else  {
//handling error 
     } 
   } catch (error) {
     setError(
       'Ein unbekannter Fehler ist aufgetreten. Bitte versuche es erneut.'
     );
   }
 });

But still I cannot change the conversion status to active. When I try to trigger the conversion action with the tag assistant, it always fails and the conversion is not detected. But the user is created successfully.

I appreciate any tips or help, tried a lot already to get the conversion going..

Thanks all!

8 replies

zeke-john Apr 17, 2025

@tobiholic @peppa115 having the same issue, any update?
this is what my layout.tsx file looks like

import { GoogleAnalytics } from '@next/third-parties/google'
import { GoogleTagManager } from '@next/third-parties/google'
...
    return (
        <html lang="en">
            <GoogleTagManager gtmId="GTM-12345678" />
            <GoogleAnalytics gaId="AW-12345678" />
            <link rel="icon" href="/favicon.ico" sizes="any" />
...

and this is what my conversation tracking code looks like:

import { sendGTMEvent, sendGAEvent } from '@next/third-parties/google'
...
    const handleClick = () => {
        console.log('sending conversion event')
        sendGTMEvent({
            event: 'conversion',
            value: {
                send_to: 'AW-..../WXYZ....',
            },
        })
        console.log('sent conversion event')
    }
...

I can also see that the data layer is init, but there's no conversion event firing

(EDIT: I am testing this on localhost)

The-Professor99 May 6, 2025

The Google Ads (AW- IDs) setup is quite similar to that of Google Analytics (G- IDs).

For Google Ads (AW-), you should use the same <GoogleAnalytics> component with the gaId set to the AW-XXXXXXXXXX ID:

<GoogleAnalytics gaId="AW-XXXXXXXXXX" />

To send events or conversions for Google Ads, you can use:

sendGAEvent("event", "conversion", {
  send_to: "AW-XXXXXXXXXX/<label>",
  ...
});

For more details, refer to the GoogleAnalytics Third Parties Implementation and GoogleTagManager Third Parties Implementation. Compare both implementation with the Google Ads tag setup.

tobiholic May 6, 2025

Nice, thats it!! Finally the conversion is tracked. What I changed:

sendGAEvent({
          event: 'conversion',
          value: {
            send_to: 'AW-XX/XX',
            event_callback: 'callback',
            value: 1.0,
            currency: 'EUR',
          },
        });

to

sendGAEvent('event', 'conversion', {
          send_to: 'AW-xx/xx',
          event_callback: 'callback',
          value: 1.0,
          currency: 'EUR',
        });

and like @The-Professor99 said, using < GoogleAnalytics / > tag. Thanks for your input! :-)

valentinjurca May 14, 2025

@tobiholic @peppa115 having the same issue, any update? this is what my layout.tsx file looks like

import { GoogleAnalytics } from '@next/third-parties/google'
import { GoogleTagManager } from '@next/third-parties/google'
...
    return (
        <html lang="en">
            <GoogleTagManager gtmId="GTM-12345678" />
            <GoogleAnalytics gaId="AW-12345678" />
            <link rel="icon" href="/favicon.ico" sizes="any" />
...

and this is what my conversation tracking code looks like:

import { sendGTMEvent, sendGAEvent } from '@next/third-parties/google'
...
    const handleClick = () => {
        console.log('sending conversion event')
        sendGTMEvent({
            event: 'conversion',
            value: {
                send_to: 'AW-..../WXYZ....',
            },
        })
        console.log('sent conversion event')
    }
...

I can also see that the data layer is init, but there's no conversion event firing

(EDIT: I am testing this on localhost)

I'm having this same issue. Using both, can't send GTM events

tobiholic May 14, 2025

@valentinjurca , make sure to adjust your function from:

        sendGTMEvent({
            event: 'conversion',
            value: {
                send_to: 'AW-..../WXYZ....',
            },
        })

to

        sendGAEvent('event', 'conversion', {
          send_to: 'AW-1123456789/xxxxx',
          event_callback: 'callback',
          value: 1.0,
          currency: 'EUR',
        });

that worked for me. layout.tsx file with the < GoogleAnalytics /> looks good for me.

Converting Google Ads tag to Next Third Party sendGAEvent #62386

Uh oh!

Uh oh!

Summary

Additional information

Example

Replies: 2 comments · 8 replies

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 2 comments 8 replies