amazonアソシエイトでは商品へのリンクをサイトに貼ってそのリンクから購入されると収入を得ることができます。
とても便利なんですが、サイドバーとかに貼る場合いつも同じ商品だとつまらないので好きな商品を選んでおいてそこからランダムで表示するようにできないかと思って作ってみました。
JSONファイルに商品のデータを入れておいてjavascriptで表示するような感じにしてみました。
JSONファイルを作る
まずJSONファイルを作ってそこに好きな商品のデータを入れておきます。
下のような感じでデータを作ります。
[
{
"title" : "広告１",
"img" : "//ws-fe.amazon-adsystem.com/～",
"d_url" : "https://ir-jp.amazon-adsystem.com/～",
"url" : "https://www.amazon.co.jp/～",
},
{
"title" : "広告２",
"img" : "//ws-fe.amazon-adsystem.com/～",
"d_url" : "https://ir-jp.amazon-adsystem.com/～",
"url" : "https://www.amazon.co.jp/～",
}
]
ちょっと面倒臭いですがアマゾンで商品を選び、アソシエイトツールバーのリンク作成で画像を選びます。
そのリンクを一度メモ帳かなんかに張り付けて３つあるurlをコピーして貼り付けます。urlの頭の部分が違うのでそれで見分けて貼り付けてください。
titleは自分が何の商品かわかるために付けているものなので好きに付けてください。
ちなみにd_urlってしてるのは何かしらの情報でも送ってるんだろうと思ってdataの頭文字を取ってつけただけです(^^;)。
データは同じような感じで好きなだけ入れてください。ただし最後のデータだけ「 } 」の後ろに「 , 」が無いので気を付けてください。カンマがあるとエラーになって表示できなくなります。
作ったデータはamazon-data.jsonという名前で保存してください。
そしてそれをあなたのサイトにアップロードしてください。
※apiってやつを使えばもっと楽にできるのかな？と思ったんですがなんか申請が必要だったりと面倒だったので諦めました。
プログラムを作る
次はJavaScriptでプログラムを作ります。
window.addEventListener("pageshow", function(event){
showAmazonAds("amazon-ad", 4);
});
function showAmazonAds(id, max){
//広告エリアを取得
var ad = document.getElementById(id);
if(!ad)return;
//広告情報を取得
var list = [];
var url = "example.com";//あなたのサイトのurlを入力してね
fetch(url + "/amazon-data.json")//ファイルをアップロードした場所を指定する
.then(function (response) {
return response.json();
}).then(function (data) {
do{
num = Math.random() * data.length | 0;
list.push(num)
for(let i = 0; i < list.length-1; i++){
if(list[i] == num){
list.pop();
break;
}
}
}while(list.length < max);
let html = "";
for(let i = 0; i < list.length; i++){
html += '<div class="amazon-item">';
html += '<a target=”_blank” rel=”noopener sponsored” href="' + data[list[i]].url + '">';
html += '<div class="thumbnail">';
html += '<img class="pic" src="' + data[list[i]].img + '" >';
html += '<img src="' + data[list[i]].d_url + '" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />';
html += '</div></a></div>';
}
});
}
引数に表示させたい場所のidと表示件数を指定すると表示してくれるようにしてあります。
urlをあなたのサイトのurlに変更してください。
CSSはご自分で好きなように作ってください。
アマゾンの画像はサイズがバラバラで腹立つんですよね(^^;)