ほねにくのうわずみ

私(@honeniq)の個人ブログです。日々の生活の中で感じた諸々のことから、人様にお見せできるような上澄み部分を抽出して投稿しています。

はてなブログの記事下のAdsenseをPC・スマホ版で切り替える方法

はてなブログにAdsense等を埋め込む際、挿入場所として使えるのはヘッダ・フッタ・サイドバー、そして記事ページ下部です。
記事ページの場合、「スマートフォン版にも表示する」という設定項目があるのですが、PC版向けに埋め込んだコードをそのまま表示するだけなので、色々と不都合があったりします。*1

なので、UserAgentで機種判別をして表示を切り替えるようにしてみました。


参考にしたのはこちらの記事。

screenshot
ユーザーエージェントによってPCとスマートフォン(iPhone / Android)を振り分ける方法いろいろ(PHP / JavaScript / .htaccess等) | HTML5 – CSS3 mag


埋め込み用コード例

サイト運営者IDとかは適当です。

<script type="text/javascript"><!--
google_ad_client = "ca-pub-0000000000000000)";    //Adsenseのサイト運営者ID
if ((navigator.userAgent.indexOf('iPhone') > 0 && 
     navigator.userAgent.indexOf('iPad') == -1) || 
     navigator.userAgent.indexOf('iPod') > 0 || 
     navigator.userAgent.indexOf('Android') > 0) {
    /* スマートフォン向けはこっち */
    google_ad_slot = "0000000000";    //広告ユニットのID
    google_ad_width = 000;    //横幅
    google_ad_height = 000;    //高さ
}
else {
    /* それ以外はこっち */
    google_ad_slot = "0000000000";
    google_ad_width = 000;
    google_ad_height = 000;
}
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

WindowsPhoneとかTizenがシェアを伸ばしてきたら、適宜条件を増やしましょう。


つかいかた

PC版とスマートフォン版で広告を分けたいので、Adsenseのサイトで広告ユニットを別個に作成します。
サイズはこのページを参考に。
モバイル広告 - AdSense ヘルプ

それぞれのユニットの広告コードを取得すると、こんな感じに出てくると思います。

<script type="text/javascript"><!--
google_ad_client = "ca-pub-1708252390535922";
/* うわずみ記事下モバイル */
google_ad_slot = "9971835900";
google_ad_width = 320;
google_ad_height = 50;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

この中から、

  • google_ad_client
  • google_ad_slot
  • google_ad_width
  • google_ad_height

の値だけ貰ってきて、上のコード例の同じ箇所を置き換えればOKです。


コードを貼り付けたら、「スマートフォン版にも表示する」にチェックを入れるのを忘れずに。
f:id:honeniq:20130913002912j:plain

*1:PC向けの広告サイズをスマートフォンで表示すると、画面からはみ出てしまったり。