TorqueNap LogoTorqueNap Blog
← Techに戻る

Next.jsアプリでGoogle AdSense広告が表示される仕組みを解説

2025-08-04
#Next.js#Google AdSense#React
Next.jsアプリでGoogle AdSense広告が表示される仕組みを解説

自分のウェブサイトにGoogle AdSenseを導入したものの、具体的にどういう流れで広告が表示されるのか、気になったことはありませんか？

この記事では、Next.jsで構築されたブログを例に、AdSense広告が表示されるまでの技術的な流れを3つのステップに分けて、図解も交えながら分かりやすく解説します。

広告表示の全体像

AdSense広告の表示は、大きく分けて以下の3つの要素が連携して行われます。

  1. 司令塔となるスクリプト (adsbygoogle.js): サイト全体で読み込まれ、すべての広告ユニットを管理します。
  2. 広告スペースを確保するコンポーネント: 「ここに広告を表示したい」という場所をページ上に確保します。
  3. Googleの広告サーバー: サイトの情報や訪れたユーザーに最適な広告を配信します。

それでは、具体的なステップを見ていきましょう。

ステップ1：司令塔スクリプトの読み込み

まず、サイトのすべてのページで基本となるレイアウトファイル (app/layout.tsxなど) の<head>タグ内に、AdSenseの司令塔となるスクリプトを配置します。

html:app/layout.tsx
<head>
  ...
  {/* Google AdSense スクリプト */}
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxx"
     crossorigin="anonymous"></script>
  ...
</head>

この一行が、ページ上でAdSenseを機能させるためのすべての処理の起点となります。async属性によってページの読み込みを妨げることなく、バックグラウンドでスクリプトがダウンロード・実行されます。

ステップ2：広告スペースの確保

次に、広告を表示したい具体的な場所に、「広告スペース（広告ユニット）」を確保します。今回の例では、AdBanner.tsx というReactコンポーネントがその役割を担います。

このコンポーネントは、useEffect を利用して、以下のような特別な意味を持つHTMLタグ (<ins>) を動的に生成します。

javascript:app/components/AdBanner.tsx
// ...
useEffect(() => {
  // <ins> タグを生成
  const adSlot = document.createElement('ins');
  
  // "adsbygoogle"クラスが、司令塔スクリプトへの目印となる
  adSlot.className = 'adsbygoogle';
  adSlot.style.display = 'block';
  
  // 運営者IDや広告ユニットIDを設定
  adSlot.dataset.adClient = 'ca-pub-XXXXXXXXXX';
  adSlot.dataset.adSlot = 'xxxxxxxxxx';
  
  // 生成した<ins>タグをDOMに追加
  adRef.current.appendChild(adSlot);

  // ...
}, []);
// ...

ここでのポイントは class="adsbygoogle" です。ステップ1で読み込まれた司令塔スクリプトは、ページ内にこのクラス名を持つ要素を探し、広告表示のターゲットとして認識します。

ステップ3：広告のリクエストと表示

広告スペースの準備が整ったら、いよいよ広告の表示をリクエストします。AdBanner.tsxコンポーネントは、<ins>タグをDOMに追加した後、以下のコードを実行します。

javascript:app/components/AdBanner.tsx
// ...
try {
  // 司令塔スクriptに広告表示を依頼
  (window.adsbygoogle = window.adsbygoogle || []).push({});
} catch (error) {
  console.error('AdSense error:', error);
}
// ...

この (window.adsbygoogle = window.adsbygoogle || []).push({}); という一行が、「ページの準備ができたので、確保したスペースに広告を表示してください」という正式なリクエストの合図となります。

この合図を受け取った司令塔スクリプトは、以下の処理をバックグラウンドで行います。

  1. ページ内の<ins class="adsbygoogle">要素をすべて見つけます。
  2. ページのコンテンツ内容や訪問者の情報（Cookieなど）を集めます。
  3. これらの情報をGoogleの広告サーバーに送信し、最適な広告をリクエストします。
  4. 広告サーバーから返却された広告データ（画像、テキスト、リンク先など）を、<ins>要素の中に埋め込みます。

この結果、ユーザーの画面に広告が表示されるのです。

全体の流れを図で理解する

ここまでの流れをシーケンス図にまとめると、各要素の通信の流れがより明確になります。

まとめ

Google AdSense広告が表示される仕組みは、以下の3ステップの連携によって成り立っています。

  1. app/layout.tsx: サイトの土台として、司令塔となるadsbygoogle.jsを読み込む。
  2. AdBanner.tsx: 広告を表示したい場所に<ins class="adsbygoogle">という目印（広告ユニット）を設置する。
  3. adsbygoogle.push({}): 司令塔に「広告を表示せよ」という命令を出す。

このように、一見複雑に見える広告表示も、役割分担されたスクリプトとコンポーネントが連携することで実現されています。この仕組みを理解することで、広告に関する問題が発生した際のトラブルシューティングにも役立つはずです。