モバイル用追跡型広告の追加


iPhoneなどのスマートフォン端末でwordpressのブログ記事を見たときに画面の一番下の位置に固定される追跡型広告を設置しようと思いました。少々ユーザーに取っては邪魔になるかもしれませんが、クリック率が高くなるようです。(私もiPhoneのsafariでメニューを開くために一番下をタップする際に、何度か押してしまった経験があります。。)

今回はGoogle Adsenseを使用して、wordpressのプラグインを一切用いることなく、そのようなフッター固定(Sticky footer)の追跡型広告実現方法をご紹介します!

1. google adsenseの広告の追加でレスポンシブのものを一つ追加
アドセンスのページのMy adsタブにある”New ad unit”をクリック。種類のプルダウンの中に”Responsive ad unit (BETA)”という項目があるので、選択して適当に色などを決めて広告を作成します。

スクリーンショット 2014-06-05 8.49.59

レスポンシブを選ぶことによって画面サイズ(PC/モバイル)に応じて広告の大きさを自動で調整してくれます。まだベータ版のようですが、今のところ問題なく動いているようです。

2. WordPressの管理画面のwidget編集で、TextウィジェットをFooter Widget 1の中にドラッグ
スクリーンショット 2014-06-05 8.56.06

配置したTextウィジェットの中に以下のように”stickyFooter”というクラスを指定したdiv要素の中に、1で得たadsenseのコードをコピペします。

<div class="stickyFooter">
[Adsenseで取得したコード張り付け]
</div>

3. ボトム固定(Sticky)にするためにstyleを編集
wordpressの管理画面のAppearance->Editorを開いて、style.cssを編集します。わかりやすく、末尾に以下のスタイルを追加しましょう。モバイルなどの画面が小さい環境ではposition:fixedを追加して、それ以外の場合はフッターの中央に普通に配置するようにしています(テーマによっては調整が必要かもしれません。)

/* adsense sticky footer */
#footer-area .footer-widget-area {
   padding: 12px;
}

#footer-area .footer-widget-area .footer-widget {
   margin: 0px auto;
   float: none;
}

#footer-area .footer-widget-area .stickyFooter {
   width: 100%;
   height: 80px;
}

@media (max-width: 767px) {
#footer-area .footer-widget-area .stickyFooter {
     position: fixed;
     left: 0px;
     bottom: 0px;
     height: auto;
  }
}

これでPCで見るときは追跡型にはならず、モバイルで見ると追跡型になるのが確認できると思います。

スクリーンショット 2014-06-05 8.44.32