Amazonアフィリエイトの新しいモバイル対応広告「Mobile Popover」を知っていますか？今まで全然気づいてなかったんですが、ずいぶん前から導入されていたんですね。アメリカでは、売上が30％もアップしたというMobilePopoverの導入方法と注意点をまとめてみました。

導入はコードを</body>タグのすぐ上にコピペするだけ

MobilePopoverの始め方は、とっても簡単。Amazonアソシエイトにログインすると、ひっそりとお知らせがあります。

何ヶ月も気づきませんでしたよ…。みなさん、気づいてました？
このお知らせリンクをクリックすると、すぐに広告コードが発行されます。

表示されているコードをコピーして、</body>タグのすぐ上に貼り付けたら完了です。
WordPressを使っているなら、テーマのfooter.phpファイル内にある</body>タグを探してペーストすると、全ページで対応できます。

Amazonアフィリエイトを使っている特定の記事にだけに対応させたいなら、カスタムフィールドを活用すると実現できます。

カスタムフィールドを利用して特定のブログ記事だけにAmazon Popover対応させる手順

1. function.phpファイルにコードを追加
2. customJsにAmazon Popoverコードを追加

functions.phpファイルにコードを追加

外観→テーマの編集から、テーマの編集画面へ行きます。テーマ内にあるfunctions.php下のコードをコピペで追加します。
この方法の場合、利用しているテーマが更新されると、追加した部分が消えてしまうので、子テーマを作成して対応することをオススメします。
テーマのカスタマイズで、すでに子テーマを利用しているなら、新しく子テーマ内にfunctions.phpファイルを作ればOKです。

サイト製作時には、文字コードを指定して保存ができるテキストエディタを使います。テキストエディタで人気があるのは、SublimeText3、mi、秀丸エディタの3つです。

/* Custom JS */
add_action('admin_menu', 'custom_js_hooks');
add_action('save_post', 'save_custom_js');
add_action( 'wp_print_footer_scripts', 'insert_custom_js' );
function custom_js_hooks() {
 add_meta_box('custom_js', 'Custom JS', 'custom_js_input', 'post', 'normal', 'high');
 add_meta_box('custom_js', 'Custom JS', 'custom_js_input', 'page', 'normal', 'high');
}
function custom_js_input() {
 global $post;
 echo '<input type="hidden" name="custom_js_noncename" id="custom_js_noncename" value="'.wp_create_nonce('custom-js').'" />';
 echo '<textarea name="custom_js" id="custom_js" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_js',true).'</textarea>';
}
function save_custom_js($post_id) {
 if (!wp_verify_nonce($_POST['custom_js_noncename'], 'custom-js')) return $post_id;
 if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
 $custom_js = $_POST['custom_js'];
 update_post_meta($post_id, '_custom_js', $custom_js);
}
function insert_custom_js() {
 if (is_page() || is_single()) {
 if (have_posts()) : while (have_posts()) : the_post();
 $add_jscode = get_post_meta(get_the_ID(), '_custom_js', true);
 if(!empty($add_jscode)){
 echo $add_jscode;
 }
 endwhile; endif;
 rewind_posts();
 }
}

コードは、NxWorldさんの「WordPress：ページや記事ごとに個別のCSSやJavaScriptを追加する方法」を参考にさせていただきました。

customJsにAmazon Popoverコードを追加

①のコードを追加すると、記事投稿画面の下に「CustomJS」という入力欄が増えているはずです。表示されない場合には、サイトを再読み込みしたり、functions.phpファイルを確認してみてください。

ここに、この記事にだけ対応したいJavaScriptコードを貼り付けるだけです。AmazonのページでコピーしておいたPopoverのコードを貼り付けると、このページだけポップオーバー広告が表示されます。

Amazon Popover広告の注意点

Amazon Popover広告には、気をつけなくてはいけない点がいくつかあったので、整理してみました。

Amazon Jsに対応していない

WordPressのプラグイン「AmazonJs」は、非対応です。全然広告表示がされないので、悩んでしまいましたが、プラグインを利用した場合にはPopover広告は表示されません。
Amazonアフィリエイトサイトのコードやリンクのみ対応します。

Google AdSenseと共存できない

Google AdSenseでは、AdSense広告の上に他のコンテンツが重なって表示されることを規約違反としています。Amazon Popover広告は、規約違反となる可能性があるので、Amazon Popover広告を利用しているページは、AdSense広告を非表示にする対応が必要になります。

Amazonアフィリエイトのクリック率が上がるかもしれないPopover広告。上手く活用してみてください。

プラス月5万円で暮らしを楽にする超かんたんアフィリエイト