Fire function when a user visits 3 or more pages

Question

I'm trying to figure out how to track how many pages a user vists via cookies. I just want to count how many pages they visit, and on the 3rd page, display a newsletter signup form. This is my current script, which doesn't have any counting mechanism:

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
    var name = cname + "=";
    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);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
}
var hidePopoverCookie = getCookie("hidePopover");
if (hidePopoverCookie == "") { // && pagesVisited > 2
    setTimeout(function() {
        $("#popOver").show();
    }, 5000);
}
$("#popOver button").click(function() {
    $("#popOver").hide();
    setCookie("hidePopover", true, 365);
})

And this is what I'm trying to implement as a page counter:

var pagesVisitedCookie = getCookie("pagesVisited");
if (pagesVisitedCookie === "") {
    console.log ("no pages visited");
    setCookie("pagesVisted", 1, 365);
} else if (pagesVisitedCookie === 1) {
    console.log("2 pages visited");
    setCookie("pagesVisted", 2, 365);
} else if (pagesVisitedCookie > 2) {
    console.log("More than 2 pages visited");
    setCookie("pagesVisted", 3, 365);
}

What happens is it returns "no pages visited" no matter what, and I'm not sure why. I'm very new to cookies, and I'm sure there's a cleaner way to do this, I just want to get it done (this project is making me insane).

All the cool devs use sessionStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage — Josh from Qaribou, Mar 31 '15 at 16:06
Just increment a sessionStorage is clearly the best approach — R3tep, Mar 31 '15 at 16:10
Your `getCookie` function isn't working properly, and [appears to always return `""`](http://jsfiddle.net/7ntfn0hh/). If you want to stick with cookies (in case you need to read it on the server or somesuch) rather than switching to sessionStorage as has been suggested, I suggest you take a look at [this question](http://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie) and reimplement your set/getCookie functions. — James Thorpe, Mar 31 '15 at 16:13

vsync · Accepted Answer · 2015-03-31T20:31:00.807

Since I see you are already using jQuery, I will use it to as the wrapper function of which will trigger than actual logic on DOM loaded event, then you I could use sessionStorage like so:

$(function(){ // fires once a page's DOM is ready
   var visitsCount = JSON.parse(sessionStorage.getItem('visitsCount'));

   if( visitsCount.legnth < 3 && $.inArray( window.location.href, visitsCount ) == -1 ){
       visitsCount.push(window.location.href);
       sessionStorage.setItem('visitsCount', JSON.stringify(visitsCount));
   }

   if( visitsCount.legnth >= 3 ) // user has viewed 3 different pages
      // do whatever
});

The code is storing the current URL of the page in the sessionStorage, if that URL isn't in the stored array already.

score 0 · Answer 2 · answered Mar 31 '15 at 18:40

0

You are setting a cookie named pagesVisted, while you are reading a cookie named pagesVisited.

answered Mar 31 '15 at 18:40

redelschaap

2,774
2
19
32

Fire function when a user visits 3 or more pages

2 Answers2