CODEWITHSUNDEEP
javascript
Naemy
Naemy

Reputation: 536

How to detect if it is the first page of my site the user views?

I'd like to perform an animation on my website only if it is the user's first time on the website. I found the "first time visitor" code with localStorage, but I didn't get to find about this.

Upvotes: 7

Views: 17244

Answers (6)

Adjetey Octavius
Adjetey Octavius

Reputation: 51

In my opinion, I think it is best you use a database to track such operations. Using local storage or cookies are browser specific. Ones the user changes his or her browser, the feature has to start again. However with databases, there is a form of persistence. Here is what you can do with database.

  • Create a table called first_timers.
  • Add a column called user_email.
  • Upon logging in a user, check if the user's email is in the table.
  • If Yes then user is not a first timer, if no then user is a first timer. Always add user email to the table upon a successful logging.

Upvotes: 0

Sebastian Pospischil
Sebastian Pospischil

Reputation: 99

I'd do the following. You won't need cookies here. Just check whether the document.referrer includes your domain. If not, the visitor just came to your domain without visiting further pages.

if(document.referrer.indexOf("yourdomain.com")==-1) {
 //first pageview of the session
}

You can also set a cookie in addition, just in case the document.referrer gets lost somewhere.

Upvotes: 9

HaBo
HaBo

Reputation: 14297

I am providing a sample code for @Joseph the Dreamer approach

Create and Store a Cookie

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

Get a Cookie Value

function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1)
  {
  c_start = c_value.indexOf(c_name + "=");
  }
if (c_start == -1)
  {
  c_value = null;
  }
else
  {
  c_start = c_value.indexOf("=", c_start) + 1;
  var c_end = c_value.indexOf(";", c_start);
  if (c_end == -1)
  {
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}

see Cookie with Javascript

Upvotes: 1

user1823761
user1823761

Reputation:

Working FIDDLE Demo

You can use either cookie or localStorage. Consider you have the following HTML code:

<div id="first">
    Welcome Visitor
</div>

<p>This is my website.</p>

We set the display of first element to none. So it will never show.

#first {
    display: none;
}

Then we check for the first time. If it is the first time, we show that element (and maybe do some animation with it):

// this is the first time
if (! localStorage.noFirstVisit) {
    // show the element
    // and do the animation you want
    document.getElementById('first').style.display = 'block';

    // check this flag for escaping this if block next time
    localStorage.noFirstVisit = "1";
}

Upvotes: 10

Brett Weber
Brett Weber

Reputation: 1907

assuming you are meaning first page viewed in this window:

   if (location.referrer == location.href)
   {
      // the page was opened in a new window or tab and accessed directly
   }
   else if (location.referrer.indexOf(location.hostname) == -1) 
   {    
      // The page before this one was not a page on this site
   }

Upvotes: 0

Joseph
Joseph

Reputation: 119847

When the visitor visits your site, set a cookie that indicates that they have. On every page load, check if that cookie exists. If it does, then the user has been to your site before. If it doesn't exist, it's either his first visit... or they have deleted your cookie from their browser.

So if it is my first visit, the cookie shouldn't be there, and you should play the animation.

Upvotes: 2

Related Questions