Amazonアソシエイトのイージーリンクを指定箇所へランダム表示させる方法

2019年2月20日2020年2月10日ブログ関連WordPress,ブログ関連

Amazonアソシエイトのウィジェットは2018年7月以降のChromeだと自動で動作しなくなりました。

ユーザーが手動で広告を動かす、というなんだかよく分からない事になっています。そこで今回、自動的にランダムで内容が変わる様な広告表示をしたく調べて見ました。

上手く出来たのでメモとして残しておきます。

目次（Contents）

1. やりたかった事
2. やり方
3. 参考にした記事
4. おわりに

やりたかった事

別に管理しているサイトに付ける広告で、バナーリンクを取り付けることにしました。

その際、フッターとして登録しているテンプレートファイルに広告を取り付けるので、複数ページでいつも同じ広告が出続けることになります。

見ている方も同じ物が出続けるのはストレスなので、違うページに移動または更新した場合に違うバナーが出る様にしたかったのです。

やり方

リストを作りランダムで表示させるという方法で、具体的にはこんなJavaScriptです。

<div id="myplace"></div>

<script type="text/javascript">
var lists=[
'バナーリンクのイージーリンクで表示されたコード　1つ目',
'バナーリンクのイージーリンクで表示されたコード　2つ目',
'バナーリンクのイージーリンクで表示されたコード　3つ目',
'バナーリンクのイージーリンクで表示されたコード　4つ目',
'バナーリンクのイージーリンクで表示されたコード　5つ目',
];
  
var rNo = Math.floor(Math.random() * lists.length);
document.getElementById('myplace').innerHTML = lists[rNo];
</script>

この「’バナーリンクのイージーリンクで表示されたコード　1つ目’,」の所ですが、コードの「＜」から「＞」までを「’（シングルクォート）」で囲ってやれば大丈夫です。

表示させたいバナーの数だけ行を作って下さい。なので3つなら3行ですし、二桁あれば二桁行になります。