Google Adsense Question #32323

JamesSingleton · 2021-12-09T15:51:28Z

JamesSingleton
Dec 9, 2021

So I have looked through the one or two questions already here about Google AdSense but nothing seems "definitive" in my opinion. Some same you should add this script to the _document.tsx

import Document, { Head, Html, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    const ADSENSE_ID = process.env.NEXT_PUBLIC_ADSENSE_ID
    return (
      <Html lang="en-US" className="h-full bg-gray-100">
        <Head>
          <script
            async
            src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?${ADSENSE_ID}`}
          />
        </Head>
        <body className="loading h-full">
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

And then put the .push({}) in the Ad Component you make like:

import { useEffect, FC } from 'react'

declare global {
  interface Window {
    adsbygoogle: { [key: string]: unknown }[]
  }
}

interface AdBannerProps {
  adSlot: number
}

const AdBanner: FC<AdBannerProps> = ({ adSlot }) => {
  const ADSENSE_ID = process.env.NEXT_PUBLIC_ADSENSE_ID
  useEffect(() => {
    if (typeof window !== 'undefined') {
      ;(window.adsbygoogle = window.adsbygoogle || []).push({})
    }
  }, [])
  return (
    <ins
      className="adsbygoogle adbanner-customize"
      style={{
        display: 'block',
      }}
      data-ad-client={ADSENSE_ID}
      data-ad-slot={adSlot}
      data-ad-format="auto"
      data-full-width-responsive="true"
    />
  )
}

export default AdBanner

But then there is the suggestion of using next/script and adding both of those to the _app.tsx file:

import Script from 'next/script'

const App = ({ Component, pageProps }) => {
  const ADSENSE_ID = process.env.NEXT_PUBLIC_ADSENSE_ID

  return (
    <>
      {/* Global Site Tag (gtag.js) - Google Analytics */}
      <Script
        strategy="afterInteractive"
        src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?${ADSENSE_ID}`}
      />
      <Script
        id="adsbygoogle-init"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
          (adsbygoogle = window.adsbygoogle || []).push({
            google_ad_client: {ADSENSE_ID},
            enable_page_level_ads: true
       });
          `,
        }}
      />
      <Component {...pageProps} />
    </>
  )
}

export default App

Google says that pagead2 script needs to be in the <head /> so my assumption is to add it in the _document.tsx... But I am unsure about the other part.

ghost · 2022-06-25T19:44:14Z

ghost
Jun 25, 2022

same issue here getting adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX AdSense head tag doesn't support data-nscript attribute.

1 reply

permlap-phola Nov 14, 2023

Can you find the solution for this?

AibSyed · 2023-07-22T00:09:46Z

AibSyed
Jul 22, 2023

@JamesSingleton was this issue ever resolved? I'm currently having the same problem.

1 reply

JamesSingleton Jul 22, 2023
Author

I never got it working for me, for whatever reason Google Ads doesn't want to put ads on my website that averages about 7,700 page views a month 🤷🏻‍♂️ so I removed the code from my application.

Focus-me34 · 2024-11-04T10:43:39Z

Focus-me34
Nov 4, 2024

🆙
I'm having the same issue as you guys did 3 years ago... "AdSense head tag doesn't support data-nscript attribute." is the error I get in the logs of my Next app (app router).
I'm using the Script component provided by nextJs. I'm surprised that this issue hasn't been solved yet. I just started investigating though. I'll come back with the answer if I find any 👍🏼

3 replies

AibSyed Nov 5, 2024

🆙 I'm having the same issue as you guys did 3 years ago... "AdSense head tag doesn't support data-nscript attribute." is the error I get in the logs of my Next app (app router). I'm using the Script component provided by nextJs. I'm surprised that this issue hasn't been solved yet. I just started investigating though. I'll come back with the answer if I find any 👍🏼

Not sure what version of Next.js you're currently on, but when I was dealing with this, I was running v13.4.7 with the Pages Router.

What worked for me was adding the AdSense <script> directly in _document.js like this:

import Document, { Html, Head, Main, NextScript } from 'next/document';

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <meta charSet="UTF-8" />
          {/* Adding Google AdSense script directly */}
          <script
            src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.NEXT_PUBLIC_GOOGLE_ADS_CLIENT_ID}`}
            async
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

By adding the AdSense script directly in the <Head>, I bypassed the Next.js Script component, which usually adds a data-nscript attribute that AdSense doesn’t support. This approach worked without errors.

Hope this helps!

caio303 Mar 6, 2025

@AibSyed had the same problem here and your fix worked for me, thanks!

AibSyed Mar 6, 2025

@AibSyed had the same problem here and your fix worked for me, thanks!

Awesome, happy to help!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Google Adsense Question #32323

{{title}}

Replies: 3 comments 5 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Google Adsense Question #32323

Replies: 3 comments · 5 replies

JamesSingleton Jul 22, 2023 Author

Replies: 3 comments 5 replies

JamesSingleton Jul 22, 2023
Author