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キーで判定

PWAアプリにクイックショートカットを追加する

manifest.jsonにshortcutsを追加

Next.js 10.0.1 + React 17.0の環境でTypeError: Object(...) is not a functionエラーが発生

一つ前のReact 16.13に下げてみたらエラーが解消された

Next.jsプロジェクトにTypescriptを導入する

チュートリアルが充実してる

Next.js + typescriptでpathsのエイリアスがModule not foundになる

next.config.jsに追記する必要があった