楽天モーションウィジェットをPC・スマホで切替&その他の裏技

rakuten

楽天アフィリエイトのモーションウィジェットをブログへ設置してる方はとても多いと思います。
でも、モーションウィジェットってPCで見るにはいいけど、PC用の大きいサイズをそのままスマホでも表示してると、動かない!動かすボタンが無い!なにより重い!!

訪問者に見ていただくものですから、スマホからはスマホ用に最適なものを選んでユーザビリティの向上を目指したいですね。

スポンサーリンク

スマホに最適な楽天モーションウィジェットは?

楽天アフィリエイトにはモーションウィジェットに「スマホ用」があります。
楽天モーションウィジェット種類

でも、これを選択してスマホで表示してみると 画像が小さすぎて何の商品なのか分かりません。(^^;)
楽天モーションウィジェット・スマホ用

PCで表示してる600×200の場合、PCで見ると↓
楽天モーションウィジェット

スマホで表示した場合(左側)
レスポンシブに対応してないため、スマホでも600×200のまま大きくはみ出して
動かないし、動かすボタンも表示されていません。
楽天モーションウィジェット

↑右側は300×160を表示して比べてみました。
画像も見やすく、ちゃんと動くし左右のボタンも表示されました。

スマホ専用より見やすくて、PC用より動作が軽いので
このサイズがスマホに設置するには一番最適じゃないかな?と思います。

PCとスマホで切替える方法 (自己責任で!)

ブログ・ウィジェットの機能でPC表示専用、スマホ表示専用と分かれてたら簡単に使い分けができますが、
場所やブログを選ばずにCSSだけで対応する方法を紹介します。

まずは、楽天アフィリエイトより「モーションウィジェット」のコードを2つ取得しておきます。

このブログを例にすると、
PC用は :600×200
スマホは :300×160

設置する場所へのHTML

それぞれのコードに分かりやすいID名を付けて設置します。

HTMLを先に書くと、いきなり2つの広告が表示されるため↓CSSから記述するほうがいいかもしれません。

コピペでOKのCSS

Media Queriesで閲覧デバイスの幅に応じて表示・非表示を切替えます。
機種によって様々ですが、スマホの場合は480pxまでとしています。

2行目から:481px以上では300×160の広告を非表示。
5行目から:480px以下では600×200の広告を非表示にしています。

保存したら1度再読み込みしてPCとスマホで確認して下さいね。

楽天モーションウィジェットの精度が上がる?

楽天モーションウィジェットが閲覧者に嫌われる理由の1つに、
過去に自分が閲覧した商品が、初めて訪問したページでも表示されて
「このサイトは私の楽天の履歴を知ってるの?」と気持ち悪くなることです。
(アフィリエイトを知らない訪問者には広告もサイト内コンテンツの一部だからです)

その履歴しか表示しないモーションウィジェットを記事内のキーワードに応じた商品を表示する方法があります。
楽天モーションウィジェットhelp

例えば、カメラの記事を書いてた場合でカメラに関する商品を表示したいときは、
文章内の「カメラ」のテキストの前後に、
<!-- rakuten_ad_target_begin --> カメラ <!-- rakuten_ad_target_end --> 
で挟みます。

ただし、ほんとに効いてるのか?と疑いたくなるほどに
コードを記述したページは何日経っても相変わらず履歴しか表示してくれません。(^^;)

モーションウィジェットの前に一言付け加えてみる。

前述したように「モーションウィジェット」は目を惹く反面、嫌われています。
視界から外そうとする人に、もう1度注目してもらうためには、
一言書くのも効果的だと思います。

私が見た一言で「いいな」と思ったのは、
「買い忘れはございませんか?」でした。
さりげない一言のお陰で、履歴に対しても気持ち悪がること無く、逆に思い出させようとする一言ですよね。

反対に私の場合は、不安と注意を促す一言になっています。
見え見えで嫌われるかもしれませんが(^^;)

☆★ 最短4分で広告を掲載できる『忍者AdMax』

楽天の報酬をアドセンスに奪われないように。

楽天の商品を紹介してるとアドセンスが楽天の広告を表示することが多くなります。

楽天アフィリエイトをしてない方にはいいですが、
楽天アフィリエイトをしてる場合、訪問者が商品リンクをクリックした後で
アドセンスの楽天広告をクリックしてしまうと、クッキーが上書きされてしまい訪問者が購入したとしても、楽天からの成果報酬が得られず、アドセンスからのクリック報酬だけ?となってしまいます。

これを回避するためには、
アドセンス広告の設定から楽天の広告をブロックする必要があります。

アドセンスで楽天をブロックする方法(自己責任で!)

参考

Criteoブロック後もGoogleアドセンスに楽天広告が表示される

Googleアドセンスのページを開きます。
アドセンスページ

1. 広告の許可とブロックタブを開きます。
2. 広告ネットワークをクリック。
3. 検索広告ネットワークCriteoと入力します。
4. 表示されたリストを全てブロック側に設定します。

同じ手順で
アドセンスの設定

次はrakutenと入力して検索結果のリストをブロックします。

広告主のURLタブをクリックして開きます。
アドセンスページ

2. URL欄へ、www.rakuten.co.jp/と入力します。
3. URLをブロックをクリック。

これで現時点での楽天の広告をブロックすることができたと思います。
(配信仲介業者が変更になることもあります)

これらの設定は全て自己責任でお願いします。

以上!お疲れ様でした♪(^^)/

スポンサーリンク

このページをシェアしてくれたら嬉しいな~(*'∀'人)

テスト
おじぎ猫 訪問ありがとうございました。

お知らせ
スパムが多いため、コメントは承認制になっています。
確認次第、承認と返信をいたしますね。(^^)/

My Youtube
石巻貝を助けるコリドラス 石巻貝を助けるコリドラス
morphing morphing
恐竜体操で食べられた!? 恐竜体操で食べられた!?
ゴジラのパロディ ゴジラのパロディ
アナと雪の猫王 アナと雪の猫王
Prince PURI #2 Prince PURI #2
トカゲ酒飲んで変身!! トカゲ酒飲んで変身!!

 15日月末ポイント消滅 !? 確認はこちら 楽天市場

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トップへ戻る