AmazonのProduct Advertising API v5 に対応した商品紹介用のバナーを貼り付けるためのショートコードを作ってみた。

はじめに

本Webサイトにおいて使用してきたAmazonのProduct Advertising API v4(以下、「PA-API」と書きます。)ですが…

「2019年11月末をもって使用できなくするから、とっととPA-APIv5に移行するように。」

とのお達しをAmazonからいただいたので、この際、PA-APIv5を使ったショートコードを自作することとしました。

自作するにあたり考えたこと

PA-APIv4を使い始めた当初は本Webサイトの記事自体が少なく、それを補う目的でウィジェットのようなものや特集ページのようなものを作ったりして試行錯誤したものの、紹介料がほとんど発生しませんでした。

そんな中、試しにAmazonJSを使ってみたところ紹介料がそこそこ発生するようになったため、そのまま使い続けることにしたというこれまでの経緯があります。

AmazonJSはいろいろなWebサイトで使われているプラグインで使いやすいものではありますが、広範囲に使われているものであるがゆえに、長期間使っているとAmazonJSで作ったバナーが徐々にユーザの興味を惹きにくくなっていくことが予想されます。

そこで、

AmazonJSで作成できるリンクの雰囲気は残しつつも、
独自に作りました感を出せて、
かつレスポンシブなバナーで、
バナー内部のリンクがクリックされるとその情報が検知できるようなHTMLの断片(snippet)を出力するショートコードを、
Amazonが公開しているPA-APIv5のSDKを使って

開発することにしました。

事前準備

開発の前に事前準備を行います。

事前準備その1: APIアクセスキーの取得

PA-APIv4では、AWSのAPIアクセスキーでもアクセスができましたが、PA-APIv5では専用のAPIアクセスキー以外のアクセスキーではアクセスが出来なくなってしまったので、事前に取得しておきます。

事前準備その2: PA-APIv5のSDKのインストール

PA-APIv5のSDKはPHPのライブラリがインストールされているディレクトリにコピーしておきます。Fedora 30におけるPHPのライブラリは/usr/share/phpでした。

事前準備その3: Google Analyticsへのイベントの送信のための設定

Google Analyticsへのイベントの送信のための設定が行われていることを確認します。設定が行われていなければ、このページを参考にしつつ設定を行います。

Google Analyticsのアカウントがない場合や利用のための設定が行われていない場合には、上記の設定を行う前にアカウントの取得及び設定を行います。

サクサクと作ります。

事前準備が完了したら、サクサクと作ります。

データ取得部

データ取得部はAmazonが公開しているPA-APIv5のSDKに同梱されているGetItem.phpで実装されているデータ取得部及びシリアライズ部を参考に実装します。

実装例は以下のような感じになります。

GetItem.phpにはAPIを非同期に呼び出すためのコードも実装されていますが、商品の画像ファイルのURLを取得することができなかったため、APIは同期呼び出しの関数(getItems)を使用しています。

データのキャッシュ

PA-APIは呼び出しの回数に制限がありますので、APIの呼び出しで取得した商品のデータ(JSONフォーマット)は取得日時及びASINとともにデータベースに格納します。なお、データベースに格納された商品のデータは取得後24時間が経過すると破棄され、PA-APIのAPIの呼び出しにより新たに商品のデータが取得されてデータベースに格納される仕様としています。

データベースへの格納時には、Unicodeで記述された日本語の文字等のマルチバイトの文字列のバックスラッシュがデータベースへのinsert時に削除されてしまうことを防ぐために、esc_sql関数を用いてエスケープしています。

また、データベースに格納されたデータを使ってHTMLのsnippetを作る場合には以下のようなコードを用いて変数jsondataに格納されているデータベースから取得されたstring型のデータをシリアライズしたresponseオブジェクトを作り、さらにそれをHTML snippetを作るロジックに渡す処理を実装することでロジックの共通化を図っています。

$response = ObjectSerializer::deserialize(json_decode($jsondata),
'\Amazon\ProductAdvertisingAPI\v1\com\amazon\paapi5\v1\GetItemsResponse',
[]);

バナーのデザイン

バナーのデザインはAmazonJSに準じていますが、内部に表示される情報は必要最低限のものとしています(下図)。

ボタンや枠の周りに影をつける等、若干ファンシーなデザインとしています。

また、リンクの色はヨコハマネイビーブルーっぽい色としています。

Google Analyticsへの出力用の設定

バナー内のaタグのonclick属性にGoogle Analyticsへの通知用の関数(ga()コマンドキュー関数)を設定しています。詳細についてはこちらを参照してください。

出力例

バナーの出力例

バナーの出力例は以下のような感じになります。

また、スマホでは以下のような感じで出力されます。

Google Analyticsへの出力

バナー内のリンクのクリックはイベントとしてGoogle Analyticsに送られるので、Google Analyticsにログインするとイベントの発生状況を見ることができます。

Amazonのアソシエイト・セントラル・レポートでの表示状況

Amazonのアソシエイト・セントラル・レポートでも前日までのクリック数の情報を朝6時頃には見ることができるのですが…

この記事を最初に書いた時点(2019年11月)では、上図の(a)の行にPA-APIv5についてのクリック数、売上及び紹介料と思われる情報が表示されていますが、肝心かなめの「リンクタイプ」に何も表示されません…