jQuery Cookieで表示回数制限

実現したい事

jquery.cookie.jsを使って、
キャンペーンバナーの表示を実装したいのですが、
下記の条件があり、
【実装内容】
1.一度クリックしたら【1時間】表示させない
2.×押したら【0.5時間】表示させない
3.セッションに関係なく【1日5回】まで表示

3は記述したコードで実装ができましたが、
3を含めて、1,2も行いたく、ご教示頂けると幸いです。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="UTF-8">
5	<title>キャンペーンバナー</title>
6	<script src="//code.jquery.com/jquery-1.12.4.js"></script>
7	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
8</head>
9<body>
10	<div class="bnr">
11	  <div class="bnr__wrap">
12	    <p class="bnr__close"><a href="javascript:void(0)">X</a></p><a class="bnr__link" href="#">表示バナー</a>
13	  </div>
14	</div>
15	<style>
16	  .bnr {
17	    position: fixed;
18	    bottom: 40px;
19	    left: 30px;
20	    z-index: 10000;
21	  }
22	  .bnr__link{
23	  	width: 100px;
24	  	height: 100px;
25	  	background-color: #ccc;
26	  	display: block;
27	  	text-indent: -9999px;
28	  }
29
30	</style>
31
32	<script type="text/javascript">
33		$(function () {
34		  
35		  //click
36		  $(".bnr__link").click(function(){
37		    $(".bnr").fadeOut();
38		  });
39		  
40		  var $cookie = $.cookie( 'campaign' );
41		  if( $cookie != undefined ){
42		    var count = $cookie++;
43		    if(count >= 4 ){
44		      $(".bnr").css("display","none");
45		    }
46		  }else{
47		    $cookie = 1;
48		    $(".bnr").css("display","block");
49		  }
50		  console.log($cookie);
51		  $.cookie( 'campaign', $cookie, { 
52		    expires: 1,
53		    path: "/"
54		  });
55
56		});
57	</script>
58</body>
59</html>

行動規範の内容に同意します

回答1件

ベストアンサー

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>キャンペーンバナー</title>
6    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
7    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
8</head>
9<body>
10    <div class="bnr">
11      <div class="bnr__wrap">
12        <p class="bnr__close">
13        	<a id="close" href="javascript:void(0)">X</a>
14        	</p>
15        	<a id="banner" class="bnr__link" href="#">表示バナー</a>
16      </div>
17    </div>
18</body>
19</html>

CSS
1      .bnr {
2        position: fixed;
3        bottom: 40px;
4        left: 30px;
5        z-index: 10000;
6      }
7      .bnr__link{
8          width: 100px;
9          height: 100px;
10          background-color: #ccc;
11          display: block;
12          text-indent: -9999px;
13      }

javascript
1	$(function () {
2
3		var nextShowTime = $.cookie('nextshowtime');
4		nextShowTime = (nextShowTime) ? new Date(nextShowTime) : new Date();
5		var lastShowDate = $.cookie('lastshowdate');
6		lastShowDate = (lastShowDate) ? new Date(lastShowDate) : new Date();
7		lastShowDate = new Date(lastShowDate.getFullYear(), lastShowDate.getMonth(), lastShowDate.getDate());
8		var showCount = $.cookie('showcount');
9		showCount = (showCount) ? Number(showCount) : 0;
10
11		var now = new Date();
12
13		if (now >= nextShowTim){
14			// 表示可能時間を過ぎていたら
15			if (now.toDateString() == lastShowDate.toDateString()){
16				// 同一日の場合
17				if(showCount < 5){
18					// 3.セッションに関係なく【1日5回】まで表示
19					$(".bnr").css("display","block");
20					showCount ++;
21				}else{
22					// 5回以上の場合
23					$(".bnr").css("display","none");
24				}
25			}else{
26				// 同一日ではない場合
27				$(".bnr").css("display","block");
28				showCount ++;
29			}
30		}else{
31			// まだ表示不可時間
32			$(".bnr").css("display","none");
33		}
34		// クッキー書込み
35		$.cookie("lastshowdate", (lastShowDate) ? lastShowDate.toLocaleString('ja') : '', { expires: 1, path: "/", secure: true });
36		$.cookie("showcount", showCount, { expires: 1, path: "/", secure: true });
37
38		// バナークリック時
39		$("#banner").click(function(){
40			$(".bnr").fadeOut();
41			// 1.一度クリックしたら【1時間】表示させない
42			nextShowTime  = new Date();
43			nextShowTime.setMinutes(nextShowTime.getMinutes() + 60);
44			$.cookie("nextshowtime", nextShowTime.toLocaleString('ja'), { expires: 1, path: "/", secure: true });
45		});
46
47		// ×クリック時
48		$("#close").click(function(){
49			$(".bnr").fadeOut();
50			// 2.×押したら【0.5時間】表示させない
51			nextShowTime  = new Date();
52			nextShowTime.setMinutes(nextShowTime.getMinutes() + 30);
53			$.cookie("nextshowtime", nextShowTime.toLocaleString('ja'), { expires: 1, path: "/", secure: true });
54		});
55
56	});
57

投稿2020/09/25 22:51

編集2020/09/26 00:29

kuma_kuma_

総合スコア2506

kimisuke553

2020/09/26 00:24

有難うございます！とても参考になります！すみません、サーバー上で試してみたところ、クッキーに値が入らず、 2行目の「nextShowTim」になっているところを「nextShowTime」に書き換えてみましたが、同じく値が入らず、クリック後やセッションを5日以上やっても表示されてしまいました。「nextShowTim」の名前は関係なさそうですか？

kuma_kuma_

2020/09/26 00:32

> 2行目の「nextShowTim」になっているところを「nextShowTime」に書き換えてみましたが、失礼しましたコピペミスでした。クッキーに値が入らない理由はパスだと思います各所にある { expires: 1, path: "/", secure: true } のパスを変更してみて下さい。

kimisuke553

2020/09/26 00:51 編集

早速の返答有難うございます！コピペミス全然問題ありません。 >のパスを変更してみて下さい。調査不足ですみません。たとえば、http://example.com/popup.html の場合はpath: "/"はどのような指定が正しいでしょうか？

kimisuke553

2020/09/26 00:54

すみません！secureをfalseにしたら問題なく実装できました！とてもよいコード有難うございます！自分でも見返して色々試してみます！

kuma_kuma_

2020/09/26 00:59

おっとhttpだったんですか secureはhttpsの時のみtrueですね。

行動規範の内容に同意します