AmazonへのリンクがクリックされたかどうかをリンクのURLを書き換えることなく確認する方法

はじめに

Amazon Product Advertising APIを使ってデータを取得し、それを利用してAmazonへのリンクを作ると、任意のデザインでリンクを作ることができるので、デザインのセンスがあればAmazon謹製のリンクよりはおしゃれなリンクを作ることができます。

ただ、どの商品に対するリンクがクリックされたのかを知るための仕組みはAmazonからは提供されていません(2017年11月現在)。

そこで、自作してみることにしました。

まず、仕組みを考えます。

ITシステム屋さんがわりとすぐに思い付く方法

「ユーザがクリックしたことをイベントとして拾ってきて、どこかに記録する。」というと、街のITシステム屋さんがわりと簡単に思いつくのは、

「AmazonへのリンクをWebサイトに直接貼るかわりに、それに紐付いたアクセスカウント用Webサーバへのアクセス用のリンクを貼っておく。そのリンクがクリックされたら、アクセスカウント用のWebサーバ上からカウント処理用のプログラムを起動し、カウント処理を行う。カウント処理が完了したら、対応するAmazonへのアクセス用のURLをリダイレクト先としてブラウザに返す。」

という仕様ですかね。そして、この仕様の副次的な効果としてよく語られるのが、

「URLの書き換え方を工夫することで、Amazonへのリンクであることがサイトへの訪問者にはわかりにくいようにすることができるので、クリック率の向上が期待できる。」

という「メリット」です。

技術的には手堅い案だとは思いますが、URLの書き換えの部分を担当するプログラムは独自実装になりますので、その作成及びメンテナンスやそれを動かすためのhttpdに対する設定が必要になります。

また、Amazonへのリンクであることをわかりにくくするという部分については(私見ですが)、Amazonへのリンクであることを理解してもらった上でリンクをクリックしてもらう方がクリックする人にとっても納得感は出るだろうと思うので、上記の「メリット」って本当にメリットになっているのかどうか自分にはわかりません。

onclickイベントを拾ってみる。

ここまでに書いてきたことを踏まえて、上記の方法以外の別のアプローチを考えます。

次に思い付くのは、aタグ(アンカータグ)にイベントリスナーを追加し、JavaScriptでサーバにコマンドを送信する方法です。これならリダイレクト等の方法でhref属性の部分を書き換えなくてもできそうです。

JavaScriptは別ファイルとし、そのファイルを読み込ませるためのコードをfunctions.phpに追加します。バージョン番号の部分はかなり迷った末、時刻(年月日時分秒の14桁)を入れることにしました。

function add_scripts_for_gallery() {
wp_enqueue_script( ‘smart-script’, get_template_directory_uri() . ‘/js/(JavaScriptのプログラム)’, array(‘jquery’), date(‘YmdHis’), true );
}
add_action(‘wp_print_scripts’, ‘add_scripts_for_gallery’);

次にサーバへのデータの送信用のJavaScriptのプログラムと、送信されたデータをデータベースに書き込むPHPのプログラムを用意します。

JavaScriptのプログラムは、以下のような感じになります。

また、データを受け取り、データベースに書き込むためのPHPのプログラムは以下のような感じになります。

最後にデータベース上に書き込まれたデータの保存用のテーブルを作るためのSQL文を作って実行すると完成です。

…と、言いたいところですが…

HTMLにJavaScriptにPHPにJSONにSQLと、いろいろなプログラミング言語が登場しますので、動作確認がかなり大変です。

動作確認の過程で(他のWebシステム等に迷惑をかけた訳ではありませんが)、いろいろやらかしてます。

実はAmazonへのリンクのaタグにclass属性をつけるのを忘れていまして、PHPのコードとデータベースに格納していたリンク用HTMLを同時に更新したのですが、その際にデータベース(MariaDB)をUPDATE文で更新しています。

MariaDB,UPDATE,タイムスタンプとくれば…

そうです。SQLのUPDATE文に以下のもの(カラム名が”timestamp”の場合)を入れておかないと、タイムスタンプ(正確にはUPDATE対象となるテーブルのタイムスタンプのうち、最初のカラムにあるタイムスタンプ)が現在時刻で上書きされてしまいます。これを忘れていました。

timestamp = timestamp

これが原因で、リンク用のHTMLを作成した日時を格納していたタイムスタンプが現在時刻に書き換わってしまったので、前に作成したAmazonへのリンクは削除してしまいました。悪しからずご了承ください。

まとめ&おことわり

JavaScript等を使ってAmazonへのリンクを検知する方法について書きました。POSTコマンドでJSONを入力として受け取って処理を行うPHPのコード例は情報が少ない割には使う機会が多いと感じたので、自分のコピペ用にも役立つと思い、アップロードしました。

この記事のコード例については、一部の情報を書き換えて公開していますので、参考にされる際にはその部分は適用対象のシステムの設定に読み替えてご覧いただけると幸いです。ただし、(毎度の注意書きにはなりますが、)適用した結果及び生じた損失などにつきましては責任は一切負えませんのでご了承ください。

この記事は以上です。