タイムセールでCV率アップ！楽天スマホのタイマー&お気に入りボタンを設置方法

今年最初の楽天スーパーセール終わりましたね。スーパーセール前に、この記事を書いときたかったですが・・・間に合わなかったです。

楽天スーパーセールやタイムセールなど、いろんなイベントで商品購入の煽りとして大活躍する、「カウントダウンタイマー」+「お気に入りボタン」を楽天スマホページに設置する方法を今回ご紹介ます。

1. 裏ワザ設置タグ
2. script内容
3. 完成イメージ
4. 最後に

裏ワザ設置タグ

まずはスマホの商品ページ別にカウントダウンタイマーとお気に入りボタンが設置されるタグになります。もちろん「スマートフォン用商品説明文」にはiframeは使えないので、scriptのバグを使って挿入しました。


<script src="●●●●" type="text/javascript" charset="UTF-8" =""=""></script 　　　　　　　　　　　　　　　　　　>

●●●●部分に任意のjsのURL入力してください。

script内容

続いて、先ほど入力したjsの中身のサンプルになります。
下記サンプルコード内容の

任意の画像
店舗ID

この2か所を任意で書き換えて下さい。
タイマーの数値はご自由に。


(function() {
	//お気に入り用
	var item_id = document.querySelectorAll('[data-item-id]')[0].getAttribute('data-item-id');
	//スタイル
	var styleElement = document.createElement('style');
	var cssStyle =
	'.timer_favorite { background: #fff24b; display: block; width: calc(100% - 60px); height: auto; padding: 15px; color: #c00000; font-weight: bold; font-size: 14px; line-height: 1em; text-align: center; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 0px #cbb500; }' +
	'.timer_favorite #fb_icon { color: #000; width: 16px; height: 16px; margin-top: 1px !important; margin-right: 5px !important; display: inline-block !important; vertical-align: text-top; }';
	styleElement.innerHTML = cssStyle;
	var bodyElement = document.getElementsByTagName('body')[0];
	bodyElement.appendChild(styleElement);
	//タイマー 
	var div = document.createElement('div');
	div =
	'<img src="任意の画像" style="display: block; margin: 0; width: 100%;"><div id="time_info" style="display: block; width: calc(100% - 20px); height: auto; background: #a40001; color: #fff; text-align: center; font-size: 12px; line-height: 12px; font-weight: bold; padding: 15px 10px 10px;">' +
	'<div style="display: inline-block; vertical-align: bottom; margin-right: 10px;">販売開始まであと</div>' +
	'<div id="timer" style="display: inline-block; vertical-align: bottom; font-size: 18px; line-height: 12px;"></div>' +
	'</div>' +
	'<div style="background: #be1a21; padding-bottom: 20px; margin-bottom: 20px; text-align: center;">' +
	'<div style="color: #fff; font-size: 10px; line-height: 12px; padding: 10px;">買い忘れしないようにお気に入り登録しておくと便利!!</div>' +
	'<a href="https://my.bookmark.rakuten.co.jp/?func=reg&shop_bid=店舗ID&panf=0&tax=0&postage=0&itype=1&svid=101&iid=' + item_id + '" class="timer_favorite" target="_blank">こちらの商品をお気に入り登録する</a>' +
	'</div>';
	var itemDescription = document.getElementById('itemDescription').getElementsByClassName('blockWrap')[0];
	itemDescription.insertAdjacentHTML("beforebegin",div);
})();
function CountdownTimer(elm,tl){
	this.initialize.apply(this,arguments);
}
CountdownTimer.prototype={
	initialize:function(elm,tl) {
		this.elem = document.getElementById(elm);
		this.tl = tl;
	},countDown:function(){
		var timer='';
		var today=new Date();
		var day = Math.floor((this.tl-today)/(24*60*60*1000));
		var hour= Math.floor(((this.tl-today)%(24*60*60*1000))/(60*60*1000));
			if(hour == 0) { hour = '0'; }
		var min = Math.floor(((this.tl-today)%(24*60*60*1000))/(60*1000))%60;
		var sec = Math.floor(((this.tl-today)%(24*60*60*1000))/1000)%60%60;
		var milli = Math.floor(((this.tl-today)%(24*60*60*1000))/10)%100;
		var me = this;
		if( ( this.tl - today ) > 0 ){
				if (day) timer += '<span class="day">'+day+'<span style="font-size: 12px;">日</span></span>';
				if (hour) timer += '<span class="hour">'+hour+'<span style="font-size: 12px;">時間</span></span>';
				timer += '<span class="min">'+this.addZero(min)+'<span style="font-size: 12px;">分</span></span><span class="sec">'+this.addZero(sec)+'<span style="font-size: 12px;">秒</span></span>';
				this.elem.innerHTML = '' + timer;
				tid = setTimeout( function(){me.countDown();},10 );
		}else{
				timer2('2099/12/31 23:59:59'); //販売終了時間
				return;
		}
	},addZero:function(num){ return ('0'+num).slice(-2); }
}
function timer(set_time,set_text){
	var tl = new Date(set_time);
	var timer = new CountdownTimer('timer',tl,set_text);
	timer.countDown();
}
function timer2(set_time,set_text){
	var itemDescription = document.getElementById('time_info');
	var div =
	'<div style="display: inline-block; vertical-align: bottom; margin-right: 10px;">販売終了まであと</div>' +
	'<div id="timer" style="display: inline-block; vertical-align: bottom; font-size: 18px; line-height: 12px;"></div>';
	itemDescription.innerHTML = div;
	var tl = new Date(set_time);
	var timer = new CountdownTimer('timer',tl,set_text);
	timer.countDown();
}
timer('2099/1/1 00:00:00'); //販売開始時間

完成イメージ

デモページ

最後に

いかがでしょうか。今年も楽天ではさまざなイベントが行われると思います。今回の楽天スーパーSALEをはじめ、お買い物マラソン、大感謝祭、ポイントアップ祭などなど、定期的に行われるイベント時に、商品購入の煽りとしてぜひ設置してみはどうでしょうか？販売期間設定してる商品に対してさまざなな使い方ができると思います。ぜひお試しを！