【Adsense】非同期リンク広告を可変にしてレスポンシブデザインに対応させる

　Adsenseにレスポンシブデザイン用の広告ユニットが登場して久しいですが、リンク広告は自動で可変しないので横幅に合わせて分岐処理を書かないといけません。

　広告コードの修正に関してのサンプルと注意点はAdsenseのヘルプに書かれていますが、非同期のリンク広告に関しては、少し中途半端な記述になっていると思います。特に、リンク広告を 468×15 から 200×90 に切り替える時にはどうしたら良いのか迷ってしまいます。

　パッと見たところでは日本語の記事は見当たらず、Digital Internals にちょっと見栄えの悪いコードが投稿されていたので、もう少し見栄え良くスマートに書けないかと試行錯誤してみました。

　まず、コードの説明の前に大切なことを１つお伝えしておきます。広告コードを修正するときには、やってはいけないことがあり、明文化されています。

１．display:none などを使用して広告ユニットを隠す（ただし、レスポンシブ広告ユニット）を実装している場合を除きます）

２．コンテンツを覆い隠すような方法で AdSense 広告コードを設定する

３．何らかの方法で 1 ページに 4 つ以上の AdSense 広告ユニットを表示する

４．非表示キーワード、iframe、その他の方法を使用して広告のターゲット設定を操作する

５．メールやソフトウェアで広告を配信する

６．広告ユニットをフロート表示させ、ユーザーの注意を不当に引き付ける

　また、リンクユニットのコード修正に関してはアドセンスチームから許可がおりてます。

　上記のことから公開するコードは個人的には規約違反ではないと自信満々ではありますが、各自自己責任で使用してください。コード使用の結果として発生した損害は負えませんのであらかじめご了承ください。

　それでは、リンク広告のコード修正でレスポンシブに対応する記述方法と説明です。

　まずは最終形のコードから公開です。感の良い方はこれだけでご理解いただけるかと思います。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block" data-ad-client="ca-pub-xxxxxxxx"></ins>
<script>
// xxxxxxxx はサイト運営者IDの数字部分 
google_ads_params = ["468", "15", "@@@"]; // @@@ は 広告ユニットのID
if (document.documentElement.clientWidth < 960) {
    google_ads_params = ["200", "90", "###"];  // ### は 広告ユニットのID
}
(adsbygoogle = window.adsbygoogle || []).push({
  params: {
    google_ad_width: google_ads_params[0],
    google_ad_height: google_ads_params[1],
    google_ad_slot: google_ads_params[2]
  }
});
</script>

// xxxxxxxx はサイト運営者IDの数字部分

google_ads_params = ["468", "15", "@@@"]; // @@@ は広告ユニットのID

if (document.documentElement.clientWidth < 960) {

google_ads_params = ["200", "90", "###"]; // ### は広告ユニットのID

}

(adsbygoogle = window.adsbygoogle || []).push({

params: {

google_ad_width: google_ads_params[0],

google_ad_height: google_ads_params[1],

google_ad_slot: google_ads_params[2]

}

});

</script>

　それでは説明をしていきます。今回は、表示横幅が960px以上の場合は 468×15 、960px未満の場合は 200×90 のリンク広告を表示するようにしました。

　まずは、adsenseの管理画面で 468×15 と 200×90 のリンク広告をそれぞれ作ってください。出来た非同期のコードはこんな感じになると思います。

<!-- リンク広告非同期コード 468x15 -->
<!-- linkunit async code 468x15 -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:468px;height:15px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
     data-ad-slot="@@@@@@@@@@"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<!-- リンク広告非同期コード 200x90 -->
<!-- linkunit async code 200x90 -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:200px;height:90px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
     data-ad-slot="##########"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<ins class="adsbygoogle"

style="display:inline-block;width:468px;height:15px"

data-ad-client="ca-pub-xxxxxxxxxxxxxxx"

data-ad-slot="@@@@@@@@@@"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

<ins class="adsbygoogle"

style="display:inline-block;width:200px;height:90px"

data-ad-client="ca-pub-xxxxxxxxxxxxxxx"

data-ad-slot="##########"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

　４行目から７行目,１５行目-１８行目をハイライトしていますが、２つの広告コードをよく見ると、この<ins>タグのアトリュビュート以外に違いがありません。もっとよく見ると、

<!-- リンク広告非同期コードのins部分 468x15 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:468px;height:15px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
     data-ad-slot="@@@@@@@@@@"></ins>
<script>
<!-- リンク広告非同期コードのins部分 200x90 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:200px;height:90px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
     data-ad-slot="##########"></ins>
<script>

<ins class="adsbygoogle"

style="display:inline-block;width:468px;height:15px"

data-ad-client="ca-pub-xxxxxxxxxxxxxxx"

data-ad-slot="@@@@@@@@@@"></ins>

<ins class="adsbygoogle"

style="display:inline-block;width:200px;height:90px"

data-ad-client="ca-pub-xxxxxxxxxxxxxxx"

data-ad-slot="##########"></ins>

　style の width, height と data-ad-slot の３つの値が違うだけとなっています。ということは、この３つの要素の値を書き換えれば良いということです。逆に言うと、他は固定ですから、まずは書き換える部分だけを消したコードを作ってしまいます。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
     ></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<ins class="adsbygoogle"

style="display:inline-block;"

data-ad-client="ca-pub-xxxxxxxxxxxxxxx"

></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

　あとは、条件に合わせて width, height, data-ad-slotの値を入れれば完成です。しかし、どう挿入していいのか謎ですよね。それは、

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

　で実現いたします。この部分が何をしてるのかよくわからなかったのですが、Google提供のサンプルコードを見ていると、<ins>タグ内のアトリュビュート、もしくはエレメントを書き換えることが可能なようです。「window.adsbygoogle || []」は window.adsbygoogle を新しい配列にコピーしたということでしょうか？わかる方、後学のためにご教示ください。

　<ins>タグ内の書き換え方としましては、paramsキーを使います。

(adsbygoogle = window.adsbygoogle || []).push({
  params: {
    google_ad_width: google_ads_params[0],
    google_ad_height: google_ads_params[1],
    google_ad_slot: google_ads_params[2]
  }
});

(adsbygoogle = window.adsbygoogle || []).push({

params: {

google_ad_width: google_ads_params[0],

google_ad_height: google_ads_params[1],

google_ad_slot: google_ads_params[2]

}

});

　となります。width が google_ad_width、height が google_ad_height、data-ad-slot が google_ad_slot に対応しています。あとは、任意で作成した配列google_ads_paramsに[width,height,data-ad-slot]の順序で、条件にあった値を入れれば完成です。今回は横幅を960pxに基準を定めると決めましたので、このようなJsになります。

<script>
google_ads_params = ["468", "15", "@@@@@@@@@@"];
if (document.documentElement.clientWidth < 960) {
    <!-- 横幅が960px以下なら 200x90 のリンク広告を表示する -->
    google_ads_params = ["200", "90", "##########"];
}
(adsbygoogle = window.adsbygoogle || []).push({
  params: {
    google_ad_width: google_ads_params[0],
    google_ad_height: google_ads_params[1],
    google_ad_slot: google_ads_params[2]
  }
});