jQuery Mobile を使っているサイトでGoogle Adsenseを表示させる方法。

jQuery Mobile を使っているサイトで Google Adsense が上手く表示されない事があります。

これは、 jQuery Mobile が デフォルトで Ajax式のハイパーリンクを有効しているから。

これが Google Adsense に悪さをしています。

Google Adsense は、1つのページに広告は3つまでにしてくださいという規約があります。
それ以上の数を表示しようとすると表示しませんよ、と言っています。

jQuery MobileのAjax式のハイパーリンクは、リンク先のページを非同期通信で読み込み、表示中の文書ツリーに取り込んだ上でページを遷移します。

その、表示中の文書ツリーに取り込んだ時点でバナーの数が3つを超えたら、バナーが表示されない、またはバナーだけが表示されてしまう(ことも環境によりあるらしい)ように見えます。
※詳しくは検証していません。また、Googleの仕様やjQueryの仕様変更によりこの現象は再現されなくなるかもしれません。

で、どうすれば Google Adsense の表示がされるのか。

Ajaxを利用しないハイパーリンクにします。

jQuery Mobaile がページ全体をリフレッシュするような、通常のリンクとして処理するのは次の場合です。

  • リンク先が現在のドメインと異なる
  • 「rel=”external”」属性が指定されたアンカータグ
  • 「data-ajax=”false”」属性が指定されたアンカータグ
  • リンク先ページの表示ウインドウを指定するtarget属性が付加されたアンカータグ

例えば、
<a href="test.html" data-role="button" rel="external">リンク</a>
こうした場合は、クリック時にAjaxは無効になります。

が、こんなものを全てのリンクに設定するのは面倒なので
jQuery、jQuery Mobileをページに読み込んだ後に、
$.mobile.ajaxEnabled = false;
を記述してAjaxを全て無効にしてしまう方法もあります。

Be Sociable, Share!

jQuery Mobile を使っているサイトでGoogle Adsenseを表示させる方法。」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。