AMPでAmazonアフィリエイト(アソシエイト)に本格的に対応した話（Wordpress AmazonJSを使う）

皆さんのサイトではAMP対応は進んでいますか。

AMPの説明はここではしませんが（Accelerated Mobile Pages）というモバイルページの高速化技術です。
AMP登場してから早2年ですが、ニュースサイトやグルメサイトを中心に、国内でも多くサイトでも採用されています。
私のサイトでもすぐに採用しようと思い、一度検討したのですが課題が多く対応を見送ったことがあります。

導入を見送った主な理由は二つです。

Amazonアフィリエイト(アソシエイト)の広告をキレイに表示できない。
JavaScript（以下、JS）を多用しているサイトのため、移行が困難（AMPではJSは使用できない）

特にAmazonの商品を紹介するサイトでは１の課題がクリアできないと致命的ですよね。
私のサイトでは商品を多く紹介していた事と、JSをかなり使っていたので移行は不可能と判断しました。
むしろ移行するよりは、新しくサイトを作った方がよいと思うぐらいAMPは使用できる技術の制約が多いです。

さて、そんなAMPですが２０１７年に入ってからGoogle以外の大手検索エンジンYahoo,バイドゥも検索に対応したこともあり、いよいよ対応が本格的になってきました。

そろそろ対応は必須か・・と思い、今回重い腰を上げて課題のひとつ目である「AmazonアフィリエイトリンクをAMP対応」してみましたので紹介します。

二つ目の課題への対応はまた後日、別の記事で紹介します。

1 １．サンプル　Amazonアフィリエイトを設置したAMPページ
- 1.1 １．１　仕組み
2 ２．導入編 WodrepressにAMPプラグインを入れる。
3 ２．WordpressのAmazonJSプラグラインを入れる。
4 ３．WordpressからAmazon Product Advertising APIを使う
- 4.1 処理解説
5 まとめ
- 5.1 こちらの記事もどうぞ

１．サンプル　Amazonアフィリエイトを設置したAMPページ

早速ですが、実際に作ったAMPのページです。

画面の一番下にAamazonアフィリエイト商品のリンクを設定しています。

AMPにも最適化されてキレイに表示されていませんか？

お気づきの方もいるかもしれませんが、見た目はWordpressのAmazonJSと同じにしています。

私のWordpressではAmazonJSを使って、Amazonアフィリエイトのリンクを作っていたので、今回互換性を持たせるように対応をしました。

１．１　仕組み

AmazonJSのプラグラインはJSで通信を行い、Amazonから商品情報を取ってくる仕組みなのでAMP環境下では動作しません。
よって、JSによる処理をサーバサイド（Wordpress側）の処理へと変更を行い、Amazonから情報を取得して表示する仕組みを作りました。

記事へのAmazonアフィリエイトの商品設定は従来どおりAmazonJSで行い、出力する処理のみを今回新しく追加する処理で対応しました。

なので、Amazonアフィリエイトを設定する手順は全く変わらないので楽です。
もちろんこれまで設定したリンクの再作成は不要です。
さらに見た目はAmazonJSのCSSを適応すること、ほぼ見た目も同じものにしました。

２．導入編 WodrepressにAMPプラグインを入れる。

定番のAMPプラグインをインストールします。

このテンプレートは自分が使っているテーマにAMPプラグイン内に入っているテンプレートをコピーするだけで、WordpressをAMPに対応することができます。

私はこのプラグインを使っていますが、最近はGoogleが推奨している「AMP for WP – Accelerated Mobile Pages」プラグインの方が人気があるみたいですね。

今回紹介する方法はプラグインに依存するような方法ではないので、どちらのプラグインでも使用できるはずです。
※プラグインの使い方は他の記事がたくさんあるので、ここでは割愛します。

２．WordpressのAmazonJSプラグラインを入れる。

プラグインが最近更新されていないこともあり、管理画面の検索からは出てこない（２０１７年１１月時点）ので、手動でインストールします。

ダウンロードURL

ダウンロード後、管理画面からアフィリエイト用のAPIKEY等を設定して使えるようにします。

これで、通常のページでAmazonJSの商品が表示されます。

３．WordpressからAmazon Product Advertising APIを使う

APIプログラムをダウンロードしてAMPテンプレート配備します。
github: AmazonWordpressApi

配置例）
/wp-content/themes/テーマ名/amp/aws_apai.php

次に、AMPテンプレートの修正をして、AmazonJSのタグをAPI経由で取得した商品情報に置き換えます。

修正ファイル）
/wp-content/themes/テーマ名/amp/single.php

<?php echo $this->get( ‘post_amp_content’ ); // amphtml content; no kses ?>

この部分を次のように変更します。

<?php
$htmlcontents = $this->get( 'post_amp_content' );
// AMAZON JS対応
$matchNum = preg_match_all('/data-asin="([^"]{1,})"/', $htmlcontents, $matches);
include "aws_apai.php";
foreach ($matches[1] as $asin) {
$html = getAsinInfo($asin);
$htmlcontents = preg_replace('/<div data-role="amazonjs".*?<\/div>/',$html, $htmlcontents,1);

}
echo $htmlcontents;// amphtml content; no kses
?>

ファイルの一番下に関数を追加します。

<?php
function getAsinInfo($asin) {
$product = aws_apai_get_product_by_asin($asin);
return getAmazonInfoHtml($product);
}

function getAmazonInfoHtml($product) {
// 画像サイズを横幅最大65pxとする
$imgWidthMag= $product["imageWidth"] / 65;
$imgWidth = $product["imageWidth"] / $imgWidthMag;
$imgHeight = $product["imageHeight"] / $imgWidthMag;

$html;
$html .= '<div class="amazonjs_item">';
$html .= '<div class="amazonjs_image">';
$html .= '<a href='. $product["url"] . 'class="amazonjs_link" data-role="amazonjs_product" data-asin="'. $product["asin"] .'" title="'. $product["name"] .'" target="_blank">';
$html .= '<amp-img src="'. $product["image"] .'" width="'. $imgWidth .'" height="'. $imgHeight .'" alt="'. $product["name"] .'"></a>';
$html .= '</div>';
$html .= '<div class="amazonjs_info">';
$html .= '<h4>';
$html .= '<a href="'. $product["url"] . '" class="amazonjs_link" data-role="amazonjs_product" data-asin="B00HV671GW" title="'. $product["name"] .'" target="_blank">';
$html .= $product["name"] .'</a></h4>';
$html .= '<ul>';
$html .= '<li>'. $product["publisher"] . '</li>';

if (isset($product["fprice"]) and !empty($product["fprice"])) {
$html .= '<li class="amazonjs_price" title="価格および発送可能時期はデータを取得した時点のものであり、変更される場合があります。商品の販売においては、購入の時点で [Amazon.co.jp または Javari.jp] に表示されている価格および発送可能時期の情報が適用されます。">';
if (isset($product["ListFprice"]) and !empty($product["ListFprice"])) {
$html .= '<b>参考価格</b><span class="amazonjs_listprice">'. $product["ListFprice"]. '</span><br>';
}
$html .= '<b>価格</b>'. $product["fprice"] . '<span></span></li>';
}

if (isset($product["releaseDate"]) ) {
$html .= '<li><b>発売日</b>'. str_replace("-", "/",$product["releaseDate"]) . '</li><li>';
} else if(isset($product["publicationDate"])) {
$html .= '<li><b>発売日</b>'. str_replace("-", "/",$product["publicationDate"]) . '</li><li>';
}
$html .= '<b>商品ランキング</b>'.number_format($product["salesRank"]) . '位</li>';
$html .= '</ul>';
$html .= '</div>';
return $html;
}
?>

※細かい動作確認はできていないので、使用は自己責任でお願いします。