2021-10-03 2021-10-03
BlogManagement, Google, GoogleAdsense

1つのページ内に複数のGoogle広告を掲載する

複数のGoogle Adsense広告を同一ページ内に掲載していたところ, Google ChromeのInspectのconsole欄に


xxxxxxxxxx
adsbygoogle.push() error: Only one AdSense head tag supported per page......

といったエラーが出ていることに気づいたので, 修正した.

結果的に言うと, Google Adsenseのコードを単純に複数箇所コピペしてしまっていると発生するエラーだった. Google Adsenseのコードの中には1回だけで良い部分があったので, そこをHeadに持ってくれば解決する.

エラー

Google Adsenseの広告を選択してコードを表示すると下記のようなHTMLコードが表示される.

0_adsense


xxxxxxxxxx
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456"  crossorigin="anonymous"></script>
<!-- ad-display-portrait -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-123456789012345"
     data-ad-slot="1234567890123"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Google Adsense広告を1つだけ貼り付けた場合は上記コードのコピペで問題ない. しかし, このコードを複数箇所にコピペするとエラーが発生する.

エラーの確認はGoogle ChromeのInspectのConsole欄などで閲覧可能.

実際のエラーが下図:

1_before

上図の通り,


xxxxxxxxxx
Uncaught
N {message: 'adsbygoogle.push() error: Only one AdSense head tag supported per page. The second tag is ignored.' ......

といったエラーが発生している.

この状態でも広告自体は表示されていた. なので, error文にある通り, 2回目の必要箇所は無視されて処理されていたのかも.

問題箇所

上記のHTMLコードの中で問題となっていたのは, コード冒頭の


xxxxxxxxxx
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456"  crossorigin="anonymous"></script>

と言う箇所.

このコードが1つのページ内に複数記載されていると, まさしく Only one AdSense head tag supported per page という注意を受けるようだ.

したがって, この箇所をhtmlファイル内のHead内に入れるとようにしてやれば解決する.

問題解決

解決前

まず, 問題発生していた際の例を下記に記す.


xxxxxxxxxx
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width initial-scale=1'>
    :
    :
</head>
<body>
    :
    :
    :
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456"  crossorigin="anonymous"></script>
    <!-- ad-display-portrait -->
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-123456789012345"
         data-ad-slot="1234567890123"
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    :
    :
    :
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456"  crossorigin="anonymous"></script>
    <!-- ad-display-portrait -->
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-123456789012345"
         data-ad-slot="1234567890123"
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    :
    :
    :
</body>
</html>

上述の問題箇所のセクションに記載したように,


xxxxxxxxxx
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456"  crossorigin="anonymous"></script>

が同一ページ内に2回書かれてしまっており, 問題である.

解決後

問題解決した例が下記である.


xxxxxxxxxx
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width initial-scale=1'>
    :
    :
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456"  crossorigin="anonymous"></script>
    :
    :  
</head>
<body>
    :
    :
    :
    <!-- ad-display-portrait -->
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-123456789012345"
         data-ad-slot="1234567890123"
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    :
    :
    :
    <!-- ad-display-portrait -->
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-123456789012345"
         data-ad-slot="1234567890123"
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    :
    :
    :
</body>
</html>

そもそもの問題であった,


xxxxxxxxxx
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456"  crossorigin="anonymous"></script>