Amazon のアソシエイトリンクをランダムに表示

 2021/08/03, last updated 2022/08/03 -  ~2 Minutes

ブログに広告リンクを貼っている方は多いと思う。 ブログを書いて沢山の人に読まれて収入が入ってくる、そんな生活をしてみたいものだ。 もはや、ブログは廃れてしまったかもしれないが・・・

それはさておき、頼まれていた仕事が一区切りしたので、 このホームページにも広告を載せてみたい。 とりあえず、Amazon で販売されている、自分も買うであろう、日本酒を載せてみたいと思う。

このサイトであるが、今は hugo   というスタティックサイトジェネレータで作っている。 以前は、wordpress を使っていたが、wordpress、PHP、DB のめんどうを見てやらないといけない(主にバージョン管理)し、プラグインもこちょこちょ設定しないといけないしで嫌になってしまった。 Hugo であれば、手元 PC で markdown で記述して、hugo コマンドを実行し、できたファイルを WEB サーバに rsync などでコピーしてやればいいだけだ。単なる html の表示なので爆速だ。 PHP、DB を使わないので、WEB サーバのスペックが低くても大丈夫だ。

少し脱線してしまったが、邪魔にならない、ナビゲーションエリアの下のほうに貼ることとする。

しかし、1銘柄だとおもしろくないので、3銘柄をランダムに選んで表示するようにしてみたいと思う。 スタティックファイルジェネレータなので、サーバ側では何もできない。

Amazon のアソシエイトリンク(画像)をファイルに書いておいて /ad/0、/ad/1、ad/2 のような URL で 取れるようにし、ブラウザに 0、1、2 をランダムに選ばせて、div の innerHTML にセットしてやれば 良さそうだ。

テンプレート側 (baseof.html)

<div id="amazon-ad" num-ads="3">
</div>
<script src="/js/amazon-ad.js">
</script>

javascript (amazon-ad.js)

/* code form MDN */
function getRandomInt(max) {
    return Math.floor(Math.random() * max);
}

let ad_area = document.getElementById('amazon-ad')
let num_ads = ad_area.getAttribute('num-ads')
num_ads = num_ads || 1
let xhr = new XMLHttpRequest()
let selected_ad_number = getRandomInt(num_ads)
xhr.onload = function() {
    ad_area.innerHTML = xhr.responseText
}
xhr.open('GET', '/ad/' + selected_ad_number)
xhr.send()

どうやらうまく推し酒が表示されるようだ。 javascript でページの keyword などといった meta data を見て表示する広告を変えたりすることができるかもしれない。

hugo に限らず応用はできると思うので、よろしければご参考に。