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

Webマーケティング
この記事は約5分で読めます。

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の使い方がわかれば、カテゴリー名だけでなくタグ名やタイトル名なども取得できます。


参考になったら下のSNSボタンをクリックしてシェアしてもらえると嬉しいです!やる気がでます!!

コメント

タイトルとURLをコピーしました