WordPressでAmazonサーチウジェットに自動でカテゴリー名を挿入する

Amazonのサーチウィジェット WordPressで「アマゾンの広告を入れたい」と誰もが思ったことがあると思います。特定の商品ページへのリンクであればプラグインもありますが、検索ウィジェットを入れるとなると、サーチウィジェットを使うしかありません。 ですが、サーチウィジェットでは検索ワードを自動的に入れられないので、Quick Adsenseなどのプラグインではソースコードを直接入れても下記の画像のように検索ワードが空欄のままなので、実質使い物になりません。 固定で文字を入れても良いのですが、それだと記事に合わない検索ワードになってしまい、あまり効果がありません。

JavaScriptを使ってカテゴリーを取得

検索ワードにカテゴリーを入れる方法を紹介します。私は今はCocoonを使っていますので今回はCocoonで説明します。 まずは、JavaScriptを使ってカテゴリーを取得します。

• Windowsではブラウザ上でF12キーをクリックするとデバッグモードになります。
• 次に右上にある「Console」タブをクリックします。
• その下にある空欄に下記のコードをコピペして「Enter」を押して実行します。
• 「undefined」と結果が出るはずですので、次に「text」と入力して「Enter」を押します。

var arr = [];
document.querySelectorAll(\'#breadcrumb > .breadcrumb-item > a > [itemprop=\"name\"]\').forEach(element=> arr.push(element.innerText));
var text = arr.join(\' \');

これで下記のようにカテゴリー文字が表示されればOKです。

Amazonアソシエイトのサーチウィジェットのコードを取得

Amazonアソシエイトのページからウィジェット→商品検索ウィジェットのページに進みます。 サーチウィジェットを選択すると下記のページが表示されますので、右下にある「広告コード」をコピーしてメモ帳などに保存します。

<script type=\"text/javascript\">
amzn_assoc_ad_type =\"responsive_search_widget\";
amzn_assoc_tracking_id =\"トラッキングID\";
amzn_assoc_marketplace =\"amazon\";
amzn_assoc_region =\"JP\";
amzn_assoc_placement =\"\";
amzn_assoc_search_type = \"search_widget\";
amzn_assoc_width =\"auto\";
amzn_assoc_height =\"auto\";
amzn_assoc_default_search_category =\"\";
amzn_assoc_default_search_key =\"\";
amzn_assoc_theme =\"light\";
amzn_assoc_bg_color =\"FFFFFF\";
</script><script src=\"//z-fe.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1&Marketplace=JP\"></script>

このコードに先程作成したJavaScriptを上に追加し、更に14行目を\”\”からtextに差し替えます。

<script type=\"text/javascript\">var arr = [];
document.querySelectorAll(\'#breadcrumb > .breadcrumb-item > a > [itemprop=\"name\"]\').forEach(element=> arr.push(element.innerText));
var text = decodeURI(arr.join(\' \'));
amzn_assoc_ad_type =\"responsive_search_widget\";
amzn_assoc_tracking_id =\"トラッキングID\";
amzn_assoc_marketplace =\"amazon\";
amzn_assoc_region =\"JP\";
amzn_assoc_placement =\"\";
amzn_assoc_search_type = \"search_widget\";
amzn_assoc_width =\"auto\";
amzn_assoc_height =\"auto\";
amzn_assoc_default_search_category =\"\";
amzn_assoc_default_search_key =text;
amzn_assoc_theme =\"light\";
amzn_assoc_bg_color =\"FFFFFF\";
</script><script src=\"//z-fe.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1&Marketplace=JP\"></script>

Quick Adsenseプラグインを追加

次にQuick Adsenseプラグインを追加しますが、インストール方法は省略します。 インストール後、WordPressの管理画面から左側のメニューから「Quick Adsense」をクリックします。 「Ads on Post Body」タブをクリックして、Ads1の箇所に上記のコードを貼り付けて下にある「Save Change」をクリックします。 Quick Adsenseの「Setting」で表示箇所の設定を行ったら完成です。

まとめ

今回はJavaScriptを使ってページ内のカテゴリー名を取得して、Amazonサーチウィジェットに追加しました。カテゴリー名の取得方法はWordPressのテンプレートによって異なりますので、上記のコードで取得できなかった場合は、いくつかトライしてみてください。 JavaScriptの使い方がわかれば、カテゴリー名だけでなくタグ名やタイトル名なども取得できます。]]>