楽天
楽天お買い物マラソンやスーパーSALEで使えるカウントダウンタイマー【コピペOK!】
2018年10月09日 12:00
こんにちは！社員Aです👩
今回は、楽天の大型イベント（楽天お買い物マラソン・スーパーSALE）などで使えるカウントダウンタイマーの実装方法を紹介します。
HTMLがわからない方でもコピペで実装できますので、ぜひご覧ください！
もくじ
店舗にカウントダウンタイマーを設置するメリット
楽天のイベントは期間内にどれだけ売り切れるかが勝負です。そのために店舗の方はページに様々な仕掛けをすると思いますが、よく使われるのが今回ご紹介するカウントダウンタイマーです。
目の前で限定期間の残り時間がどんどん減っていくカウントダウンタイマーを付けることで、効果的に期間限定をアピールすることができ、ユーザーの購買欲を高めることができます。
特にお買い物マラソンやスーパーSALEなど仕込みを入れているときに、このカウントダウンタイマーを併用することで購買率アップが期待できます。
HTML初心者の方でも簡単に設置できますので、ぜひ活用してみてください。
店舗ページへカウントダウンタイマーを設置する方法
ここからは、楽天の店舗ページにカウントダウンタイマーを設置する方法を説明していきます。
まず前提に、「楽天gold」が使用できる環境であることを確認しましょう。
今回作成するファイルは楽天goldに設置してから読み込みますので、楽天goldが使える段階まで準備しておきましょう。
1.HTMLを作成
下記をそのままコピーアンドペーストし、拡張子をHTMLで保存します。名前は何でも構いませんが、今回は「countdown.html」として保存します。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>カウントダウンタイマー</title>
<script type="text/javascript" src="js/countdown.js"></script>
<style>
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
/*フォントサイズ・カラー*/
body,
html{
margin:0;
}
#CDT{
width:100%;
text-align:center;
font-size:49px; /* カウントダウンタイマーのフォントサイズ */
font-weight:bold;
color:#ce0000; /* カウントダウンタイマーの色 */
font-family: 'Noto Sans JP', sans-serif;
}
.ttl{
color:#ce0000;/* お買い物マラソン終了まで〜の色 */
font-size:28px;/* お買い物マラソン終了まで〜のフォントサイズ */
font-weight:600;
text-align:center;
margin:0;
}
</style>
</head>
<body>
<!-- カウントダウンタイマー設置 -->
<p class="ttl">お買い物マラソン終了まであと</p>
<div id="CDT"></div>
<script language="JavaScript" type="text/javascript">
function CountdownTimer(elm, tl, mes) {
this.initialize.apply(this, arguments);
}
CountdownTimer.prototype = {
initialize: function (elm, tl, mes) {
this.elem = document.getElementById(elm);
this.tl = tl;
this.mes = mes;
}, 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));
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="count_font">' + day + '<font size="5">日</font></span>';
if (hour)
timer += '<span class="count_font">' + hour + '<font size="4">時間</font></span>';
timer += '<span class="count_font">' + this.addZero(min) + '<font size="4">分</font></span><span class="count_font">' + this.addZero(sec) + '<font size="5">秒</font></span><span class="count_font">' + this.addZero(milli) + '</span>';
this.elem.innerHTML = timer;
tid = setTimeout(function () {
me.countDown();
}, 10);
} else {
this.elem.innerHTML = this.mes;
return;
}
}, addZero: function (num) {
return ('0' + num).slice(-2);
}
}
function CDT() {
var tl = new Date('2019/8/21 01:59:00');// ここで日付を指定
var timer = new CountdownTimer('CDT', tl, '終了しました');
timer.countDown();
}
window.onload = function () {
CDT();
}
</script>
</body>
</html>
2.終了日付を変更します
73行目にある「// ここで日付を指定」の部分に、イベントの終了日時を入れてください。
ここに入れた日時に合わせてカウントダウンが始まります。
3.テキストを変更します
- 33行目にある「お買い物マラソン終了まであと」の文言は、イベントに合わせて変更してください。
- 74行目の「終了しました」は、終了したときに出る文言ですので自由に変更してください。
4.上級者編（CSSカスタマイズ）
CSSの知識がある方は、気づいたかもしれませんが14行目〜27行目はカウントダウンタイマーのスタイルを指定しています。
この部分でフォントサイズやカラーなどを自由に変更できます。
5.楽天goldへアップする
ここまで編集ができましたら、楽天goldの任意のフォルダにアップしてください。
直下にアップロードした場合のURLは、下記になります。
https://www.rakuten.ne.jp/gold/店舗名/countdown.html
6.iframeをRMSの好きな場所に貼り付ける
HTMLファイルを楽天goldにアップしましたら、最後にRMS内に貼り付けます。
おすすめは、ヘッダー・フッター・レフトナビのヘッダー部分です。
ヘッダーに設置することで店舗トップページ・商品ページどちらからでもユーザーの目に付きます。
下記を好きな場所に貼り付けてください。
<iframe src="https://www.rakuten.ne.jp/gold/店舗名/countdown.html" width="950" height="120" frameborder="0" scrolling="no"></iframe>
- src=後のURLは、先程アップロードしたgoldのURLに差し替えてください。
- 幅はwidth=の部分で指定できます。店舗ページに合わせて変更してください。
- 高さは基本的にはこのままでお使いいただけます。
7.実装完了
うまく実装できると、下記のような表示になるかと思います。
まとめ
簡単にコピペだけでカウントダウンタイマーが実装できましたね。
一度設置をしておけば、終了後も自動で「終了しました」と文言を出してくれるので慌てて外す必要もありません。
CSSの知識がある方は、是非上記のフォントや色などもイベントに合わせて変更してみてください！
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
