楽天スマホの転換率を上げる方法 – iframeバグで回遊性UP対策
以前の記事でご紹介した、楽天スマホ商品ページでiframeを使ってカスタマイズする裏技。
そのiframeバグを使用して、商品の回遊性＆転換率をUPさせて売上に繋げよう！ってゆうお話です。
以前の記事はこちら↓
ちなみにネットショップ転換率の計算式は・・・
『注文件数÷サイトへのアクセス数＝転換率』
※転換率は、CVR・購買率・成約率とも言われています。
今回は回遊性＆転換率をUPさせるためのiframe部分をサンプルで作成してみました。
サンプルを参考して、自由にカスタマイズしてもらえればと思います。
サンプルページ
※PC用ではなく、スマホ用で作成してます。
設置タグ
以前も書きましたが、スマホ商品ページ内に入れるバグコードは下記になります。
※サンプルページを仮で入れています。
<iframe src="http://maerc.me/demo/recommend_sample.html" width="100%" height="900px" scrolling="No" frameborder="0" =""=""></iframe =""="">
続いて、サンプルで使用した各ソースになります。
HTML
<h2>同じカテゴリの商品</h2> <div class="category_wrapper"> <div id="tab"> <ul id="tab-head"> <li id="tab-h1"><a href="#tab-b1">タイプ.01</a></li> <li id="tab-h2"><a href="#tab-b2">タイプ.02</a></li> <li id="tab-h3"><a href="#tab-b3">タイプ.03</a></li> <!--tab-head--></ul> <div id="tab-body"> <ul class="category"> <div id="tab-b1"> <li><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>タイプ.01</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> <li><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>タイプ.01</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> <li><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>タイプ.01</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> <li><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>タイプ.01</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> <li><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>タイプ.01</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> </div> <div id="tab-b2"> <li><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>タイプ.02</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> <li><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>タイプ.02</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> <li><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>タイプ.02</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> <li><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>タイプ.02</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> <li><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>タイプ.02</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> </div> <div id="tab-b3"> <li><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>タイプ.03</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> <li><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>タイプ.03</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> <li><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>タイプ.03</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> <li><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>タイプ.03</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> <li><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>タイプ.03</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> </div></ul></div></div></div> <div class="c_link"><a href="/" target="_top">☞ テキストテキストテキスト</a></div> <h2>ショップの人気商品ランキング BEST5</h2> <div class="category_wrapper"> <ul class="category"> <li><div class="rank glod">No.1</div><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>テキストテキスト</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> <li><div class="rank silver">No.2</div><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>テキストテキスト</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> <li><div class="rank bronze">No.3</div><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>テキストテキスト</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> <li><div class="rank">No.4</div><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>テキストテキスト</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> <li><div class="rank">No.5</div><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>テキストテキスト</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> </ul></div> <h2>この商品を買った人はこれも</h2> <div class="category_wrapper"> <ul class="category"> <li><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>テキストテキスト</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> <li><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>テキストテキスト</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> <li><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>テキストテキスト</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> <li><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>テキストテキスト</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> <li><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>テキストテキスト</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> <li><a href="/"><img src="http://maerc.me/image/sample-images.jpg" alt="サンプル"><p>テキストテキスト</p><span class="red">送料無料</span><span>3年間保証</span><p class="price">¥99,999</p></a></li> </ul></div>
CSS
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
h2 {line-height: 1;background: #3c3c3c;padding: 14px 12px 14px;color: #fff;font-size: 12px;}
ul{padding-left:0}
a {text-decoration: none;}
.category_wrapper{box-sizing:border-box;position:relative;margin-bottom:0;}
.slick-arrow.slick-next::before,.slick-arrow.slick-prev::before{color:#333}
.category{margin:8px 0}
.category{margin:4px 0 0;list-style:none;overflow-x:scroll;overflow-y:hidden;white-space:nowrap;-webkit-overflow-scrolling:touch}
.category li{width:33.3333333%;margin-right:5px;margin-bottom: 15px;display:inline-block;vertical-align:top;white-space:normal; position: relative;}.category li:first-child{margin-left:7px}
.category li img{width:100%;vertical-align:bottom}
.category li p{font-size: 10px;color: #333;margin: 7px 0 2px 0;}
.category li span{color: #c00000;border: 1px solid #c00000;font-size: 10px;padding: 2px 5px 2px 5px;margin: 0;}
.red{color: #fff!important;background-color: #c00000;}
.c_link{text-align: center;border: 1px solid #3c3c3c;padding: 10px;width: 90%;margin: 0 auto 25px;}
.c_link a{font-size: 14px;color: #717171;font-weight: bold;display: block;}
.rank{font-size: 12px;font-weight: bold;color: #fff; position: absolute; padding: 2px 6px 2px 7px; background-color: #c00000; }
.glod{background-color: #e8ca6b;;}
.silver{background-color: #c2c2c2;}
.bronze{background-color: #9f7142;}
.price{font-weight: bold; color: #c00000!important;font-size: 14px!important; margin: 5px 0 0 0!important;}
#tab-head {overflow: hidden;margin: 0;padding: 0;}
#tab-head li {float: left;width: 29.5%;list-style: none;margin: 0 3px 5px 7px;}
#tab-head li a {display: block;text-align: center;font-size: 10px; padding: 5px; color: #707070;}
#tab-b2,#tab-b3,#tab-b4 {display: none;}
.tab1 {background: #eee; border: 1px solid #ccc;}
.tab2 {background: #fff;border-bottom: 1px solid #fff;}
script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(function(){
$("#tab-head li").addClass("tab1");
$("#tab-head li a").eq(0).addClass("tab2");
$("#tab-head li a").click(function() {
$("#tab-body div").hide();
$($(this).attr("href")).fadeIn();
//$($(this).attr("href")).css('display','block');
$("#tab-head li a").removeClass("tab2");
$(this).addClass("tab2");
return false;
});
});
</script>
参考サイト
最後は実際に商品ページ内にiframeバグを使用している店舗さんのご紹介です。
|
ラグ 洗える ラグマット colette 140×200 北欧 マイクロファイバー 長方形 おしゃれ おすすめ 床暖房 送料無料
|