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

どうもアスミです。

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

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

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

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

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

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

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

これではもったいない。

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

リンクを貼るなら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コードになりますので、自分で書き込むのが面倒な方はコピペしてご使用ください。

  1. {{#Items}}
  2. <div class=”az-item”>
  3. {{#Item}}
  4. {{#aalb}}
  5. <a href=”{{DetailPageURL}}” target=”_blank”>
  6. <p class=”img”><img width=”250″ height=”250″ src=”{{MediumImageURL}}”></p>
  7. <div class=”info”>
  8. <p>{{Title}}</p>
  9. <ul>
  10. {{#InStock}}
  11. {{#Saving}}
  12. <li>参考価格:{{StrikePrice}}</li>
  13. {{/Saving}}
  14. <li>価格:<span class=”price”>{{CurrentPrice}}</span>{{#Prime}}<img width=”52″ height=”13″ src=”/shared/images/arrow_prime.png” alt=”プライム”>{{/Prime}}</li>
  15. {{/InStock}}
  16. {{#By}}
  17. <li>メーカー:{{By}}</li>
  18. {{/By}}
  19. {{#Merchant}}
  20. <li>販売者:{{Merchant}}</li>
  21. {{/Merchant}}
  22. </ul>
  23. </div>
  24. {{/aalb}}
  25. {{/Item}}
  26. </a>
  27. </div>
  28. {{/Items}}

続いて細かな詳細デザインをCSSで書き込んでいきます。

下記にテンプレートとして用意したCSSがありますので、良ければご使用ください。
※あくまでもテンプレートなので、カスタマイズする場合はご自分でどうぞ。

  1. div.az-item{
  2.   transition:all 0.15s ease;
  3.   border:1px solid #ddd;
  4.   margin-bottom:20px;
  5. }
  6. div.az-item a{
  7.   padding:10px;
  8.   display:block;
  9. }
  10. div.az-item a:before,
  11. div.az-item a:after{
  12.   content:””;
  13.   display:table;
  14. }
  15. div.az-item a:after{
  16.   clear:both;
  17. }
  18. div.az-item a p.img{
  19.   width:21%;
  20.   float:left;
  21.   text-align:center;
  22. }
  23. div.az-item a p.img img{
  24.   width:auto;
  25.   height:auto;
  26. }
  27. div.az-item a div.info{
  28.   width:76%;
  29.   float:right;
  30.   overflow:hidden;
  31. }
  32. div.az-item a div.info p{
  33.   margin-bottom:5px;
  34.   text-decoration:underline;
  35. }
  36. div.az-item a div.info :not(p){
  37.   color:#333;
  38.   text-decoration:none;
  39. }
  40. div.az-item a div.info ul{
  41.   font-size:0.8rem;
  42. }
  43. div.az-item a div.info ul li span.price{
  44.   margin-right:5px;
  45.   display:inline-block;
  46.   color:#900;
  47.   font-size:1rem;
  48. }
  49. div.az-item a:hover div.info p{
  50.   text-decoration:none;
  51. }
  52. div.az-item:hover{
  53.   border:1px solid #387922;
  54. }
  55. @media screen and (max-width:540px){
  56.   div.az-item a div.info p{
  57.     font-size:0.7rem;
  58.   }
  59.   div.az-item a div.info ul{
  60.     font-size:0.7rem;
  61.   }
  62.   div.az-item a div.info ul li span.price{
  63.     font-size:0.75rem;
  64.   }
  65. }

全てを記入し終えたら左下の【Save】をクリックして保存しましょう。

その後、再びダッシュボード画面からAssociates Link Builderタブの【setting】画面へ戻ります。

作成したテンプレートをデフォルトで使用するため、default template欄に先ほど新規作成したテンプレート名を入力しましょう。

【Save】をクリックすればすべての設定は完了です。

リンク設置方法

上記の設定で問題が無ければ投稿画面でAmazonアソシエイトUIが追加されています。

そこに紹介した商品名を入力して【search】をクリック。

該当する商品の候補が表示されるので、紹介したい商品をクリックします。

クリックした商品は下部のセレクト枠に移動しますので、【add shortcode】をクリックします。

無事にリンクのショートコードが投稿されました。

プレビューで確認するとしっかりしたリンクが表示されている筈です。

以上で終了になります。

お疲れさまでした。

まとめ

今回はAmazonアソシエイトリンクを100倍綺麗にするプラグイン【Associates Link Builder】を紹介しました。

これからリンクを設定する人も、今までAmazonJSでリンクを貼っていた人も、これを機に【Associates Link Builder】の導入を検討してみてはいかがでしょうか?

それでは!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする