Next.jsでAdsenseタグを埋め込んだら Only one AdSense head tag supported per page エラーが発生

公開日時

Next.jsで作られたサイトにAdsense用のscriptタグを埋め込む際に、↓のようにcomponent内でタグ埋め込みを行っていた。

// components/Header.tsx
import Head from 'next/head'

export const Header = () => {
  const adsenseId = process.env.NEXT_PUBLIC_ADSENSE_ID

  return (
    <Head>
      <script
        data-ad-client={adsenseId}
        async
        src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" 
      />
    </Head>
  )
}

デプロイ後にDeveloperConsoleを開いて確認してみたところ、以下のエラーが発生していた。

adsbygoogle.push() error: Only one AdSense head tag supported per page.
The second tag is ignored.

headタグの中身を動的に書き換える際にタグが再度追加されてしまいエラーが起きていた模様。

そこで、 pages/_document.tsx にscriptタグを移動しサーバサイドレンダリングするように変更した。

// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    const adsenseId = process.env.NEXT_PUBLIC_ADSENSE_ID

    return (
      <Html>
        <Head>
          <script
            data-ad-client={adsenseId}
            async
            src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

これでエラーなくscriptタグが設置できた。

参考


Related #next.js

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

Next.js 11

手軽にアップグレードできた

VercelのNode.jsバージョンを変更する

Settings => General => Node.js Version から変更できる

FigmaでSVG Octocatを作る その3

アウトライン化大事