AdSense で許可されているコードの変更サンプル（自分用）

前回までの更新
　・AdSense のコードは、どこまでの変更が OK なのか？
　・AdSense でテンプレートリテラルに挑戦（しなかった）
のつづき。
AdSense で許可されているコード変更のサンプルを、あらためてこのページにまとめておく。

なぜ、まとめ直す？

さあ、実際にレスポンシブなサイトを作って、それに最適化された AdSense コードを用意しよう･･･！ と思ったは良いが、「ダメな例」より「OKな例」を手元に用意しておいた方が効率が良い。。。と今さらながら気が付いた為だ。

つまり、このページは完全に自分が使いやすい様にまとめている。
細かい説明は一切なし。

とりあえず、以下のルールで掲載する。

・情報源は、Google 公式ページのみ
・自分で調べた範囲内の情報のみ
・今後 自分で使うであろう方法のみ
・「ABテスト」や「同期広告コード」については、このページでは除外

※ 自分で確認しやすい様に、ここに掲載する時点で公式ページのコードは「ある程度」の改変を行っている。

調査日: 2026年 02月04～05日

デフォルトのコード

まずは、AdSense で発行される「通常」のコード（レスポンシブ）を書いておく。
これから提示するコードと見比べるためである。

• ディスプレイ広告ユニット
  （通常の手順で発行したもの / レスポンシブ）
  
  • 非同期広告コード:
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxx"
    crossorigin="anonymous"></script>
    <!-- 自分で付けた広告名がここに入る -->
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-xxxxxxxxxxxxxx"
         data-ad-slot="1234567890"
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

まあ、普通にコードを発行すると上記のようなコードを貰えるハズ。

まえおきここまで。以下本文。
AdSense 公式ドキュメントで提示されたコード変更サンプルである。

改変OKその1

AdSense 広告コードの修正 - Google AdSense ヘルプ

• ① 動的にカスタム チャネルを設定する
  javascript で
  変数「channel_condition」等を用意して、
  複数のカスタム チャネルを切り替える、という方法。
  
  • 非同期広告コード:
    <script async src="http://pagead2.googlesyndication.com/pagead/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxx" crossorigin="anonymous"">
    <ins class="adsbygoogle"
         style="display:inline-block;width:728px;height:90px"
         data-ad-client="ca-publisher-id"
         data-ad-slot="1234567890">
    </ins>
    <!-- 公式ヘルプでは、ここにコメントなし -->
    <script>
         channel_condition = object.booleanMethod();
         if (channel_condition) {
             my_google_ad_channel = '123457789';
         }
         else {
             my_google_ad_channel = '263477489';
         }
          (adsbygoogle = window.adsbygoogle || []).push({
         params: { google_ad_channel: my_google_ad_channel }
         });
    </script>
• ② 広告タグを最小化
  何が「最小化」なのかちょっと良くわからない。
  末尾の<script>の改行は繋げて構わない、は確定だろう。
  <ins>内の重要度の低いパラメータも消してよい、という意味もあるのだろうか？
  
  • 非同期広告コード:
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxx" crossorigin="anonymous""></script>
    <ins class="adsbygoogle"
         style="display:inline-block;width:728px;height:90px"
         data-ad-client="ca-pub-xxxxxxxxxxxxxx"
         data-ad-slot="1234567890"></ins>
    <!-- 公式ヘルプでは、ここにコメントなし -->
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

改変OKその2

レスポンシブ広告コードを修正する方法 - Google AdSense ヘルプ

• 最初に注意！
  
  • 注: コピーしたレスポンシブ広告コードを変更する場合は、次の 2 行を削除する必要があります。
    data-ad-format="auto"
    data-full-width-responsive="true"
• ① 画面の幅ごとに正確な広告ユニットサイズを指定する広告コードの例:
  
  例えば、こんなふうに広告サイズを切り替えたいとする
  画面幅 500px 未満　　: 広告ユニット 320×100
  画面幅 500px～799px : 広告ユニット 468×60
  画面幅 800px 以上　　: 広告ユニット 728×90
• この場合、<ins> の class名に、
  レスポンシブ用の 自前の class を追加してもよい、という事らしい。
  そして、スタイルは ins タグに適用する。
  
  • <style>
    .example_responsive_1
         { width: 320px; height: 100px; }
    @media(min-width: 500px)
         { .example_responsive_1 { width: 468px; height: 60px; } }
    @media(min-width: 800px)
         { .example_responsive_1 { width: 728px; height: 90px; } }
    </style>
    
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
    <!-- example_responsive_1 -->
    <ins class="adsbygoogle example_responsive_1"
         style="display:block"
         data-ad-client="ca-pub-1234567890123456"
         data-ad-slot="1234567890"></ins>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
• ② 幅の拡張範囲と高さの固定値を指定する場合の例
  
  • レスポンシブ広告コードを修正して
    高さを 90 ピクセルに固定し、
    幅が 400～970 ピクセルの範囲で変わるように指定する方法を示すもの。
  • <ins class="adsbygoogle"
         style="display:block;
             min-width:400px;
             max-width:970px;
             width:100%;
             height:90px"
    data-ad-client="ca-pub-1234567890123456"
    data-ad-slot="5678"></ins>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
• ③ 画面の幅ごとに正確なサイズを指定する場合の例
  （１つ目の例とほぼおなじ？）
  
  • 各種デバイスでのレスポンシブ サイトに最適な広告ユニットのサイズがわかれば、CSS3 メディアクエリを使ってレスポンシブ広告ユニットのサイズを設定することができます。
    CSS3 メディアクエリを使用するよう広告コードを修正する方法は、次の例からご確認ください。
  • <style type="text/css">
       .adslot_1 { width: 320px; height: 100px; }
    @media (min-width:500px) {
       .adslot_1 { width: 468px; height: 60px; } }
    @media (min-width:800px) {
       .adslot_1 { width: 728px; height: 90px; } }
    </style>
    <ins class="adsbygoogle adslot_1"
    style="display:block;"
    data-ad-client="ca-pub-1234567890123456"
    data-ad-slot="5678"></ins>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
• ④ 広告ユニットを隠す
  小型のモバイル デバイスなどで、広告をまったく表示しないようにしたいときは、
  パラメータに CSS メディアクエリを設定し、広告リクエストが作成されないようにして、広告が表示されないようにします。
  
  • 決まった画面サイズにのみ広告を表示するには、CSS3 メディアクエリを使用して特定の画面サイズで広告を隠すように広告コードを変更します。
  • <style type="text/css">
        .adslot_1 { display:block; width: 320px; height: 50px; }
    @media (max-width:400px) {
        .adslot_1 { display: none; } }
    @media (min-width:500px) {
        .adslot_1 { width: 468px; height: 60px; } }
    @media (min-width:800px) {
        .adslot_1 { width: 728px; height: 90px; } }
    </style>
    <ins class="adsbygoogle adslot_1"
           data-ad-client="ca-pub-1234567890123456"
           data-ad-slot="5678"></ins>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>　　
  • この例では、画面の幅が 400 ピクセル未満の場合は広告が表示されません。
  • 注: コピーしたレスポンシブ広告コードを変更する場合は、次の 2 行を削除する必要があります。
    data-ad-format="auto"
    data-full-width-responsive="true"

改変OK その3

An async script for AdSense tagging - Google Developers Blog（.js の読み込みは1回だけでよい）

• <script async
  src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  の部分は、ページ内に複数の広告があっても1回だけ記述すれば良い。
  ※注: これは公式ドキュメントではなく、Google 開発者ブログ。
  
  • 原文
    A script, which only needs to appear once on your page, even if you have multiple ads. It is loaded asynchronously, so it is safe and most efficient to put it near the top.
  • 和訳
    このスクリプトは、複数の広告を掲載している場合でも、ページに一度だけ表示すれば十分です。非同期で読み込まれるため、ページの先頭付近に配置するのが安全かつ最も効率的です。
  • 注) 2013年7月2日 公開の記事。かなり古い。

その他の注意点

固定サイズのディスプレイ広告ユニットのガイドライン - Google AdSense ヘルプ

• 固定サイズの広告は AdSense の広告のプレースメントに関するポリシーに準拠する必要があります。その上で、次のサイズ制限が適用されます。
  
  • 450 ピクセルを超えてよいのは高さか幅のどちらか一方のみ
  • 最小幅は 120 ピクセル
  • 最小高さは 50 ピクセル
  • 高さと幅のどちらも 1,200 ピクセルまで
  • 注: ポリシーは随時変更されます
    　　このページの情報を定期的にご確認ください。

「450 ピクセルを超えてよいのは高さか幅のどちらか一方のみ」とか、「最大1200 ピクセルまで」とか、知らんかった。
気を付けよう。

このページの情報は以上。