アマゾンAPIを活用してアフィリエートに挑戦

October 16, 2009 – 3:11 pm

このブログ上にアマゾンへのリンクを張り、アフィリエートなるものに挑戦することにした。アフィリエートには、アマゾンサイトなどで提供しているツールを用いてリンク用バナーを作り、これをブログ上に貼り付けるというのが一般的だ。これでは芸がないということで、我がサイトではアマゾンAPIを活用して「動的」にリンク用バナーを作成することにした。これまで2年間にわたって学習してきた「動的Webサイト」構築技術を活用してみようと思ったわけだ。

作成したリンク用バナー広告がすぐ下に表示されているはずだ。全くといっていいほど地味な広告になっていると思われるに違いない。

ここに表示されている「広告」の商品、NIKONの新発売の一眼レフカメラだ。私には、とっても高額で手がでない。バナー広告の作成例として表示しているにすぎない(このカメラを買いたいな、と思わないわけでもないが・・)。

バナー広告の表示手続きと技術: 冒頭にも述べたが、このバナー広告の作成・表示には、これまでこのブログ上に書いてきたさまざまの「動的Webサイト」構築技術が活用されている。この技術、基本的には、LAMPと呼ばれる動的(ダイナミック)コンテンツを含むWebサイト構築に用いられているものだ。

このバナー広告を表示するために、このポストのエディター上では、次の3行を記述しているにすぎない:

<script type="text/javascript" src="/scripts/amazon_ajax.js"></script>
<body onload="getBookByCode01('B002JM0LLK')"></body>
<div id="Amazon_Area"></div>

このページがロードされる際、onload eventによりバナー表示用のスクリプト関数getBookByCode01()が動作する。この関数の引数’B002JM0LLK’は、バナー広告上にあらわれたNIKONの一眼レフカメラのASINコードだ。ここでの出力は、領域Amazon_Area上に描画される。

バナー広告はどうあるべきか?: 自前で、簡単なバナー広告ひとつを具体的に作成しようとするにしても、実にさまざまなことを考えなければならなかった。上記の表示技術は当然としても、バナー広告のデザインはどうあるべきかということもそのひとつだ。

デザインの過程で考えたことの第一は、我がブログサイトはアフィリエートによる収益を目的にはしていないということだ。アフィリエート用のバナーが読者の注意を過度にひき、本来のブログ記事の「邪魔」になるようでは本末顛倒だ。わずかばかりの収益を得るために、ブログサイトをアマゾンに売り渡すわけにはいかない。

ということで、この領域はバナー広告であるとブログの読者が識別できる程度の枠とするなど、できるだけ目立たない、地味な構成とした。

次に、バナー広告に盛り込むべき情報はどのようなものとするのかということ。いろいろ考えてみたが、商品のタイトル、商品画像、価格などとそれに加えてアマゾンサイトへリンクが張られている事実が識別できればよいだろうという結論になった。

今回の作業、私がこの2年間に学んできた「動的Web構築技術」の現状を試してみようと思ったという程度の話だ。


  1. 1 Trackback(s)

  2. Oct 26, 2009: 「還暦から始める動的Webサイト構築」学習が一段落 | Yama's Memorandum

Post a Comment