jQuery MobileにGoogle Adsenseをブチ込む裏ワザ

jQuery MobileにGoogle Adsenseをブチ込む裏ワザ

コメント 0件のコメント

※この内容はjQuery1.4.3に準拠します。その他のVer.では動作確認していません。

jQuery Mobile、便利ですよね。

現在、最新版は1.4.5で僕は1.4.3を利用していますが1.3.x以前のバージョンでも基本的には1枚のHTMLに複数のページ内容を記述してAjaxでコンテンツ内容を入れ替える仕組みになっているjQuery Mobile.

そして利用している人なら御存知の通りGoogle Adsenseとの相性が最悪。

全ページにGoogle Adsenseのコードを普段通り書き込んでも上から数えて最初の2,3個しか表示されません。

これはGoogle Adsenseの規約に同一ページ内に表示できる同一種類のAdsense広告は3つまでと決まっていから。

それ以上コードを書き込んでも大きなスペースが空くだけで肝心の広告は表示されません。

これでは単にソースを重たくするだけで何の意味もない。

日本語、英語と色々ググってみましたが主流なやり方は２つですが、問題が色々。

jQuery MobileにGoogle Adsenseを設置する上での諸問題点と、今回紹介する3つ目の裏ワザ的な方法を紹介します。

１）jQueryのAjaxでのページ遷移をオフにする方法。

ソースに以下の一行を書き加えるだけ。

$.mobile.ajaxEnabled = false;

しかしこれはせっかくのjQuery Mobileの利点を消し去っているようなものです。

デフォルトでれば部分的にソースを読み込んで差し替えているだけですが、Ajaxを切るということは遷移の度に全ソースを読み込んで表示しています。

更に広告のソースも貼り付ける分だけ書き込まなければならないのでクライアントによってはモッサリ感が半端じゃない。

その他にも色々と問題があるようでそれについては下記のブログに詳しく書かれています。

そろそろjQuery Mobileでajaxを無効にしてるやつに一言いっておくか｜へっぽこプログラマーの日記

２）Adsense広告をiframe内に表示する

やり方は以下のとおり。

HTML内のJS部分

jQueryソース

$(window).load(function() {
    var ads_top = $("#adsense_top").find("iframe");
    $(ads_top).appendTo("#google_ads_top div");
    $("#adsense_top").remove();
    $("section").live("pagehide", function(event, ui) {
        $(ads_top).appendTo("#google_ads_top div");
    });
});

参照：jQueryMobileでGoogle Adsenseを使う | @thoriki

このソースはsectionタグがあるあたり1.4.3より古いバージョンみたいですが適宜書き換えましょう。

他にも英語ソースのStackOverflowやjQueryのフォーラムにも似たようなソースがありました。

これは結構良さそうと思ったのですが、試していません。

なぜならGoogleのフォーラムに以下のような書き込みがありました。

Query Mobileでの作成サイトにGoogleAdsenseを張り付ける方法について

質問：
Query Mobileを使用してスマートフォン用のサイトを作成し、モバイル コンテンツ向け AdSenseコードを張り付けました。
通常の処理においては問題ないのですが、戻るボタンを押してページを表示した場合にAdsenseだけがページに表示さ
れる現象が起きます。
————中略————

確かに、iframeを利用したら当現象はおきなくなりました。
しかし、iframe内のGoogleAdsenseの利用については、「Google 広告を iframe に配置することも禁止されます。」
との記述があり、iframeを使用することに若干抵抗があります。
他に良い解決策はありませんか？またポリシー違反にならないかを教えてください。
答え：
jQuery Mobile のサイトに AdSense を表示する件について、 いかなる理由でも iframe 内に広告を埋め込むことは認められませんのでご注意ください。

というわけでこの方法、かなり浸透しているものの実は規約違反。

そこでこれらの問題を両方パスできる今回の裏ワザです。

３）HTMLタグの外側に広告を埋め込む。

jQuery遷移の度にクライアントに表示されるソースがヘッダーから丸々変わってしまうjQuery Mobile。

ならばその処理が適応される範囲外、つまり<HTML></HTML>の外側に書いてしまえば良いのではないか。

そしてその要素のpositionをfixにしてz-indexにjQM内で使われている最大値より大きな値をセットすればどの要素よりも優先的に表示されます。

ページが遷移しても広告は切り替わりません。

広告の読み込みもリロードしない限り１回きりなので３つの方法の中では読み込み速度も一番軽いと思います。

いくら遷移しても表示されている広告はそのまま。

CSSだけで表示場所も好きに移動可能です。

ソースはこちら。

<!doctype html>
<style>
.ads{//広告を表示する要素
  position: fixed;
  bottom: 60px;
  z-index: 1000001;//ここが重要
  width: 100%;
  height: 100px;
  text-align: center;
}
.footer{//フッター上部に余白を作り要素の被り防止
  margin-top:100px; 
}

//広告コードはそのままでOK。
</style>
<div class="ads">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<html>


//HTML内容


</html>

まさにHTMLのルールをブチ破った型破りな裏ワザ。

利点はCSSとHTMLだけでjQueryや広告のJavaScriptを改変しなくていいので凄く簡単。

この方法で設置したものがこちら。

スポーツで使えるお役立ちツール | cityJumperWEB.com

勿論W3CやAnother HTML-lint 5には思い切り弾かれるでしょうが、それが一体どれだけページ品質に悪影響を及ぼすかなんてたかが知れています。

責めるなら現状で正攻法でAdsenseが設置出来るようになっていないjQuery MobileさんかGoogle様を責めて下さい。

どの方法を選ぶかはあなた次第。

１）の方法でjQueryの利点を殺して、ユーザーに更なるモッサリ感を与えてまでAjaxを無効にする。

２）の方法で最悪Adsenseの利用を制限される可能性があるが、Google様の定めた規約を破る。

３）形骸化されたルールを無視して１）と２）の問題をパスする。

とりあえず僕は今回紹介した裏ワザ、３）の方法で設置しています。

大丈夫だと思いますがググっても同じ方法で設置している人は見つからなかったので、何か問題が起こり次第当ブログにて報告致します。

※何故か表示される時とされない時（内部リンクから飛んだ時）がある問題については現在調査中。

ほっといたら直ってるのでGoogleサイドの問題かなーと思います。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です