EC運営ヒント

楽天市場店で商品ページの下部にスライドで現れるバナーを設置する方法

更新日:

[`evernote` not found]
LINEで送る

こんにちは!きたむです!

今回は店舗の商品ページにアクセスしてページが表示された1秒後に、ページの下から現れる追従バナーの設置方法です。

「それなら最初から表示させてればいいじゃん」と思う方もいると思われますが、あえて最初非表示にし、動きをつけてバナーを表示することで、お客様は「何か現れた!?」と、バナーに意識が行きます。

最初からあるだけでは、そのままバナーを意識することなく、そのまま見過ごしてしまうこともあるかもしれません。
動きをつけることで、よりお客様にバナーの存在をアピールし、ページの回遊率を向上させることができるのです。

というわけで、バナーに動きをつける理由がわかったところで、早速設置の方法をご紹介したいと思います。

例:

開いたばかりの商品ページ
バナーが出現した商品ページ

設置する方法

設置はiframeを使用します。
iframeをページ下部にfixedで表示をさせて、iframeの中でバナーが現れる仕様にします。
そのためバナーにつけるリンクには必ず「target」で「_blank」か「_parent」の指定をしてください。

GOLDサーバーで準備するファイル

【1】iframeの準備
下記のhtmlを作成し、「リンクURL」にバナーのリンク先のURLを、「画像パス」にバナーの画像を入れていただいて保存し、goldサーバーの任意の場所にアップしてください。
ファイル名は任意で問題ありません。
今回はファイル名は「bottom-bar-fixed.html」にします。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://www.rakuten.ne.jp/gold/店舗ID/任意のディレクトリ/bottom-bnr-fixed.css">
    <script type="text/javascript" src="https://www.rakuten.ne.jp/gold/店舗ID/任意のディレクトリ/jquery.min.js"></script>

</head>

<body>
    <!--▼バナー▼-->
    <div class="bnr">
        <a href="リンクURL" target="_parent"><img src="画像パス" /></a>
    </div>
    <!--▲バナー▲-->

    <script type="text/javascript" src="https://www.rakuten.ne.jp/gold/店舗ID/任意のディレクトリ/bottom-bnr-fixed.js"></script>
</body>

</html>

【2】javascriptの準備
下記のjavascriptをGOLDサーバーの任意の場所にアップします。
javascriptのファイル名は「bottom-bar-fixed.js」にしてください。

また、jqueryを任意のディレクトリに保存してください。
ここでは「jquery.min.js」というファイル名で保存します。

var bnrBtn = $('.bnr');

//まず固定バナーを開く
$(function () {
    setTimeout('openBnr()', 1000)
});

$(function () {
    //時間処理セット
    var timerID = setTimeout('closeBnr()', 7500);
    //マウスオーバー処理
    bnrBtn.hover(
        //マウスオーバー時は停止
        function () {
            clearTimeout(timerID);
            $("a", this).css({
                'color': '#fff'
            })
        },
        //マウスアウトしたら再開
        function () {
            timerID = setTimeout('closeBnr()', 3200);
            /*$(this).css({'background':'url(lib/common/salmon-bg-noise.png)'});*/
            $("a", this).css({
                'color': '#fff'
            })
        }
    )
});


////関数
//固定バナーを開く
function openBnr() {
    bnrBtn.stop().animate({
        'bottom': '0px'
    }, 400);
};
//固定バナーをしまう
/*function closeBnr() {
     bnrBtn.stop().animate({'bottom' : '-100px'}, 400);
};*/

※「//固定バナーをしまう」の下の関数を「/**/」でコメントアウトしていますが、こちらを外すと、固定バナーが出現して、しばらくしてから消える仕様に変更できます。

【3】cssの準備
下記のcssをGOLDサーバーの任意の場所にアップ。
cssのファイル名は「sp_cts.css」にしてください。

.bnr {
    position: fixed;
    left: 0;
    bottom: -100px;
    font-size: 20px;
    width: 100%;
    height: 80px;
    cursor: pointer;
    text-align: center;
    line-height: 100px;
}

.bnr a {
    display: block;
    width: 100%;
    height: 100%;
    color: #FFFFFF;
    font-weight: bold;
}

楽天RMSのにソースを設置

【1】楽天RMSにログインし、「1-2デザイン設定」から「1.PC デザイン設定」の「共通テンプレート設定」>「ヘッダー・フッター・レフトナビ」へと進みます。
「ヘッダー・フッター・レフトナビ」の画面で新しくテンプレートを作成する場合は「①」で新規作成をするか、または「③」で既存のものをコピーする。
現状のテンプレートを使用する場合は「②」で既存のものを編集する。


【2】テンプレートにバナーを表示させるための「【1】iframeの準備」で作成したiframeを赤枠の欄に設置します。
heightは画像の高さに合わせてください。

<iframe src="https://www.rakuten.ne.jp/gold/店舗ID/任意のディレクトリ/bottom-bnr-fixed.html" frameborder="0" width="100%" height="80" style="position:fixed; left:0; bottom:0; z-index:99999999"></iframe>

イメージ:

同じバナーでも一工夫を加えることで、売上アップにつなげることができます。
ちょっとした工夫で他店と差をつけるための一つの方法として、ぜひ今回ご紹介したバナーを試してみてください。

関連ニュース

[`evernote` not found]
LINEで送る

-EC運営ヒント

Copyright© EC grow | EC関連のニュースメディアサイト , 2017 All Rights Reserved.