ユーザーごとにページ移動した回数をカウントしたい

Question

前提・実現したいこと

サイトの下部に広告のような×ボタンで消せるバナーを表示させ、
バナーを非表示にしてから「5回ページ移動した場合」また表示させる。
という仕様を頂いています。

ですがページ移動をした回数を取得する方法が判らず困っています。
cookieで取得できるのでは？という方向でいろいろ調べていますが解決出来ません。

試したこと

現状「jQuery.cookie.js」を使い当日の初回訪問の場合のみ表示させる動きは出来ています。

該当のソースコード

以下はcookieで「当日の初回訪問の場合のみ表示」しています。
ここを一部変更して出来ればとても助かります。
そもそもcookieではできないのであれば他の方法も教えて頂きたいです。

<script src="jquery.min.js"></script>
<script src="jquery.cookie.js"></script>

<script>
	$(function () {
		if ($.cookie('bnrRead') != 'on') {
			$('#main').append('<div id="bnr"><p>次回以降は表示させないように出来る要素</p><button id="btn">次回以降は表示させない</button></div>');
		}
		//隠すボタンをクリックしたらバナーを隠す
		$('#btn').click(function () {
			$('#bnr').hide();
			$.cookie('bnrRead', 'on', {
				expires: 7, //cookieの有効日数
				path: '/'
			});
		});
		//cookieを削除する
		$('#del').click(function () {
			$.removeCookie('bnrRead', {
				path: '/'
			});
		});
	});
</script>

<div id="main">
	<button id="del">このサイトのcookieを消す</button>
</div>

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[kei344]

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、何をどう試されたのでしょうか。

[moooooo]

5年も間が空いてしまいました...大変申し訳ありません。
当時やりたかったことは別の制作者へ依頼をし、最終的には実装が見送られました。
次の対応へ移り、こちらの質問が放置という形になってしまっており...本当に失礼いたしました。
課題として個人的にテスト実装して自己解決を試みてみようと思います。

Answer 1

5年間の知識を使って動くものを作成できました。（cookieではなくsessionStorageを使用）
ただ、そもそも５回訪れた後(もしくはリロードした後)に表示させる意味ってあるのか？とは思います。。。
リアクションしてくださったお２方ありがとうございました！

<script>
	$(document).ready(function () {
		var banner = $('#banner');
		var closeBtn = banner.find('.close-btn');

		if (!sessionStorage.getItem('bannerClosed')) {
			banner.show();
		}

		closeBtn.click(function () {
			banner.hide();
			sessionStorage.setItem('bannerClosed', 'true');
		});

		var visits = sessionStorage.getItem('visits');
		visits = visits ? parseInt(visits) : 0;

		if (visits >= 5) {
			sessionStorage.removeItem('bannerClosed');
			sessionStorage.setItem('visits', 0);
		} else {
			sessionStorage.setItem('visits', visits + 1);
		}
	});
</script>
<div id="banner" class="banner">
	<span class="close-btn">X</span>
	<p>バナー</p>
</div>

Answer 2

$.cookie('bnrRead', 'on', { //cookieにbnrReadという名前でonという値をセット

↑単なる「ON」「OFF」だけでなく、表示回数もセットしていけばいいのでは？
で、「ON」の時は無条件表示、「OFF」にされたら表示回数リセット、表示回数が5回になったら、表示回数のカウンタを0に戻して、強制的に「ON」にする、とか。

Comments

[moooooo]

回答ありがとうございます。間が開いてしまい申し訳ありません。

表示回数をリセットする為には回数をカウントする必要がありますよね
そのカウント方法がわからない状況です。
取得する為のライブラリがあるのか、別の方法でできるのか(ループ処理をしてカウントするとか...でもそれだと別のページに行くたびリセットされてしまいますよね)

納期にはもう間に合いませんが(初回訪問時のみ表示で初稿に出します)
再現出来るやり方を調べてみます。
お時間がある際にまたご協力頂けると幸いです。