Website Knowledge

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