Recently I worked on a website which required that a particular section of the website should show a popup to the visitor after they have been browsing the section for a minute. This popup should only show at certain times and once it has been show to the visitor it should not pop-up again during that session. So to put it all together clearly, it had the following requirements:
1. Pop-up should show after a visitor has been browsing for a minute.
2. It should only show in a certain section of the website (multiple pages).
3. Once shown it should not pop-up during that session.
4. It should only show during certain hours of the day (US Time).
So because the pop-up needs to show on mulitple pages I needed a way to store the visitor’s time when they first hit any of the pages of that certain section. For this purpose I used a cookie. So the idea was that once the visitor lands on one of the pages, it will store the time in a cookie. Then I would check every 5 secs if the visitor has been there for a minute. If yes, I will show the pop-up. Once the pop is shown I will store another cookie that the pop up has been shown so don't show it again.
Hopefully you are familiar with Jquery, if not, it is just a library of javascript that makes writing javascript easier. You can read more here. I used the Jquery cookie plugin. I wanted the pop-pop to look cool so I used Jquery Fancybox plugin. For cookies I used the Jquery Cookie plugin, it makes using the cookies even simpler, see here.
<script type="text/javascript"> $(document).ready({ var CurrentDate = new Date(); //I converted the date to universal time becasue the visitors will come from all different time zones. Remember we need to show the pop up only during certain hours. CurrenHour = CurrentDate.getUTCHours();
So my client’s requirement was the pop up should not show during 02:00 and 08:00 UTC hours. So I checked for the condition as follows:
if(!(CurrentHour>=2 && CurrentHour<=8)){ //Checking if the cookie exists already if(SearchCookie == null || SearchCookie ==""){ //Store time in cookie var VisitDate = new Date(); var VisitTime = VisitDate.getTime(); $.cookie('SearchCookie',VisitTime) timeout('ShowPop()',60000) }
So if the pop already exists then the code below will run
function ShowPop(){ .("popup-link").click{ var VisitDate= new Date(); var CurrentTime = VisitDate.getTime(); } } } }); </script>
So the above code first checks if the time is not between UTC hours of 2-8 it runs the code, and in the code I check if the cookie exists already because there is a possiblity that the user has already seen the popup or the user was on a different page of that section of the website, and so the time has already been stored in the cookie. Below is all the javascript code:
<script type="text/javascript"> $(document).ready({ var CurrentDate = new Date(); CurrenHour = CurrentDate.getUTCHours(); if(!(CurrentHour>=2 && CurrentHour<=8)){ //Checking if the cookie exists already if(SearchCookie == null || SearchCookie ==""){ //Store time in cookie var VisitDate = new Date(); var VisitTime = VisitDate.getTime(); $.cookie('SearchCookie',VisitTime) timeout('ShowPop()',60000) } function ShowPop(){ .("popup-link").click{ var VisitDate= new Date(); var CurrentTime = VisitDate.getTime(); } } } });
f64c26d5-ccdb-435b-8445-042aad82695c|1|2.0|96d5b379-7e1d-4dac-a6ba-1e50db561b04