2つのアドセンス広告を1画面に配置したポリシー違反例

記事下や記事中でGoogleアドセンスレクタングル広告を横に並べて表示するのがダブルレクタングル。

スマートフォンで表示されたとき CSS などで何も定義していなければ、ダブルレクタングルは縦並びになるのでアドセンスのポリー違反。

そこでダブルレクタングルの片側を非表示にして対処しますが、別のやり方として片側を jQuery でサイドバーなど別の個所へ移動することも。

決められた表示幅を条件にレスポンシブでダブルレクタングルの右側を移動するサンプルを紹介します。

もくじ

Sponsored Link

アドセンスのポリシー違反になる2つのケース

まず簡単にダブルレクタングルとレスポンシブについて、アドセンスのポリシー違反になるパターンを再確認しておきます。特にポリシー違反が問題になるのは、主にスマートフォンなど高性能デバイスによるレスポンシブの場合です。

スクロールしなければ見えない位置にコンテンツを押しやるサイト レイアウト
これはモバイルサイトにも適用されます。モバイルサイトの場合は、スクロールしなければ見えない位置にコンテンツを押しやるレイアウトに加えて、2 つのコンテンツ向け AdSense 広告をページに同時に掲載することも許可されません。
広告の配置に関するポリシー − AdSenseヘルプ

2つのアドセンス広告を1画面に配置したポリシー違反例図は文頭の画像と同じもので、アドセンスヘルプに掲載されているポリシー違反の例です。

スクロールしないと本文が見えないというだけではなく、画面上に2つのアドセンス広告が連続して見えている状態もポリシー違反です。

パソコンで目視しながらテンプレートをカスタマイズしていると起こりがち、見落としがちなので、モバイルデバイスでどのように表示されているのかは、レスポンシブのシミュレーションツールなどを使って確認しておく必要があります。

» ブログ記事作成やカスタマイズに便利なオンラインツール15選

ふたつ目のケースはレスポンシブ広告ユニットではない固定サイズの広告ユニットを非表示にするパターン。これはポリシー違反です。

レスポンシブ広告が導入される以前に作成した固定サイズのレクタングル(大)などの広告コードを今でも使用している。その広告を display:none などで非表示にしているケース。レスポンシブ広告であれば非表示にできるので、単に新しくレスポンシブ広告に貼り替えれば回避できます。» アドセンスのレスポンシブ広告ユニットは非表示にできる確証を得た話

ダブルレクタングルの右側は非表示か移動か

ダブルレクタングルをそのままレスポンシブデザインでも使ってしまうとアドセンスポリシー違反になることは確認できました。では、ダブルレクタングルの右側広告をどう扱えば良いのでしょう。考えられる選択肢は非表示にするか、どこかに移動するか。

結論から言えば移動したほうが良いと思います。

非表示にした場合ですが、通常で最大3つ表示されていた広告ユニットがひとつ減ります。2つで構わないというのであれば議論の余地はありません。ただ、ボクの個人的な意見ではページビューの多いサイトやブログでは「インプレッション収益」が減るので2つにしてしまってはもったいないと思うのです。ページビューが少なくてもアドセンスサイトの数が多いとやはりインプレッション収益もバカになりません。

それなら非表示にしたダブルレクタングルの右側広告とは別の広告をどこかに表示すれば良いのでは?

そうなんですが、これは微妙です。それを実装するにはサイドバーあたりに常時非表示にしているアドセンス広告があって、ダブルレクタングルが消えたタイミングでポッと表示する。そういったメディアクエリを書いておくことになる。

でもそれってアドセンスポリシーに規定されている非表示の概念とちょっと性格が違うと思いませんか?

一方を非表示にしたときに他方を表示するのであれば、最初から jQuery で移動させればいいだけの話です。移動であれば非表示というリスクもインプレッション収益が減るリスクもありません。

それでは順を追って解説します。ここでは、記事下ダブルレクタングルの右側をサイドバーに移動するというパターンを想定します。

FLOATでダブルレクタングルを作る

ダブルレクタングルの右側広告を移動する、その前に元となるダブルレクタングルの作り方を簡単にご紹介。

概略

  • ダブルレクタングルの外側になるブロックを作成〜スタイル定義
  • スポンサーリンクのラベル用のスタイルを定義
  • 左側広告のブロック作成〜スタイル定義
  • 右側広告のブロック作成〜スタイル定義
  • レスポンシブ用のメディアクエリ定義

要はHTMLコードとCSSの定義の2つです。

ダブルレクタングルの HTML コード

ダブルレクタングルの左右広告は float で横並びにすることが前提です。Table は使いません。

外枠のブロックに doubleRectangle というセレクタを定義して、左側広告を l 、右側広告を r としました。

スポンサーリンクのラベル用に左右共通で adLabel を定義し左右両方にラベルを付けます。ダブルレクタングルで表示されるときは右側の広告用ラベルは要らないと思うので非表示、右側広告を別の個所に移動し単体表示させたときにはラベルを表示します。そのため予め両方にラベルを付けています。この移動時のラベル表示制御は右側広告ラベルの mob で行います。

<div class="doubleRectangle">
    <div class="adLabel">スポンサーリンク</div>
        <div class="l">
            ※左側用アドセンスレスポンシブ広告コード
        </div>

    <div class="r">
        <div class="adLabel mob">スポンサーリンク</div>
            ※右側用アドセンスレスポンシブ広告コード
        </div>
</div>

※繰り返しになりますが上のコードに配置するアドセンス広告コードは必ずレスポンシブ広告です。

ダブルレクタングル用の CSS

上記のダブルレクタングル HTML に対するスタイルシートは以下のようになります。

.doubleRectangle{margin:2em 0}
.adLabel{font-size:12px;color:#010101;text-align:left}
.adLabel.mob{display:none}
.l{float:left;width:50%;max-width:336px;margin:0 auto}
.r{float:right;width:50%;max-width:336px;margin:0 auto}
ins.adsbygoogle{max-width:336px}

/* ダブルレクタングル広告専用メディアクエリ */
@media screen and (min-width:0) and (max-width:600px){
.adLabel.mob{display:block}
.l{float:none;width:100%}
.r{float:none;width:100%;margin:0 auto 25px}
}

このスタイル定義はダブルレクタングルが配置されるブログ本文の、余白(margin, padding)を除いた幅が600 px を想定しています。つまり、300 x 250 のレクタングルを2つ並べられることが前提。

Seesaa ブログの場合、ダブルレクタングル専用のブレイクポイントは #content の幅とイコールになります。

左右広告ブロック(l, r)に余白が設定されていません。仮に想定する本文の幅が 620 px なら、左広告(l)の右 margin を10pxとるなど、本文の幅に合わせて適時微調整してください。但し、その場合のブレイクポイントを 620 px に変更することも忘れずに。

左右レクタングル広告の l と r 、adsbygoogle には最大幅 336px が指定してあります。せっかくのレスポンシブなのに。なぜそうしているのかについてはアドセンスのレスポンシブ広告ユニットは非表示にできる確証を得た話を参照下さい。

メディアクエリの右広告(r)に下余白が 25px 設定されていますが(緑色文字の部分)、これはあくまでもサンプルです。今回の例ではサイドバーに移動するので、他のサイドバーコンテンツで定義されたものと同じ下余白を設定しています。

max-width の 600px がブレイクポイントですが、それぞれのブログでこのブレイクポイントになる幅は変わってくるはずですので必要に応じて調整します。但し、メディアクエリのブレイクポイントと後述の jQuery で指定する条件分岐のブレイクポイントは必ず一致させます。

#content 幅=メディアクエリブレイクポイント=jQuery条件分岐幅

ダブルレクタングルの右側を移動するjQuery

レスポンシブデザインでダブルレクタングルの広告を移動するためのトリガーにしたいのは表示幅です。決められた表示幅(ブレイクポイント)以下であればダブルレクタングルの左側広告はそのまま残し、右側広告をどこかに移動させたい。

それが以下のコードです。

<script>
$(function(){
  $(window).on("load resize", init);
   function init(){
      var _width=$(window).width();
      if(_width <=600){
        $('.r').insertBefore('移動先セレクタ');
      }else{
        $('.r').insertAfter('.doubleRectangle .l');
      }
  }
});
</script>

2015年4月14日現在、コード変更があります

参考:レスポンシブWEBデザイン コーディングTIPS その2

コードを一部変更しました。
旧:$(window).bind("load resize", init);
新:$(window).on("load resize", init);

bind だと画面をスクロールするたびにリフレッシュされ、移動先のアドセンス広告が都度別広告に差し替わってしまいます。スマホなどで縦横を持ちかえたときに確実にリフレッシュしますが bind は非推奨ですし、ポリシー違反になるといけないので on に変更しました。

前述の通りブレイクポイントを 600 px とした部分を反映しているのが赤文字の条件分岐です。表示幅がダブルレクタングルを表示し切れない 600 px 以下だった場合は、右側広告(r)をまるごと移動先セレクタの直前(insertBefore)に移動して表示します。600 px 以上だった場合は左側広告(l)の直後(insertAfter)、つまり HTML の記述通りダブルレクタングルのままです。

「移動先セレクタ」は、特定の個所の Class や ID が入ります。
例えば、このブログでは移動先をサイドバーの一番下に配置した「Google カスタム検索」の直前に指定しています。このブログではカスタム検索を id="searchbox" にしてます。

$('.r').insertBefore('#searchbox');

カスタム検索の直後に移動する。

$('.r').insertAfter('#searchbox');

移動先はサイドバー以外でも本文の一番下 navi の直前。

$('.r').insertBefore('.navi');

但し、Seesaaブログテンプレートの初期状態だと記事 HTML の上下に navi があるので、このままでは記事上 navi の直前に移動してしまいます。記事下の navi に新しくユニークな below などのクラスを追加して、そこに移動するようにしないといけませんね。

実装するには jQuery が導入されていることが前提です。
参考までにこのブログでは下記のように非同期で head に追記してあります。

<script async src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

jQueryの置き場所について訂正です。jQuery.jsの非同期は不可を確認してください。

まとめ

このコードの最大のポイントは表示幅を分岐条件として制御できるということです。Wordpress などで普通に使われている isMobile のようなファンクションによる制御が、この Seesaaブログをはじめ無料ブログではなかなかできませんでした。

この仕組みを使えば例えば記事中の2つ目の h2 見出しに adhere などのセレクタを付けておいて(h2 class="adhere")、この直前、直後にアドセンス広告を移動するなどいろいろとアイディアが浮かんできますし、できなかったことが実現しそうですね。

アドセンス広告をダブルレクタングルで配置し、表示幅を条件に広告を移動する。片側を非表示にしていないのでインプレッション収益にも影響がない。

たったこれだけの簡単なことです。でもどうしてもやり方がわからなくて、Google がレスポンシブ広告の提供を始めたあたりからずっと悩んでました。なのでご紹介した Fourmix さんのコードは感動モノです。

なんですけど。
あくまでもボクの管理サイト比較ですが、記事下の単体レクタングルとあまりクリック率は変わらないんですよね。かえってダブルレクタングルの方がクリック率が低いような。見慣れてしまったということと、広告だらけという良くない印象を与えてしまうからでしょうか。

このブログではトップページとカテゴリページはなんとなくデザインが寂しいのとインプレッション収益狙いでダブルレクタングルですが、記事中では広告を上中下と分散させるようにしています。他のブログでは記事中のダブルレクタングルが数多くあって、サイトの性質やコンテンツなどでダブルレクタングルのクリック率がどんなもんか検証を続けてはいます。

そうやっていろいろな位置でクリック率のテストをしてみるにはダブルレクタングルの右側移動は有効かもしれません。

最後になりますが、Seesaaブログで実装するには Seesaa ブログをレスポンシブにカスタマイズしておく必要があります。スマートフォンからのアクセスがスマホ版に流れていては実装する意味がありません。

いま使っているSeesaaブログテンプレートを簡単にレスポンシブ対応にカスタマイズする方法をご紹介しています。やり方はこちらの記事を是非ご参照ください。
» Seesaaブログスマホ広告を消す悩みを消す方法

ダブルレクタングルの右側移動はレスポンシブ対応にしてからですね。

更新日:
Sponsored Link

この記事へのコメント

0件
コメントをどうぞ
お名前:[必須入力]

メールアドレス:

ホームページアドレス:

コメント:[必須入力]

Sponsored Link