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();
}
}
}
});
</script>