Top Ad unit 728 × 90

Pick UP

recent

[広告]


Google Adsenseの「ページ単位の広告」Blogger導入時の注意点 | Blog運用

Google Adsenseの新広告?「ページ単位の広告」のBlogger導入時の注意点など。

Google Adsenseの「ページ単位の広告」Blogger導入時の注意点 | Blog運用



「ページ単位の広告の紹介」のお知らせ


用があって、Google AdsenseのWebサイトにログインしてみると、

ページ単位の広告の紹介

というお知らせが届いてた。

・ページの最下部に表示される「アンカー広告」
・ページ読み込み時に表示される「モバイル全画面広告」
 (いずれの広告もモバイル時に有効。)
が表示されるという。

しかも、このページ単位広告は、通常の1ページ3ユニット広告の制限数にカウントされないらしい。

とりあえず、導入してみることにする。

なお、
このお知らせが、全員なのか、条件にあったユーザーだけなのか、よく分からない。 Webで調べると、1月頃に導入している人もいる。 自分の場合は、1週間ほど前にGoogle AdsenseのWebサイトを見たときは、このようなお知らせはなかったと思う。


「ページ単位の広告」の設定・導入は簡単


設定は簡単で、
「アンカー広告」「モバイル全画面広告」のどれか、あるいは両方を利用するかをチェックして、生成されるコードをWebに埋め込むだけ。

埋め込んだ後に「アンカー広告」「モバイル全画面広告」の各ON・OFFは、管理画面から行えば済み、コードを変える必要はない。 これは便利。

なお、サイト運営者IDにつき、一つのコードが発行され、従来の広告ユニットのように、サイトごとに分けるということは不可能。


タグ内に入れれば済み、普通にAdsenseを導入しているユーザーならば、特に問題は無い作業。早速、4つほどのサイトに埋め込む。


問題発生


ここで、ひとつ問題にぶち当たる。

運営しているブログは、以前から、画面の最下部に広告が表示されるようにしている。

今回のコードを導入すると、PCの場合はいいのだが、モバイル時の広告が、従前のものと今回の「アンカー広告」で、表示が被ってしまう。これは、明らかにマズイ。

hatenaで運営しているブログは、PCとモバイルでの場合分けができるので、 モバイルの設定に、この「ページ単位の広告」コードを埋め込め、従前の最下部広告を外せば、対応は済んだ。

問題は、このブログが動いているBlogger。

使っているテンプレートがレスポンシブで、hatenaのような切り分けができない。 最下部広告を外せば、PC時の広告も消えてしまう。

PCとモバイル時の設定を分けるために、コードを自分で作らないといけない。

いろいろ調べても、よいサンプルがでなくて、けっきょく、適当に作ってしまった。


「ページ単位の広告」のための切り分けコード


作ったのは、こういう設定。
PCの場合は最下部に表示
モバイルの場合は下から45pxあけて、「アンカー広告」分のスペースを作る

それで作成したコードが、これ。

<style> #km_ad_div{ padding: 0; margin: 0 auto; width:100%; display: inline-block; position:fixed; bottom:0; left:0; z-index:1; } @media screen and (max-width: 700px) { #km_ad_div{ padding: 0; margin: 0 auto; width:100%; display: inline-block; position:fixed; bottom:45px; left:0; z-index:1; } } </style> <div id="km_ad_div"> <ins class="adsbygoogle" data-ad-client="ca-pub-XXX" data-ad-format="horizontal" data-ad-slot="XXX" style="display: block;"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>

「どうかな?」と思って、PCとスマホで表示を確認してみると、うまくいった。

All Rights Reserved by Kota MISHIMA note blog © 2014 - 2016
Powered By Blogger, Designed by Sweetheme

Contact Us

名前

メール *

メッセージ *

copyright kota MISHIMA. Powered by Blogger.