Notification bar showing on every page

Question

Setting up a privacy policy notification bar and looking to have it displayed only once per user or session and only on the front page or landing page. Right now, it is showing up on every page for every visit.

html

  <span class="banner tracking-banner p-t-1">
    <div class="container">
       <div class="row">
          <div class="col-sm-10 text-left m-b-1">
            This website uses cookies and other 3rd party services to customize and provide you a more personalized experience. To find out more, see our <a href="/privacy/">Privacy Policy</a>.
          </div>
          <div class="col-sm-2 m-b-1">
            <button class="dismiss btn btn-sm btn-block btn-invert">Accept</button>
          </div>
      </div>
    </div>
  </span>

js

$(document).ready(function(){
    $(".banner").fadeIn("slow").append("");
    $(".dismiss").click(function(){
        $(".banner").fadeOut("fast");
    });
})

is there a way to add user or session tracking so that the notification is not showing up on every page every time?

Answer 1

See session storage: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Or local storage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Example:

$(document).ready(function() {
  if (!sessionStorage.getItem('policy')) {
    $(".banner").fadeIn("slow").append("");
    $(".dismiss").click(function() {
      $(".banner").fadeOut("fast");
      sessionStorage.setItem('policy', 'read');
    });
  }
});

Answer 2

Use sessionStorage to temporary save the state of showing alert:

$(document).ready(function(){
 if (sessionStorage.alertshown!="yes"){
    $(".banner").fadeIn("slow").append("");
    $(".dismiss").click(function(){
      $(".banner").fadeOut("fast");
      sessionStorage.alertshown="yes";
   });
 }
})

Answer 3

A couple things to tackle here:

1. Having the pop-up only on the front/landing page is dependent on how you're handling your views for your site.It could be as simple as not including the code for the pop-up on any page other than the landing page. But, solving #2 should really help you in the long run.
2. SessionStorage can be used to set a variable that is checked during the user session. In this case, we can use a simple boolean:

 $(document).ready(function(){ if(!sessionStorage.alertShown) { $(".banner").fadeIn("slow").append(""); $(".dismiss").click(() => $(".banner").fadeOut("fast")); sessionStorage.alertShown = true; //set to true so they aren't shown again } }); 

3. Use a pre-made solution for Cookie Alerts like Cookie Consent that handles it all for you.