Bootstrapを使ってAdsenseをレスポンシブに！！

こんばんは。やっとこさミーティングが終わった私です。
（現在帰宅途中！！）

今回はBootstrapを利用してAdsenseを最適化する方法を紹介したいと思います。

Adsenseの広告サイズに「レスポンシブ広告ユニット（ベータ版）」というものがありますが、これは推奨フォーマットではないようです。
Google側で画面サイズを計算して広告の大きさを動的に変化してくれるので、PCとスマホの両方を同じHTMLで表示している場合に大変便利です。
しかし。。。推奨でないということはクリック率が悪いというという事実もあります。

では、推奨の固定長フォーマットをうまく切り替えることができないか？

Bootstrapを利用することで、実現することができます。

<div class="row">
    <div class="hidden-xs">
        タブレット以上の固定長フォーマットのAdsenseコードを埋め込む
    </div>
</div>
<div class="row">
    <div class="visible-xs">
        スマホ用の固定長フォーマットのAdsenseコードを埋め込む
    </div>
</div> 

こうすることでタブレット以上とスマホで広告の表示を切り替えることができます。

ちなみに私の作成したビデオチャットデモでも上記手法でAdsenseの表示を切り替えています。

PCの画面

スマホの画面

こんな感じで、表示が切り替わっています。