[購買率UP]イベント開始・終了までをカウントダウン表示するJavascript

公開日：  最終更新日：2021/11/30

おもわず買いたくなっちゃうかも[購買率UP]イベント開始、終了までをカウントダウン表示するJavascript
こんばんは、先日に引き続き、イベント時に使えるJavascriptの紹介になります。
ネットショップ等でイベントを開催中に残り時間をカウントダウン表示することで購入を促すことが期待できます。あまり、やりすぎるとしつこくなる感じがしますが、使いすぎには注意が必要です。単純なカウントダウンであれば、探せばコピペで利用できるものが見つかるかると思います。そこで、少し改良を加えたサンプルを作成してみました。

・最初にイベント開始日時、終了日時を指定することで
イベント開始前は、開始までのカウントダウンを表示
イベント開催中は、終了までのカウントダウンを表示
とイベント前から1度設定してしまえば、イベントが終了するまで使える仕組みです。

ぜひ、次回イベント時に活用してもらえたらと思います。

Javascriptを使ってカウントダウン表示の実装について

カウントダウンの表示
ネットショップで期間限定のイベント等で購買率を上げるのに設置されているのを見たことがあるかと思います。

サンプル１ （↓↓↓こんな感じの）

上のサンプルはぷらすぶろぐ
コピペでサクッと導入できるライブラリ非依存のJavascriptカウントダウンを参考にさせて頂きました。

サンプル１のソース

<style type="text/css">
body{
    overflow: hidden;
}
*{
  margin: 0;
    padding: 0;
}
#CDT{
 width:100%;
 font-weight: bold;
 text-align: center;
 padding: 5px 0px;
 background-color: #000000;
}
#CDT p{
 margin-bottom: 5px;
 color:#ffffff;
}
#CDT_sat{
 margin-bottom: 5px;
 width:100%;
 text-align: center;
}
#CDT_sat .day{
 font-size: 14px;
 color: #ffffff
}
#CDT_sat .hour{
 font-size: 14px;
 color: #ffffff
}
#CDT_sat .min{
 font-size: 14px;
 color: #ffffff
}
#CDT_sat .sec{
 font-size: 14px;
 color: #ffffff
}
#CDT_sat .milli{
 font-size: 14px;
 color: #ffffff
}
</style>
 
<div id="CDT">
<p>終了まで残り</p>
 
<div id="CDT_sat"></div>
 
</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="day">'+day+'日</span>';
   if (hour) timer += '<span class="hour">'+hour+'時間</span>';
   timer += '<span class="min">'+this.addZero(min)+'分</span><span class="sec">'+this.addZero(sec)+'秒</span><span class="milli">'+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_sat(){
 var tl = new Date('2020/01/01 00:00:00');
 var timer = new CountdownTimer('CDT_sat',tl,'終了しました');
 timer.countDown();
}
CDT_sat();
</script>

使い方としては、８６行目に終了日時を指定するだけです。
見た目の調整方法としては、＜style＞内の「.day」「.hour」「.min」「.sec」「.milli」部分で文字サイズ、色等を個別に指定する形になります。

上記のままでも十分に便利なのですが、本日はネットショップ向けに改良してみたので紹介したいと思います。

カウントダウン表示javascriptの改良点について

定期的に開催される楽天のイベントを例に考えてみます。

「お買い物マラソン ◯月◯日 ◯時◯分 ～ ■月■日 ■時間■分 」
のようなイベントで利用すると考えた場合

・イベント開始前には、◯月◯日 ◯時◯分から開始予定 とアナウンス
・イベント中は、サンプル１のようなカウントダウンを表示
・イベント終了後は、終了しましたとアナウンス、
またはカウントダウンの削除して内容変更

上記のような更新が必要になりそうですね。
結構更新が手間に感じますねー。

イベント開始の暫く前から１回設定するだけでイベント終了後も次回イベントまでソース変更なしに出来るのが理想ですよね。

改良機能について

①イベント開始日時の指定
②開始前の表示内容指定（開始までのカウントダウン表示 あり/なし）
③イベント中の終了までのカウントダウン表示＋表示内容指定
➃終了後の表示内容指定（通常時の表示内容指定）
上記の機能を追加してみました。

サンプルソース２

<style type="text/css">
body{
    overflow: hidden;
}
*{
  margin: 0;
    padding: 0;
}
#CDT{
 width:100%;
 font-weight: bold;
 text-align: center;
 padding: 5px 0px;
 background-color: #000000;
}
#CDT p{
 margin-bottom: 5px;
 color:#ffffff;
}
#CDT_sat{
 margin-bottom: 5px;
 width:100%;
 text-align: center;
}
#CDT_sat .day{
 font-size: 14px;
 color: #ffffff
}
#CDT_sat .hour{
 font-size: 14px;
 color: #ffffff
}
#CDT_sat .min{
 font-size: 14px;
 color: #ffffff
}
#CDT_sat .sec{
 font-size: 14px;
 color: #ffffff
}
#CDT_sat .milli{
 font-size: 14px;
 color: #ffffff
}
</style>
 
<div id="CDT">
<p id="msg_start" style="display:none;">
  開始前のメッセージ
</p>
<p id="msg_onevent" style="display:none;">
  イベント中のメッセージ
</p>
<p id="msg_end" style="display:none;">
  イベント終了後のメッセージ
</p>
<div id="CDT_sat"></div>
 
</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="day">'+day+'日</span>';
   if (hour) timer += '<span class="hour">'+hour+'時間</span>';
     timer += '<span class="min">'+this.addZero(min)+'分</span>';
     timer += '<span class="sec">'+this.addZero(sec)+'秒</span>';
     timer += '<span class="milli">'+this.addZero(milli)+'</span>';
     this.elem.innerHTML = timer;
     tid = setTimeout( function(){me.countDown();},10 );
  }else{
    document.getElementById("msg_onevent").style.display="none"; 
      document.getElementById("msg_end").style.display="block";  
   return;
  }
 },addZero:function(num){ return ('0'+num).slice(-2); }
}
function CDT_sat(){
 //tlstart：カウントダウン開始日時を設定
 var tlstart = new Date('2018/04/30 21:00:00');
 
 //tlstart_countdown：0 or 1 (0 開始までカウントダウンなし   1 カウントダウンあり   
 var tlstart_countdown=1;
 
 //tl：カウントダウン終了日時を設定       
 var tl = new Date('2013/07/09 18:05:00');
  
  var today=new Date();
  if(tlstart<today){
    var timer = new CountdownTimer('CDT_sat',tl,'');
      document.getElementById("msg_onevent").style.display="block";
  }else{
   document.getElementById("msg_start").style.display="block";
   if(tlstart_countdown==1){
         var timer = new CountdownTimer('CDT_sat',tlstart,'');
     }else{
        return;
   }  
  }
 timer.countDown();
}
CDT_sat();
</script>

イベントに合わせた指定項目は
９９行目に開始日時を指定
１０２行目で開始までのカウントダウンあり/なしを指定
１０５行目にイベント終了日時を指定

４８行目から５６行目でそれぞれの表示内容を設定
＜p id=”msg_start” style=”display:none;”＞
開始前のメッセージ
＜/p＞
＜p id=”msg_onevent” style=”display:none;”＞
イベント中のメッセージ
＜/p＞
＜p id=”msg_end” style=”display:none;”＞
イベント終了後のメッセージ
＜/p＞

このサンプルでは＜p＞を使っていますが、id=””の部分を
「msg_start」「msg_onevent」「msg_end」を指定すれば
＜div＞タグなどの他のタグでも問題ありません。
イベントバナーを貼り付けても良いですし、終了後（通常時）は
別のバナーでも商品画像でも良いかもしれません。

msg_start：開始前に表示する内容
msg_onevent：イベント中に表示する内容
msg_end：イベント終了後（通常時）に表示する内容

「イベント開始まで」
カウントダウンあり
41-2.png

「イベント終了まで」
イベントのバナー表示など
41-1.png

「イベント終了しました」
「通常時の内容」バナー、商品画像など
41-3.png

をそれぞれ指定することができます。
５７行目の＜div id=”CDT_sat”＞＜/div＞の部分にカウントダウンが表示されます。見た目、レイアウトなどを調整する場合は、＜style＞部分を調整してみてください。

楽天の定期的なイベントもありますが、ショップ独自に開催しているタイムセールなどにも使えそうな気がします。

先日、紹介した

ネットショップ運営の気になる備忘録
 
バナー画像などを期間指定で表示するjavascript

と組み合わせて使うのも良いかもしれません。ぜひ、活用してみてください。




Your Message

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

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

PREV：
バナー画像などを期間指定で表示するjavascript
NEXT：
ショップページの配色をチェック出来るWebサービス「Colours」
Home > javascript > [購買率UP]イベント開始・終了までをカウントダウン表示するJavascript
スポンサードリンク

最新記事

HTML秒数指定で別ページへリダイレクトさせる方法
HTML秒数指定で別ページへリダイレクトさせる方法
越境ECにShopify無料ツール(QRコード/バーコード/ロゴ作成)が便利
越境ECにShopify無料ツール(QRコード/バーコード/ロゴ作成)が便利
ブラウザ操作自動化できるiMacrosを使ってメルカリの出品作業を時短する方法
ブラウザ操作自動化できるiMacrosを使ってメルカリの出品作業を時短する方法
越境ECに強い海外発のShopifyでネットショップ開業
越境ECに強い海外発のShopifyでネットショップ開業
ネットショップで安心して購入できる決済方法「後払い決済」
ネットショップで安心して購入できる決済方法「後払い決済」

記事が気に入ったらシェアお願いします

PAGE TOP ↑