AmazonJSでアマゾンアソシエイトを使い倒すには

フルタニ
こんにちは、フルタニです。放送局で番組作りをしてました。

アマゾンの広告バナーを貼ると決まって表示されるのが小さな縦長の広告画面。

写真も小さく商品の説明も目立たないので、来訪者が購入ボタンを押してくれるかが気になります。

右脇の余白が無駄にもったいないと感じる時は、複数の商品を並べることもできます。

しかし、できることなら一つの商品を押し出したいところです。

そんな時に頼りになるのがAmazonJSというプラグインです。

AmazonJSとは

WordPressのプラグインです。

Amazoneアソシエイトの広告コードを記事に埋め込む作業を省いてくれます。

これまでは・・・・

Amazoneのページを開いて、商品を検索、特定した商品のページの上部にある広告コードを開いてコードをコピー。

それからWordPressの記事を開いてコピーした広告コードを貼り付ける・・・

という二段階の手間がかかりました。

AmazonJSは、WordPressの記事に広告を置く場所を指定するだけ。

記事の上部にあるAmazonJSのバナーから商品探し出して貼り付けるだけの作業になるのです。

さらに、広告の見え方もスッキリ印象的に変わります。

公式リンクと比較してみた

たたとえばこんな感じ。

下の2商品はAmazoneの公式リンクでつくったものです。

AmazonJSを使うと商品の広告画面がサイトの幅に合わせて広がり、商品の画像や価格、問い合わせ先などを表示してくれるので非常に目立ちます。

早速導入してみましょう。

※これからAmazoneアソシエイトを利用する方はAmazoneから所定の手順でアクセスキーとシークレットキーを取得しておいてください。(アクセスキーとタグの入手方法の説明は省略します)

AmazonJS のインストール

AmazonJSの設定は超簡単。インストールして有効化したら設定画面を開きます。

設定画面の赤枠の部分に入力し、「変更を保存」をクリックします。

※有料テーマの「stork」を使う場合はカスタマイズにもチェックを入れます。

これで下準備が完了。

記事に貼る広告リンクは、この設定にあるアクセスキーを参照してAmazoneとのやりとりをすることになります。

AmazonJS の使い方

使い方は簡単です。

まず、広告バナーを貼り付けたい位置にカーソルを合わせます。

青い点線出囲った部分に横長のAmazone広告を貼ります。

AmazonJS を有効化するとWordPressの投稿画面の上にアマゾンマークが出現します。ビジュアルモードにもテキストモードにも現れますが、テキストモードではうまく貼り付けられなかったので、ビジュアルモードを使います。

クリックをすると検索窓が出現します。この中に任意の商品名を入れるとAmazoneのデータベースから商品を探し出せるしくみです。

書名のほか、ISBNコードを使っての検索もできます。

検索文字からいくつかの候補が見つかりました。テンプレートには記事の中の広告の見え方が載っています。目的である横長の広告はデフォルトです。挿入のボタンを押すと見た目の広告バナーが記事上に掲載されます。

ビジュアルモードに戻ると選択したAmazoneコードが記入されているのがわかります。

※4388061034とありますが、これは本の商品コードです。アクセスキーなどの機密情報はありません。

この状態の時、テキストモードはこのように表示されています。

青い点線で囲った部分がAmazonJSで追加された記載です。実際の表示画面ではこのようになります。

※グーテンベルグで作ったコードの上に貼り付けたので、表記が乱れていますが使用上師匠はありません。

上:AmazonJSによる広告。下:公式バナーを二つ横並びにしたもの。

表示画面を見てみると、従来の公式リンクにはない強い印象が感じられます。

AmazonJSのメリット・デメリット

一度設定さえしてしまえば、記事上で商品の検索と貼り付けができること。

WordPress上で作業をしながら、広告の貼り付けや調整ができることは、作業工程を減らせるので便利です。

問題はGutenbergです。ボタンが表示されるのはクラシックタイプの編集環境までのようです。2018年11月の時点では次期エディターGutenbergから入力できません。早く対応して欲しいものです。