こちらの記事では、予め用意した広告をランダムに表示させる方法を記録として残しました。
ランダムに広告を表示させる代表例としては、グーグルアドセンスの広告が比較的有名です。
既存のシステムではA8.netでは、「A8内で取り扱っている広告」であれば、ランダムに表示させるローテーションバナーというサービスがあります。
複数のASPであったり、直接企業で契約している場合、複数の広告をランダムで表示させる方法をまとめてみました。今回紹介する方法では、データベースには触れず、新規にプラグインを追加する方法は採用していません。独自にファイル作成もしくは既存のファイルを編集するだけです。ただし、ある程度の知識が必要となります。
今回紹介する方法は、jacascriptを使った方法と、phpを使った方法です。どちらも非常に簡単です。
実装手順(Javascriptファイル編)
手順１：Javascriptファイルを作成する
javascriptファイルを作成します。ファイル名は何でも良いですが「random-ad.js」とします。
もしCocoonのテーマを使っている場合は、「外観」→「テーマ編集エディタ」→「javascript.js」のファイルに追加するだけです。
追加するコードは以下のようになります。下記の例では、３件のみですが、必要であれば何件でも追加が可能です。
document.addEventListener('DOMContentLoaded', function() {
var ads = [
'<!-- ASPから提供された広告タグ1 -->',
'<!-- ASPから提供された広告タグ2 -->',
'<aaa>サンプルタグ<aaa>'
];
var randomIndex = Math.floor(Math.random() * ads.length); // ランダムなインデックスを生成
var adHtml = ads[randomIndex]; // 選択された広告タグを取得
// 広告をページに追加
document.getElementById('randomAd').innerHTML = adHtml;
});広告のタグをシングルクォーテーションで囲まれた部分にコピペします。コピペして貼り付けする際に、改行があるとコードエラーになりますので、貼り付けるタグは１行になるように、改行は無い状態にしてください。
サンプルの広告タグに改行がある場合、
<aaa>サンプルタグ
</aaa>
<aaa>サンプルタグ<aaa> ←改行を取り、コピペしてください。手順２：headタグを追記
新規にjsファイルを作成した場合は、Headタグの中に下記のソースを記載します。Cocoonなどで既存のjsファイルにコードを追加した場合は、手順２の修正は不要です。
<script src="path/to/random-ad.js"></script>path/to/random-ad.jsは、実際のファイルのパスに置き換えてください。
手順３：実際に広告を掲載したい場所にコードを貼り付け
広告を追加したい場所に直接下記のコードを追加します。
<div id="randomAd"></div>直接編集することも可能ですが、ウィジェットを追加して、コードを貼り付けるとメンテナンスがしやすいかと思います。テーマがCocoonの場合なら、広告を表示したいウィジェットを選び、テキスト形式で追加しましょう。
うまくいかなければ、広告用のウィジェットを作り、直接ウィジェット内のテキストにコードを書いてしまう方法もあります。
<div id="mobiPrint"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
-- 省略 --
// 広告をページに追加
document.getElementById('mobiPrint').innerHTML = adHtml;
});
</script>
cocoonの場合は、テンプレート機能が使えるので、便利かと思いましたが、コード一式を保存するとhtmlが書き変わってしまい、pタグが追加されてしまったりとタグ改変の恐れもあるので、使わない方が良いです。実際にやってみましたが、正常に動作はしませんでしたので、テンプレート機能での使用はしないでください。
実装手順(PHP編)
Javascriptより簡単かもしれません。
手順１：funcsion.phpにコードを追加する
広告用にPHPファイルを新規に作るのも良いのですが、今回の例ではfuncsion.phpにソースを書き込みます。Javascriptと違い、コードのミスがあると、ブログが表示されなくなり、FTPを使ってファイルの修正が必要になります。PHPの知識がない方は、十分注意してください。
下記の例では、シングルクォーテーションで囲まれた赤の部分に、表示させたい広告のタグを入れます。
function display_random_ad() {
$ads = array(
'<!-- ASPから提供された広告タグ1 -->',
'<!-- ASPから提供された広告タグ2 -->',
'<!-- ASPから提供された広告タグ3 -->'
);
$random_index = array_rand($ads);
return $ads[$random_index];
}
add_shortcode('random_ad', 'display_random_ad');
手順２：ランダム広告を表示させたいところにショートコードを記載
WordPressの外観のウィジェットを開き、広告を表示させたい場所に、ショートコードを記載します。
ショートコードは下記のように[]の中に、random_adを入れます。
他の使い道
別のセットを作りたい
ランダムに表示したい広告が１セットできました。別のセットを作りたい場合ですが、手順１のソースは、追加したコードの下に同じものを作り「randomAd」のところの文字列を「randomAd2」にするだけでOKです。手順３のウィジェットに貼り付けるコードは、「randomAd2」なので、この部分を修正すれば完了です。
グーグルアドセンスなどの広告に頼らず、自身でブログにマッチし成約率が高そうなものを選びたい場合は、複数の広告を扱うと良いです。広告の貼り方と選び方で収益の差が出てきます。
広告以外の応用
今回紹介したサンプルプログラムコードでは、広告をランダムに表示させる目的ですが、広告以外にも応用ができます。たとえば、ランダムに表示させるサンプルとして以下のようなものがあります。
- 挨拶文
- 写真
- 自身のブログのお勧め記事
同じものを掲載し続けるだけではなく、ちょっとした変化を取り入れるのも、ブログの面白い運営方法ではないでしょうか？
さいごに
今回紹介したサンプルは、知識がある方にとっては簡単すぎる内容かもしれません。全く分からない人にとっては、なんだろう？と思うかもしれませんが、ブログを運営するにあたり、また１つ勉強できたのではないでしょうか？
コメント