スポンサーリンク
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」をクリックします。
コメント