#AD Top Online Web Development & Programming Courses | Udemy
Newsletter Screenshot

Using a cookie to track returning website visitors

Last modified August 2nd 2024 | GitHub Source Code [GitHub] | #js

Cookies are small strings of data stored on your computer that can be accessed by a web browser. Using cookies we can track returning website visitors (from the same browser) which can be useful in a number of ways. For the purposes of this tutorial we’ll be displaying a custom message for returning visitors based on a cookie.

NOTE – Chrome doesn’t store cookies from pages loaded on the local file system (file://). You’ll need to test this code on a server or in another browser like Firefox or Safari.

Let’s get started by creating a new HTML file with the following markup:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>Code language: HTML, XML (xml)

Now for the JavaScript, we need to declare a name for our cookie and then we can call the checkUserCookie function which will check if the returningVisitor cookie already exists:

document.addEventListener("DOMContentLoaded", function () {
  const userCookieName = "returningVisitor";
  checkUserCookie(userCookieName);
});Code language: JavaScript (javascript)

Next comes the checkUserCookie function. If the cookie does exist then we’ll insert some HTML with a custom message otherwise we’ll call a function that creates the cookie:

function checkUserCookie(userCookieName) {
  const cookieExists = document.cookie.match(userCookieName);
  if (cookieExists != null) {
    document.body.insertAdjacentHTML(
      "beforeend",
      '<div id="welcome">Welcome back friend! Check out our latest thing <a href="#">HERE</a></div>'
    );
  } else {
    createUserCookie(userCookieName);
  }
}Code language: JavaScript (javascript)

Lastly the createUserCookie function which creates a new cookie using document.cookie. The cookie value is set to “Yes” but this could be anything as it’s not actually used in this instance, this would be used if you wanted to retrieve a stored value from the cookie. You can also define how long a cookie should last in this case the cookie will expire 7 days after it has been set:

function createUserCookie(userCookieName) {
  const userCookieValue = "Yes";
  const userCookieDays = 7;
  let expiryDate = new Date();
  expiryDate.setDate(expiryDate.getDate() + userCookieDays);
  document.cookie = userCookieName +
    "=" + userCookieValue + "; 
    expires=" + expiryDate.toGMTString() + "path=/";
}Code language: PHP (php)

With the JavaScript complete let’s add some basic CSS for our message:

#welcome {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px 0;
  background: rgb(14, 108, 170);
  color: #fff;
  text-align: center;
}
#welcome a {
  color: #fff;
}Code language: CSS (css)

If you view the HTML page in a browser you should see nothing but a blank page. This is because on the first viewing of the page the cookie doesn’t exist so the new cookie needs to be created. When the page is refreshed the cookie will now be be detected which triggers the custom message to be displayed.

Related Posts

#AD Shop Web Developer T-Shirts