ダブルレクタングルやめました: 見栄えの良さだけでとりあえず決める広告配置。

はじめに

本Webサイトでは、Google AdSenseによる広告の配置を始めて以来、大半の記事の最後に正方形に近い長方形の広告を2枚横に並べて表示していましたが、この度それに代わる広告の配置方法を思いつきました。

そこでこの記事では、その配置を思いつくまでの顛末と、配置の変更に伴い行った作業について書きます。

ダブルレクタングルとは?

そもそもダブルレクタングルとは何かと言いますと…

説明しよう🐼

ダブルレクタングルとは、記事の末尾の直後に正方形に近い長方形の記事を2枚並べる配置のことで、この配置にすることで、記事を最後まで読み終わった読者が広告を見たり、クリックをしたりことによる収益が期待できるとされているんだ。🐼

それで、実際はどうだったかというと…

記事の末尾の直後に広告を配置することで確かに収益はそれなりにあげることはできるのですが、1円や0円のクリックが続くことがあり、それへの対応が課題として浮上してきました。

ダブルレクタングルの維持を前提とした対策。

まずは、ダブルレクタングルの広告配置を維持することを前提に対策を考えることにしました。

クリックされること自体については止めようがありませんので、この記事の対策と同様に「1回クリックされても収益が発生したとはみなされない」広告を設置する必要があります。

そこで、ダブルレクタングルで配置している広告のどちらかに1円や0円のクリックが続けて発生していた場合には、そちらの方のGoogle AdSenseの広告のかわりにAmazonアソシエイトのバナー広告を貼ることにしました。

左右のどちらにAmazonアソシエイトのバナー広告を貼るべきかについてはかなり試行錯誤しましたが、最終的には「左にAmazonアソシエイト、右にGoogle AdSenseを貼る」という配置とすることにより、1円や0円のクリックが続くことはほぼなくなりました。

↓のような配置になりました。

次の課題。

上図のように配置をすると1円や0円のクリックが続くことはほぼなくなるのですが、Amazonアソシエイトの広告のサイズは横300ピクセル、縦250ピクセルで固定であるのに対して、Google AdSenseの広告は横336ピクセル、縦280ピクセルの大きさのものが表示されることが多い(※横300ピクセル、縦250ピクセルの大きさのものが表示されることもありますが、どちらかというと少数派です。)ため、見た目がどうしても不揃いになってしまいます。

また、ダブルレクタングルはもともと設定が複雑な割に、ブラウザ用のウィンドウの大きさがもともと小さい場合や、タブレットで表示を行う場合に、記事の表示のために割り当てられる幅が狭かったりすると、2枚の広告が割とあっさりと縦並びに表示されたりします。そのようなときに表示されている広告の大きさが違っていると、広告を見ていただく方に対して良い印象を与えることはできませんし、横に並べるために複雑な設定を行った意味がなくなってしまいます。

横に並べられないなら…

見た目の改善が課題であることを本Webサイトの管理人たるpandaが認識し始めたちょうどそのタイミングでGoogle先生より関連コンテンツを使用してよいとのお許しが出た(この件についてはこの記事を参照ください。)ので、広告ユニットを作成しようとしていたところ、今後はレスポンシブな広告ユニット以外のサイズの広告ユニットの新規作成が推奨しないこととなったこと(サイズを固定とした広告ユニットの作成自体は可能です。)を知りました。ダブルレクタングルはサイズを固定とした広告ユニットの存在が前提ですので、今後この配置を採用し続けることは難しくなる可能性があります。

そこで、

「横に並べるのが難しかったら、縦に並べればいいじゃない。」

という考えに思い至りました。

そこで、Amazonアソシエイトの横長でかつ小さめのバナー(横468ピクセル、縦60ピクセル)を上に、サイズをレスポンシブとしたGoogle AdSenseの広告を下に表示する配置とすることとしました。

配置の変更に必要な作業

広告の配置のためのコード。

functions.phpでダブルレクタングルの広告を配置するために記述していたコードを削除し、以下のように変更します。

<div>(Amazonアソシエイトの配置用のコード)</div>
<div>(Google AdSenseの配置用のコード)</div>

divタグで広告配置用のコードを囲っただけの簡単なコードです。

広告を縦に並べるので、コードとしては単純なものになります。

バナーのセンタリング

Amazonアソシエイトの場合とA8アフィリエイトでは表示のために使用しているタグが異なるため、バナーのセンタリングの方法が異なります。

Amazonアソシエイトのバナーの場合

Amazonアソシエイトのバナーはiframeタグを使用しているため、以下の手順で設定します。

以下のようにバナーを表示する部分をdivタグで囲み、そのdivタグにクラス名を設定します。ここではクラス名を”amazon-bottom-ad”と設定します。
<div class=”amazon-bottom-ad”>

</div>
CSSファイル(style.css)に以下の設定を追加します。
.amazon-bottom-ad iframe {
display: block;
margin: 0px auto;
}

A8アフィリエイトのバナーの場合

A8アフィリエイトのバナーは、バナーをaタグで囲っているので、以下の手順で設定します。

以下のようにバナーを表示する部分をdivタグで囲み、そのdivタグにクラス名を設定します。ここではクラス名を”a8smallimg”と設定します。
<div class=”a8smallimg”>

</div>
CSSファイル(style.css)に以下の設定を追加します。
.a8smallimg {
text-align: center;
}

端末のプラットフォームによる表示方法の切り替え。

実は単純な考慮もれが原因で、今までタブレットではダブルレクタングルの広告が配置できていませんでした。

そこでこの際、スマホからのアクセスの場合にはtrueを、それ以外(タブレットはこちらに含まれます。)の場合にはfalseを返す関数をfunctions.phpに追加します。

function is_mobile(){
$useragents = array(
‘iPhone’, // iPhone
‘iPod’, // iPod touch
‘Android.*Mobile’, // 1.5+ Android *** Only mobile
‘Windows.*Phone’, // *** Windows Phone
‘dream’, // Pre 1.5 Android
‘CUPCAKE’, // 1.5+ Android
‘blackberry9500’, // Storm
‘blackberry9530’, // Storm
‘blackberry9520’, // Storm v2
‘blackberry9550’, // Storm v2
‘blackberry9800’, // Torch
‘webOS’, // Palm Pre Experimental
‘incognito’, // Other iPhone browser
‘webmate’ // Other iPhone browser
);
$pattern = ‘/’.implode(‘|’, $useragents).’/i’;
return preg_match($pattern, $_SERVER[‘HTTP_USER_AGENT’]);
}

その筋では有名な古典的なコードです。

上記の関数がfalseを返したときに限り、Amazonアソシエイト(またはA8アフィリエイト)のバナーおよびGoogle AdSenseのバナーを表示する部分のコードを有効にすれば、タブレットからのアクセスの場合でもPCからのアクセスの場合と同様に広告を表示できます。

表示例

PCの場合

PCの場合は以下のような感じで表示されます。右側のスペースはサイドバー用のスペースですが、記事の量が多い場合には空白となります。

上図の例ではGoogle AdSenseの広告の大きさが小さくなっていますが、ディスプレイのサイズによっては大きいサイズの広告が表示されるようです。

タブレットの場合

タブレットの場合は以下のような感じで表示されます。

もともと表示されていなかった広告が表示されていることが確認できました。

PCの場合と同様に、Google AdSenseの広告の大きさが小さくなっていますが、ディスプレイのサイズによっては大きいサイズの広告が表示されるようです。

まとめ

「配置の変更に必要な作業」の節で記述した作業自体は、SEO関連の作業としては古典的な部類の作業ですが、それが一堂に会している記事は意外にあるようでなさそうだったので、まとめてみました。

また、本Webサイトでは今までタブレットから見たときの記事の(広告表示を含めた)見栄えについてはあまり考慮していなかったので、この機会にどしどしご覧いただけるとありがたいです。

この記事は以上です。