JavaScript でアフィリエイトリンク・画像を入れ替える

オリジナルの JavaScript はコチラ

<script language="JavaScript" type="text/JavaScript">
<!--
var icnt = 6;
var myDate = new Date();
var d = myDate.getSeconds();
var idx = d % icnt;
var bnr=new Array();
var lnk =new Array();
bnr[0]="http://画像_01.jpg";
lnk[0]="http://アフィリエイトリンク_01";
bnr[1]="http://画像_02.jpg";
lnk[1]="http://アフィリエイトリンク_02";
bnr[2]="http://画像_03.jpg";
lnk[2]="http://アフィリエイトリンク_03";
bnr[3]="http://画像_04.jpg";
lnk[3]="http://アフィリエイトリンク_04";
bnr[4]="http://画像_05.jpg";
lnk[4]="http://アフィリエイトリンク_05";
bnr[5]="http://画像_06.jpg";
lnk[5]="http://アフィリエイトリンク_06";
document.write('<a href="' + lnk[idx] + '" target="_brank">');
document.write('<img src="' + bnr[idx] + '" border="0" alt="" style="margin: 5px
10px 5px 0px; float:left;">');
document.write('</a>');
-->

http://画像_nn.jpg のところに表示する画像、http://アフィリエイトリンク_nn に対応するアフィリエイトリンクを入れ込んでおきます。この例だと合計６種類の画像と対応するアフィリエイトリンクを自動で入れ替えることができるわけです。

しかし、多くのアフィリエイトリンクがそうであるように、リンクにはビーコン（て言う？）のようなトラッキング用の 1px × 1px の 画像ファイルが付いてきます。これも忘れずに付けておかないといけません。


アフィリエイトリンクの構造は、以下のパターンが多いですね。（見やすいように改行しています）

<a href="http://アフィリエイトリンクコード/">
<img src="http://アフィリエイト商品の画像/">
</a>
<img src="http://追跡用アフィリエイトリンクコード/">

前述のオリジナルスクリプトだと、４行目の追跡用アフィリエイトリンクコードがありません。もしかしたら、これは無くてもいいのかもしれないけど、せっかく掲載したアフィリエイトバナーから売上げがゼロでは悲しいので、追加しておくことにしましょう。

さらに、バナーリンクだけじゃなくて、バナーの下にコメントも入れたいということもあります。
それらを全部含めてみたのが、以下のようなイメージ。

<a href="http://アフィリエイトリンクコード/">
<img src="http://アフィリエイト商品の画像/">
</a>
<img src="http://追跡用アフィリエイトリンクコード/">
<br />
商品コメント

バナーの下で改行して商品コメントをいれました。

このパターンで、先のオリジナルコードをいじくってみたのが、下のコードになります。

<script language="JavaScript" type="text/JavaScript">
<!--
var icnt = 6; /*アフィリエイトリンクの数*/
var myDate = new Date();
var d = myDate.getSeconds();
var idx = d % icnt;
var lnk =new Array(); /*アフィリエイトリンクコード*/
var bnr=new Array(); /*アフィリエイト商品の画像*/
var opt =new Array(); /*追跡用アフィリエイトリンクコード*/
var cap =new Array(); /*商品コメント*/

lnk[0]="http://アフィリエイトリンクコード_01";
bnr[0]="http://アフィリエイト商品の画像_01";
opt[0]="http://追跡用アフィリエイトリンクコード_01";
cap[0]="商品コメント_01";
lnk[1]="http://アフィリエイトリンクコード_02";
bnr[1]="http://アフィリエイト商品の画像_02";
opt[1]="http://追跡用アフィリエイトリンクコード_02";
cap[1]="商品コメント_02";
lnk[2]="http://アフィリエイトリンクコード_03";
bnr[2]="http://アフィリエイト商品の画像_03";
opt[2]="http://追跡用アフィリエイトリンクコード_03";
cap[2]="商品コメント_03";
lnk[3]="http://アフィリエイトリンクコード_04";
bnr[3]="http://アフィリエイト商品の画像_04";
opt[3]="http://追跡用アフィリエイトリンクコード_04";
cap[3]="商品コメント_04";
lnk[4]="http://アフィリエイトリンクコード_05";
bnr[4]="http://アフィリエイト商品の画像_05";
opt[4]="http://追跡用アフィリエイトリンクコード_05";
cap[4]="商品コメント_05";
lnk[5]="http://アフィリエイトリンクコード_06";
bnr[5]="http://アフィリエイト商品の画像_06";
opt[5]="http://追跡用アフィリエイトリンクコード_06";
cap[5]="商品コメント_06";
document.write('<a href="' + lnk[idx] + '" target="_brank">');
document.write('<img src="' + bnr[idx] + '" border="0" alt="">');
document.write('</a>');
document.write('<img src="' + opt[idx] + '" border="0" alt="" >');
document.write('<br />' + cap[idx]);
-->
</script>

アフィリエイトリンクコード、アフィリエイト商品の画像、追跡用アフィリエイトリンクコード、商品コメントをそれぞれ記入しておきます。ちなみに ASP によっては、追跡用アフィリエイトリンクコードがないこともあります。そのときは、 ""だけを残してブランクにしておいて大丈夫。

このコードをサイドバーのプラグインに貼り付けておしまい。


サイドバーに収めるためには、アフィリエイト商品の画像サイズを少し縮小しないといけないこともあります。ASPもしくはECによっては、商品の画像サイズは変更しても良いというところもあります（もちろん、アフィリエイトリンクコードは改変不可が殆どですから注意してください）

画像サイズを変更しても構わない場合に限り、CSS で画像サイズを固定してしまえばバナーがすべて同じサイズで表示されますから見た目が綺麗です。

<style type="text/css">
.banner {width:200px;height:200px;text-align:center;}
</style>

上記のようなスタイルをJavaScriptの先頭に貼り付けておきます。
ここではサイドバーの幅が200px（より少し大きい）ことを想定して、画像の縦横が200px、それをセンタリングして配置します。

前述の JavaScript の該当箇所を少し変更します。

document.write('<img src="' + bnr[idx] + '" border="0" alt="" class="banner">');

アフィリエイト画像に banner という class を付加しました。

アフィリエイトバナーが一種類で寂しかったので、JavaScript を使ってページビューごとに入れ替わるアフィリエイトリンクを作ってみました。試す場合はASPの規約違反にならない範囲でお願いします。これにより問題が生じた場合でも、私あすかＣ爺は一切の責任を負いません。自己責任にて。

---