Next.jsで作ったサイトにGoogleアドセンスの広告を追加した

Next.js

AdSense

2024/11/03このページはPRを含みます

自動広告の追加方法

全ページに読み込ませたいのでlayout.tsxに書き込んだ。具体的には以下のようにした

import Script from "next/script";

（中略）

<body>
 <Script
  async
  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx"
  crossOrigin="anonymous"
  strategy="beforeInteractive"
></Script>
</body>

バナー広告の追加方法

サイドメニューにも広告を掲載したい。しかし自動広告だとうまいこと想定しているように表示させることができなかったのでバナー広告を掲載した。これも同様にそのままタグを埋め込むだけでは実装できなかったので、サイドメニューコンポーネントに以下を追加した。

      {/* AdSenseの広告タグ */}
      <ins
        className="adsbygoogle"
        style={{ display: "block" }}
        data-ad-client="ca-pub-xxxxxxxxxxxxxxxxx"
        data-ad-slot="xxxxxxxxxx"
        data-ad-format="auto"
        data-full-width-responsive="true"
      ></ins>

      {/* AdSenseのスクリプトを読み込む */}
      <Script id="adsbygoogle-init" strategy="afterInteractive">
        {`(adsbygoogle = window.adsbygoogle || []).push({});`}
      </Script>