AmazonJSはもう古い！Associates Link Builderの設定解説！

どうもアスミです。

皆さんはAmazonアソシエイトをご存知でしょうか。

数あるASPの中でも最もエンドユーザーからの知名度と信頼があるアフェリエイトです。

そして今回はAmazonアソシエイトの商品紹介リンクについてと、それに使用するプラグイン【Associates Link Builder】の紹介と設定方法をご紹介します。

Amazonアソシエイトのリンクデザインでは目立たない

Amazonアソシエイトで売り上げを上げるためには、当然ですがリンクを自分のHPに張り付ける必要があります。

しかしAmazonアソシエイトの管理画面でリンクを作成してそのまま張り付けると、以下のように範囲が狭くみすぼらしいものになってしまいます。

<br />

いまいちインパクトに欠けていますね。

これではもったいない。

折角商品を紹介するならば、最大限見やすく改善するべきです。

リンクを貼るならAssociates Link Builder

ということで今回紹介するプラグイン、Associates Link Builderを使用すると、下記のようなデザインのリンクに早変わり！

Amazonアソシエイトで作っただけのリンクとは雲泥の差がありますね。

Amazon公式プラグイン！

このAssociates Link BuilderはAmazonで公式にリリースされたプラグインです。

公式とあって、商品のリアルタイムの値段やメーカー表示がそのまま反映しますし、何より信頼性が抜群ですね。

今後もアップデートは繰り返されるので急な変化にも対応可能な点もいいところ。

リンクを張る手間が軽減！

Amazonアソシエイトでそのままリンクを作成する場合は、管理画面を開いて商品検索してからリンク作成するという工程が発生するので正直めんどくさいです。

しかしAssociates Link Builderであれば投稿画面からそのまま商品検索ができるのでかなり簡単。

作業時間が短縮できます。

AMP対応

AMPとは、「Accelerated Mobile Pages」の略。
簡単に言えばモバイルページを高速で表示させる手法を指します。
特徴はJavaScriptの使用が原則NGだということです。
AMPはgoogleが推奨している規格なので今後検索順位に大きく関わってくる可能性が非常に高く、現に検索順位に紐づく指標の中にはAMPが入っています。

本プラグインはこのAMPにしっかり対応しています。

ちなみに今までリンク作成でダントツ人気だったプラグイン【AmazonJS】はJavaScriptを使用しているため、AMPに対応できていません。

初期設定方法

Associates Link Builderの魅力がわかったところで早速設定方法を解説していきます！

ちなみに当然ですがAmazonアソシエイトに登録完了していることが前提となりますのでご注意下さい。

各種認証情報を入手

Amazonアソシエイトの管理画面を開き、右上のアソシエイトIDを控えます。

その後、タブ【ツール】から【Pruduct Advertiseing API】と書かれたタブをクリックして下さい。

画面が変わりますので、【利用を始める】をクリック。

するとアクセスキーとシークレットキーが入手できますので控えておきましょう。

ちなみに【認証情報をダウンロードする】をクリックすると認証情報が記載されたテキストファイルをダウンロードできます。メモ用に取っておいてもいいでしょう。

プラグインのインストール～設定①

二つの認証キーを確保出来たら早速Associates Link Builderをインストールしましょう。

インストール後、有効化まで済ませるとAssociates Link Builderタブがダッシュボードに表示されますので、【setting】をクリックします。

設定画面が表示されるので、先ほど控えておいたアソシエイトID、アクセスキー、シークレットキーをそれぞれの場所にコピペします。
※アソシエイトIDが表示されていない場合は【Add a marketplace】をクリックすれば表示されます。

完了したら左下のチェックボックスにチェックをしてから【Save】をクリックして保存しましょう。

設定②

今度は先ほどのAssociates Link Builderタブから【Templates】をクリックします。

この設定画面ではリンクのデザインテンプレートを作成します。
【Create new template】に設定し、適当な名前を付けましょう。
ここではoriginalという名前で作りました。

続いて画面中央上部にリンクのデザインをHTMLで書き込んでいきます。

下記がHTMLコードになりますので、自分で書き込むのが面倒な方はコピペしてご使用ください。

{{#Items}}
<div class=”az-item”>
{{#Item}}
{{#aalb}}
<a href=”{{DetailPageURL}}” target=”_blank”>
<p class=”img”><img width=”250″ height=”250″ src=”{{MediumImageURL}}”></p>
<div class=”info”>
<p>{{Title}}</p>
<ul>
{{#InStock}}
{{#Saving}}
<li>参考価格：{{StrikePrice}}</li>
{{/Saving}}
<li>価格：<span class=”price”>{{CurrentPrice}}</span>{{#Prime}}<img width=”52″ height=”13″ src=”/shared/images/arrow_prime.png” alt=”プライム”>{{/Prime}}</li>
{{/InStock}}
{{#By}}
<li>メーカー：{{By}}</li>
{{/By}}
{{#Merchant}}
<li>販売者：{{Merchant}}</li>
{{/Merchant}}
</ul>
</div>
{{/aalb}}
{{/Item}}
</a>
</div>
{{/Items}}