スポンサーリンク

クリック率3倍超! AmazonJS 禁断のカスタマイズでアソシエイト収益UP

AmazonJS

どうもスルメ坊主です。

皆さんアフィってますか?

初心者ブロガーでも比較的簡単に収益を得ることが出来る2大アフィと言えば、GoogleのアドセンスAmazonのアソシエイトですよね。

今回はその一つであるAmazonアソシエイトの広告リンクのクリック率が3倍以上になったカスタマイズの方法をこっそりお教えします。

私はAmazonのリンクを貼る際は、AmazonJSという神プラグインを使っています。

AmazonJS

AmazonJSはアマゾンへのリンクをとっても簡単に貼ることができるだけでなく、商品画像・メーカー名・本の作者などを表示させることができます。

さらに現在のAmazonの価格も表示させることができちゃう執筆者だけでなくブログ読者にとっても神プラグインです。

設定難易度が私が使っているプラグインの中では最高難易度ですが、一度設定してしまえば、とっても便利なプラグインなんです。

タイトルに『禁断の』付けさせていただいたのは、せっかく超便利なAmazonJSという神プラグインをmakoto_kw様に作っていただいたのに、その素晴らしい機能を表示させなくするカスタマイズになってしまっている理由に他なりません。

スポンサーリンク
レクタングル(大)

AmazonJSの表示内容によるクリック率の推移

まずはリンクの表示内容によるクリック率の推移です。

こちらがデフォルトの表示です↓

デフォルト表示

※画像です

そして、こちらが価格を非表示にカスタマイズした表示です↓

価格を非表示に変更

※画像です

最後に私が今カスタマイズして表示させているものです↓

カスタマイズ後

※画像です

さてこの3種類でどのくらいクリック率が違うのか見ていきましょう。

各表示形式の2カ月間の平均で比べてみました。

デフォルトが、2016年12月~2017年1月

価格非表示が、2017年3月~4月

カスタマイズが、2017年6月~7月

の数字となっております。

間の一カ月を抜いているのは、本当に変えるべきか変えないべきか迷っていて、表示がコロコロ混ざっちゃてるんで抜きました。

さて、その結果がコチラ

表示形式 クリック倍率
デフォルト 1.00
価格非表示 1.62
カスタマイズ 3.18

各々の広告のクリック率を求めるのは大変なので、月間のアソシエイトクリック数を月間PV数で割って、おおよそのアソシエイトのクリック率を求めています。

細かい数値を公表してAmazonに怒られたら嫌なので、デフォルトのクリック率を1としたときの倍率です。

その数字たるやなんと3倍超です!

さらにクリック率が増えたら成約率が下がると思ったそこのあなた!

私も思っていました。

しかし、成約率は変わっていません。むしろ微増!

よって売上も3倍超になりました!!!ラッキー

細かい数字が気になる方は、ツイッターでこっそりお問合せ下さい。

私の行ったAmazonJSのカスタム

それでは実際に行ったカスタム内容の紹介です。

このプラグインは結構導入難易度が高いので、このプラグインを使っている人には、超簡単なカスタマイズなのかもしれません。

が、私は悩みました。大変だった。

1.価格を非表示に変更

まずは、価格を非表示にするカスタマイズをします。

ここで一苦労。

どうもスルメ坊主です。 ブロガーの皆さんアソシエってますか? 私のような初心者でも比較的簡単に収益を上げることが出来るAmazo...

2.詳細項目の削除

そして、その他の項目を消していきます。

参考にしたのはナカムラキリコさんのブログの下記の記事です。

  こんにちは、WordPress初心者のキリコです。   前回の記事、「AmazonJSのぐるぐるエラーについて解決策をまとめてみた」に引き続き、AmazonJSについて書いていきたいと思います。     さて、AmazonJSを無事設置でき

価格を非表示にした時と同様に、スタイルシートで非表示にしたかったのですが、うまくできませんでした。

そこでプラグインのコードそのものから該当箇所を削除しました。

まずはプラグインの編集をクリックします。

プラグイン編集

次に右側のリストにある「amazonjs/js/amazonjs.js」を選択します。

万が一、不具合が起こった時にコピー貼り付けで復活できるように、これから弄るコードをコピーしてメモ帳に避難させます。

コードのコピー

コードの中から Music の部分を探してください。

そして下記の黄色の部分を削除しちゃいます。

Music:[Music:[ '<div class="amazonjs_item amazonjs_music">',
 imageTemplate, '{{if _ShowDefaultImage}}',mediumImageTemplate,
'{{/if}}', '<div class="amazonjs_info" style="{{if _InfoMarginLeft}}
margin-left:${_InfoMarginLeft}px;{{/if}}">', 
'<h4>',linkTemplate,'</h4>', 
'<ul>', 
'{{if Artist}}<li>${Artist}</li>{{/if}}', 
'{{if Creator}}<li>${Creator}</li>{{/if}}',
 '{{if Label}}<li>${Label}</li>{{/if}}', 
priceLiTemplate, 
'{{if ReleaseDate}}<li><b>' + r.ReleaseDate + '</b>${ReleaseDate}</li>{{/if}}', 
'{{if SalesRank}}<li><b>' + r.SalesRank + '</b>' + r.SalesRankValue + '</li>{{/if}}', 
'{{if RunningTime}}<li><b>' + r.RunningTime + '</b>' + r.RunningTimeValue + '</li>{{/if}}', 
'</ul>',
 '</div>',
 reviewLinkTemplate, '<div class="amazonjs_footer"></div>', '</div>' ],

<ul>の中の<li>に該当するところが表示されている項目になっているようなので、<ul>から</ul>までを削除です。

Musicだけでなく、DVD、Book、eBooksも同じような構造になっているので削除します。

これもしかしたら、Musicの部分全部削除しても大丈夫かもしれませんが、私にはわからないのでこれで良しとしています。

また価格の表示も同様の手順で削除できると思いますが、別の方法にて非表示にできていたので、良しとしています。

これで表示項目をすっきりとタイトルだけにすることができました。

ただ、これだけだとあまりにもスッキリとしすぎなので、下記2点を装飾しております。

追加カスタマイズ

3.文字の追加

自分じゃサッパリわからなくっても調べると参考になる記事があるもんですね。

こちらはキリュログさんの記事を参考にさせていただきました。

詳細は下記記事を参照ください。

このブログでは WordPress のプラグイン AmazonJS を使わせてもらっている。AmazonJS を使うと、次の画像のような本の紹介リンクがカンタンに作成できて便利である。ところで、AmazonJS のリンクテキスト(上記の「確

「amazonjs/js/amazonjs.js」の中にある下記を検索して見つけます。

var linkTemplate = linkOpenTag + '${Title}

そしてその後にこのように追記しました。

var linkTemplate = linkOpenTag + '${Title}<br><small><font color="#1111cc">
[Amazonでレビューを見る]</font></small>

<br>で改行してあげて、

<small>で文字をちょっと小さくしてあげて、

<font color>で文字の色を変更してあげて、

[Amazonでレビューを見る]の文字を追加しています。

文字の色はリンクと認識しやすいようにグーグルの検索結果と同じ色にしてみました。

[Amazonでレビューを見る]の部分は[Amazonでチェケラッチョ!!ハゲラッチョ!]でも何でもOKです。

『Amazonで詳細を見る』や『Amazonで購入する』など試してみてベストな文字を見つけたいです。

私のブログはモノの紹介が多いので『Amazonでレビューを見る』にしてみました。

4.枠線を太く変更

あまりにも殺風景になりすぎたので目立つように枠線を太く変更してあげました。

AmazonJSのなかの『amazonjs/css/amazonjs.css』の部分をいじります。

amazonjs/css/amazonjs.css

.amazonjs_item {
font-size: 14px;
margin: .5em 0 1em 0;
padding: 25px 10px 25px 10px;
border: 3px solid #ddd;
position: relative;
display: block;
color: #333;
}

黄色の部分の数字を大きくして完了です。

簡単。

5.右下のAmazonのロゴマークを消す

最後によりスッキリとさせるために右下についていた[a]のマークを消しました。

こちらもAmazonJSのなかの『amazonjs/css/amazonjs.css』の部分をいじります。

.amazonjs_item {
font-size: 14px;
margin: .5em 0 1em 0;
padding: 25px 10px 25px 10px;
border: 1px solid #ddd;
position: relative;
display: block;
background: white url(../images/amazonjs.png) no-repeat right bottom;
color: #333;
}

上記の黄色の部分を削除して完了です。

こちらも念のためコピーしてメモ帳に貼り付けておくなどバックアップを取っておくことをお勧めします。

まとめ

blog

サイトを訪問した人にとって、Amazonでの現時点の販売価格や詳細情報がわかるAmazonJSは、とても読者想いのプラグインになっています。

そして、読者が満足する⇒グーグルからも認めてもらえる。といった素晴らしい流れを生み出せそうな気がします。

そんな流れに対して逆行するカスタマイズです。

アフィリエイトにおいては、いかに収益が上がるかがポイントですよね。

その収益の起点となるリンクのクリックは大いに越したことないです。

心を悪魔にして試してみてはいかがでしょうか?

やっぱり価格が表示されていない方が「いくらなんだろ?」ってクリックする人が増えるみたいですね。

ちなみにプロブロガーの方々はあまりAmazonJSを使っている人を見ません。

カエレバの方がいいってことなんでしょう。きっと。

しかし、今更リンクをすべて変えるのは大変です。無理。

やった方がいいのはわかっていても、マヂ無理。

そして、リンクを貼る楽ちんさに関しては、ぜったいにカエレバよりもAmazonJSの方が勝っています。

私は今後もAmazonJSさんにお世話になると思います。

最後に、本カスタマイズは、バックアップを取るなりして『 完全自己責任 』でお願いします。

なんかバグって表示されなくなっても私には解決できないし、質問されてもサッパリわかりません。

ってことで今後とも本ブログをよろしくお願いいたします。

この記事が気に入ったら
いいね!をお願いします

スルメ坊主を