Do this after visiting X amount of pages on site

Question

Is there an easy way to track how many pages a user on your site has visited with Javascript (preferably jQuery)?

I need to execute a function after a user has visited more than 5 pages on the site.

I was thinking of storing the window.location.href into a variable and checking it to see if it matches the next page. If it doesn't I would register it as one page change and so on. This sounds theoretically sound to me but please do direct me if I'm on the wrong path.

Answer 1

If you want to track a user across pages on your site you are best to use Cookies. While you don't need jquery for this there is a nice jQuery plugin the helps you manage cookies. (http://code.google.com/p/cookies/wiki/Documentation).

With cookies, on each page you would run JavaScript that would check for the existence of a site cookie. If this doesn't exist you would create it with a value of 1. If it does exist you would increment its value. Then once you see the value is 5 you know they visited 5 pages.

Answer 2

jQuery does not have native cookie functions.

While I completely agree this should be done server-side and would never do this myself... You can do this entirely with plain-old Javascript.

I've put together a function that should suit your purposes. It returns true only if they've visited 6 pages where each page was different than the immediately preceding page.

function mySiteTracker() {
    var pageCounter = readCookie('pageCounter');
    var pageLast = readCookie('pageLast');
    var pageInt = 0;
    if (pageCounter) {
        pageInt = parseInt(pageCounter);
        if (pageInt > 5) return true;
        if (window.location.href == pageLast) return false;
    }
    createCookie('pageCounter',(pageInt + 1));
    createCookie('pageLast',window.location.href);
    return false;
}


//The following 2 functions providing the get/set 
//functionality are MODIFIED from: http://www.quirksmode.org/js/cookies.html

function createCookie(name,value) {
    document.cookie = name+"="+value+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

I didn't specifically test this... let me know if you have any issues.

Answer 3

$(document).ready(
function(){
    if ($.cookie('userViews')) {
        var views = parseInt($.cookie('userViews')) + 1;
    }
    else {
        var views = 1;
    }

    $.cookie('userViews',views,{expires:30});

    if (views > 5) {
        // do whatever you want to do after 5 views.
    }

}
);

The above code works only if the jQuery cookies plug-in is used.

It's worth making the -perhaps obvious- point that any JavaScript based solution is prone to user-interference, scripts can be changed, cookies manipulated, etcetera. If you require this to be at least relatively secure solution¹, then a server-side solution (using whatever server-side scripting language you prefer) is likely to be a better approach.

---

1. Obviously a server-based view-count solution can also be easily gamed, particularly since F5 is so easily available.