Tracking Visitors with Cookies

Topics Covered in This JavaScript & jQuery Tutorial:

Master essential cookie management techniques including JavaScript API implementation for handling cookies, coding sophisticated cookie logic, clearing and maintaining cookie data, updating cookies with dynamic visit tracking, and seamlessly submitting cookie information with forms for comprehensive user analytics.

Exercise Preview

Exercise Overview

Modern web analytics provide valuable insights, but sophisticated businesses need deeper intelligence. By combining form submissions with JavaScript-powered cookie tracking, you can capture critical user journey data—landing pages, visit frequency, referral sources, and behavioral patterns—that transforms anonymous visitors into actionable customer profiles. This approach creates a comprehensive tracking system that automatically collects and submits user intelligence alongside form data, giving you unprecedented visibility into customer acquisition and engagement patterns.

This tutorial demonstrates how to build a professional-grade visitor tracking system that seamlessly integrates with your existing forms, providing marketing teams and data analysts with the rich insights needed for conversion optimization and customer journey mapping.

Understanding Browser Cookie Limitations

Before diving into implementation, it's crucial to understand how different browsers handle local file cookies. While all modern browsers fully support cookies on live websites, local development environments present unique challenges that can impact your testing workflow.

Common browser-specific issues include:

• Legacy Safari versions on macOS may encounter problems when parent directories contain spaces in their names
• Google Chrome and Microsoft Edge completely disable local cookie functionality for security reasons

Due to these cross-browser inconsistencies, we'll conduct all testing using Firefox, which provides the most reliable local cookie support for development purposes.

Configuring Firefox for Optimal Cookie Handling

Ensuring proper Firefox configuration is essential for reliable cookie functionality during development. Follow these steps to verify optimal settings:

1. Launch Firefox.

2. Windows users only: Press ALT to reveal the menu bar.

3. Navigate to Firefox > Preferences (Mac) or Tools > Options (Windows).

4. Select Privacy & Security from the left sidebar.

5. Under the History section, set Firefox will to Remember history.

6. Close the preferences window.

Setting Up Your Testing Environment

Now let's establish the working environment for our cookie tracking implementation:

1. In Firefox, press Cmd–O (Mac) or CTRL–O (Windows) to access the file browser.

2. Navigate to Desktop > Class Files > yourname-JavaScript jQuery Class > Tracking-Visitors-With-Cookies and select enews.html, then click Open.

3. This newsletter signup page serves as our testing ground for implementing visitor tracking cookies. Keep this page accessible in your browser throughout the development process for real-time testing and validation.

Implementing Professional Cookie Management with JavaScript API

Cookies represent one of the web's most fundamental data persistence mechanisms—small data fragments stored in users' browsers that enable sophisticated user experience personalization. Modern cookie implementations handle user authentication, shopping cart persistence, behavioral tracking, and conversion analytics across millions of websites.

Every cookie contains three critical components:

• A key-value pair storing the actual data payload
• An expiration timestamp defining the cookie's lifespan
• Domain and path specifications controlling where the cookie gets transmitted

For this implementation, we'll leverage js-cookie, a production-ready JavaScript library that simplifies cookie operations while maintaining enterprise-level reliability.

1. Launch your preferred code editor.

2. Close any currently open files to maintain workspace clarity.

3. Open the Tracking-Visitors-With-Cookies directory from Desktop > Class Files > yourname-JavaScript jQuery Class. Most modern editors support directory-level project management for improved workflow efficiency.

   We'll integrate js.cookie.js, a lightweight, dependency-free JavaScript API developed by Klaus Hartl and Fagner Brack. This production-tested library provides reliable cookie management across all major browsers. Access the latest version and comprehensive documentation at GitHub.com/js-cookie/js-cookie.

   By avoiding jQuery dependencies, we maintain optimal performance while ensuring broad compatibility across various development environments.

4. First, we need to establish the script dependency chain. Open enews.html from the Tracking-Visitors-With-Cookies directory.

5. Locate the main.js script tag around line 44 and add the cookie library reference above it:

   <script src="js/vendor/js.cookie.js"></script>
   <script src="js/main.js"></script>

6. Save the file.

7. Open main.js from the js directory within Tracking-Visitors-With-Cookies.

8. Now we'll implement visit tracking functionality. Add this code to create a persistent visit counter:

   window.onload = function() {
      Cookies.set( 'visits', 1, {expires: 1000} );
   };

   The Cookies.set() method, provided by js.cookie.js, creates a cookie named visits with an initial value of 1. The 1000-day expiration ensures long-term visitor tracking across extended periods. Without explicit expiration, cookies automatically expire when users close their browsers.

9. Next, we'll capture the user's entry point—critical data for understanding traffic sources and user journey mapping. Add this enhancement:

   Cookies.set( 'visits', 1, {expires: 1000} );
   Cookies.set( 'entryPage', document.location.href, {expires: 1000} );

10. Temporal data provides valuable insights into user behavior patterns. Let's add first-visit timestamp tracking using JavaScript's built-in Date object:

    Cookies.set( 'visits', 1, {expires: 1000} );
    Cookies.set( 'entryPage', document.location.href, {expires: 1000} );
    Cookies.set( 'entryDateTime', Date(), {expires: 1000} );

    The Date() constructor generates a comprehensive timestamp including timezone information in 24-hour format. While this can be customized for specific presentation needs, the default format provides sufficient detail for most analytics purposes.

11. Understanding traffic sources is crucial for marketing attribution and campaign effectiveness. Add referrer tracking to capture the complete user acquisition picture:

    Cookies.set( 'visits', 1, {expires: 1000} );
    Cookies.set( 'entryPage', document.location.href, {expires: 1000} );
    Cookies.set( 'entryDateTime', Date(), {expires: 1000} );
    Cookies.set( 'cameFrom', document.referrer, {expires: 1000} );

    The document.referrer property contains the URL of the page that directed the user to your site. This field remains empty when users navigate directly via bookmarks or typed URLs, providing valuable insights into organic versus referred traffic patterns.

12. Save your changes.

13. Return to Firefox and reload enews.html. Remember to use Firefox exclusively for local cookie testing to avoid browser compatibility issues.

14. Test the initial implementation by clicking Sign Me Up! without filling out the form.

15. The resulting Thanks for Signing Up page displays your tracked data:
    • Number of Times Visited should show 1
    • Entry Page displays the full URL path
    • Entry Date/Time shows the current timestamp

    Note that Came From appears blank during local testing—this functionality requires live server deployment to capture actual referrer data.

16. Record the timestamp from Entry Date/Time for comparison purposes.

17. Click Go Back to Form (located beside the Clear Cookies button).

18. Submit the form again by clicking Sign Me Up!

19. Notice the timestamp updates—this indicates our cookies are being reset on every page load rather than persisting across visits. Let's implement proper first-visit detection to resolve this issue.

20. Return to main.js in your code editor.

21. Implement conditional cookie creation that only triggers on genuinely new visitors. Add this logic:

    window.onload = function() {
       var v = Cookies.get('visits');
       if ( v == undefined ) {
          Cookies.set( 'visits', 1, {expires: 1000} );
          Cookies.set( 'entryPage', document.location.href, {expires: 1000} );
          Cookies.set( 'entryDateTime', Date(), {expires: 1000} );
          Cookies.set( 'cameFrom', document.referrer, {expires: 1000} );
       }
    };

    We use v as our variable name to avoid conflicts with the existing visits cookie. The Cookies.get() method returns undefined for non-existent cookies, making it perfect for first-visit detection.

22. Save the file.

23. Return to Firefox, reload enews.html, and click Sign Me Up!

    The entry time should reflect your previous test session rather than the current time, indicating that existing cookies are being preserved rather than overwritten. Let's clear our test data to verify the new logic works correctly.

Implementing Professional Cookie Management

Effective development requires robust testing capabilities, including the ability to reset your data environment. Let's build a cookie clearing mechanism that integrates seamlessly with your testing workflow.

1. Switch to your code editor and open thank-you.html from the Tracking-Visitors-With-Cookies directory.

2. We'll implement the Clear Cookies functionality that's already present in the UI. Locate line 66 and add this event handler:

   // Clear Cookies
   document.getElementById('clearCookies').onclick = function() {
   
   };

3. Add the cookie removal logic to systematically clear all tracking data:

   // Clear Cookies
   document.getElementById('clearCookies').onclick = function() {
      Cookies.remove('visits');
      Cookies.remove('entryPage');
      Cookies.remove('entryDateTime');
      Cookies.remove('cameFrom');
      Cookies.remove('currentlyHere');
   };

4. For development verification, let's add console logging to confirm successful cookie removal:

   document.getElementById('clearCookies').onclick = function() {
      Cookies.remove('visits');
      Cookies.remove('entryPage');
      Cookies.remove('entryDateTime');
      Cookies.remove('cameFrom');
      Cookies.remove('currentlyHere');
   
      console.log( 
         Cookies.get('visits'), 
         Cookies.get('entryPage'), 
         Cookies.get('entryDateTime'), 
         Cookies.get('cameFrom'), 
         Cookies.get('currentlyHere') 
      );
   };

5. Save your changes.

6. Return to Firefox, reload enews.html, and submit the form.

7. Access the browser's developer tools by CTRL–clicking (Mac) or right-clicking (Windows) and selecting Inspect Element.

8. Navigate to the Console tab in the Web Developer Tools panel.

9. Click the Clear Cookies button on the page.

10. The console should display five undefined values, confirming successful cookie removal.

11. Close the Developer Tools panel.

12. Click Go Back to Form and resubmit to verify that fresh cookies are created with current timestamps.

13. Test persistence by submitting the form multiple times—the timestamp should remain unchanged, confirming our first-visit logic works correctly.

Building Sophisticated Visit Tracking: Incrementing Visit Counters

Simple visit counting provides limited value—professional analytics require accurate session-based visit tracking that distinguishes between genuine return visits and same-session page reloads. Let's implement intelligent visit incrementing.

1. Our current system locks the visits counter at 1. For meaningful analytics, we need to increment this value for each genuine return visit. Return to main.js in your code editor.

2. Enhance the visit tracking logic with increment functionality:

   window.onload = function() {
      var v = Cookies.get('visits');
      if ( v == undefined ) {

   Code Omitted To Save Space

   }
      else {
         v++;
         Cookies.set( 'visits', v, {expires: 1000} );
      }
   };

   The v++ operator performs efficient increment operations, while the subsequent Cookies.set() call persists the updated value with the same long-term expiration.

3. Save your changes.

4. Navigate to the thank-you page in Firefox and return to the form.

5. Submit the form multiple times and observe the Number of Times Visited increasing with each submission.

   However, this implementation has a critical flaw—it increments on every page load rather than genuine sessions. Professional analytics require session-based tracking that increments only when users return after browser closure or extended absence.

6. Return to main.js to implement session-aware visit tracking.

7. Add a session detection cookie that expires when the browser session ends:

   else {
         v++;
         Cookies.set( 'visits', v, {expires: 1000} );
      }
      Cookies.set( 'currentlyHere', 'true' );
   };

8. Modify the visit increment logic to check for existing sessions before incrementing:

   window.onload = function() {
      var v = Cookies.get('visits');
      var c = Cookies.get('currentlyHere');
      if ( v == undefined ) {

   Code Omitted To Save Space

   }
      else if ( c == undefined ) {
         v++;
         Cookies.set( 'visits', v, {expires: 1000} );
      }
      Cookies.set( 'currentlyHere', 'true' );
   };

9. Save your changes.

10. Test the session-based tracking in Firefox:

    • Submit the form multiple times—the visit counter should remain stable
    • Note the current visit count, then completely quit Firefox
    • Relaunch Firefox, preview enews.html, and submit the form
    • Verify that the visit count has increased by exactly one, confirming session-based tracking

Advanced Integration: Submitting Cookie Data with Forms

Client-side cookies provide valuable user insights, but their true power emerges when integrated with server-side processing. By automatically submitting cookie data alongside form submissions, you create comprehensive user profiles that inform marketing strategies, conversion optimization, and customer journey analysis.

This integration occurs through hidden form fields that capture cookie values at submission time, ensuring that your visitor intelligence reaches your analytics systems and customer databases.

1. Return to your code editor and open enews.html.

2. We need hidden form inputs for each tracked cookie. For efficiency, open hidden-inputs.html from the snippets directory.

3. Copy all the provided code.

4. Switch back to enews.html.

5. Locate the submit button around line 35.

6. Paste the copied code immediately below the submit button:

   <input id="submit" type="submit" name="submit" value="Sign Me Up!">
   
   <input type="text" name="visits" id="visits">
   <input type="text" name="entryPage" id="entryPage">
   <input type="text" name="entryDateTime" id="entryDateTime">
   <input type="text" name="cameFrom" id="cameFrom">

   Note that we're using text inputs temporarily for development visibility. Once testing is complete, we'll convert these to hidden inputs for production deployment.

7. Now we need JavaScript to populate these form fields with cookie values. Add this code before the closing </body> tag:

   <script>