収入3割増のAmazon Mobile Popperの導入方法と注意点

2016/7/1(金) 2024/2/6(火) きむおば

このブログではアフィリエイト・アドセンス広告を利用しています

当ブログでは、アドセンス・アフィリエイト広告を掲載しています。
消費者庁が発表しているルールに沿って記事を作成していますが、問題のある表現を見つけた際にはご連絡ください。

残念ながら、Amazon Mobile Popperは2023年9月7日に完全廃止されました。コードが残っている方はすみやかに削除してくださいね。

私も、コンソールログのエラーで気づき、先ほどbody閉じタグ前のコードを除去したところです。

以下のコンテンツは記録用に保存しています。現在は使用できない機能です。

—

Amazonアフィリエイトの新しいモバイル対応広告「Mobile Popover」を知っていますか？

今まで全然気づいてなかったんですが、ずいぶん前から導入されていたんですね。アメリカでは、売上が30％もアップしたというMobilePopoverの導入方法と注意点をまとめてみました。

目次（読みたいところへジャンプ！）

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

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

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

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

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

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

function.phpファイルにコードを追加
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を追加する方法」を参考にさせていただきました。