CODEWITHSUNDEEP
javascriptjquery
Andre Bulatov
Andre Bulatov

Reputation: 1139

Is it possible to use JavaScript to track how many page views in past 24 hours?

I need to track how many users have visited some page in the past 24 hours, and if the number of users goes over 50 in this time, then I want to display the dynamically summed cumulative user count for that timeframe.

I have previously used a basic combination of JS POST and PHP parsing on the back end like this:

    $.post( "//api.link.here/using.php", { someParameter: 'xxx' }, function(data) { 
        if(data > 50) {
            $('#much-visits').html('Hot Like Fire: '+data);
        }
    });

But am now working on a platform that doesn't allow me to edit PHP in any way, and this method has not been developed on this platform.

The Question:

Is it possible to accomplish this same/similar thing but with javascript only (frameworks/outside API calls allowed)?

Upvotes: 1

Views: 11963

Answers (3)

Andre Bulatov
Andre Bulatov

Reputation: 1139

I figured out how to do this with the help of user kabiroberai's answer regarding count.io.

Every time a person visits the page, execute this function (change usercount to something more unique):

$.ajax({
url:"http://count.io/vb/usercount/users+",
type: "POST"
});

And when you want to read its value, call this function. Usercount is the unique string you made previously:

$.ajax({
url:"http://count.io/vb/usercount/",
success: function(data) {
    alert(data.counts[0].count);
}
});

NOTE: It's important to know that if someone gets to know the string, they might be able to hack the system so be wary of that.

The problem with this method is that it gives us the total count of all time, rather than the count of users from the past 24 hours.

To get the 24-hour count, we can do this: // Timestamp shim for browsers 

    // Timestamp
    var timestamp = Math.floor(Date.now());
    // 24 hour old timestampt
    var dayAgo = timestamp - 86400000;

    // Record a hit to the count.io DB under DankStopProduct# group, as a timestmped hit of 1
    var productNumber = $('.some-product-element').find('some-unique-identifier').attr('value'); //Doesn't have to be value, could be any unique identifier
    $.ajax({
        url:'http://count.io/vb/YourProduct' + productNumber + '/' + timestamp + '+',
        type: 'POST'
    });

    // Make dynamic HTTP prefix that depends on the prefi of the site's current page protocol
    var httpPrefix = (window.location.protocol === 'http:' ? 'http:' : 'https:');

    // Retrieve current product array
    $.post(
        //I use CORS-anywhere to retrieve the data as otherwise there is a cross-origin problem
        httpPrefix + '//cors-anywhere.herokuapp.com/' + 'http://count.io/vb/YourProduct' + productNumber,
        function (data) {
            var timedViewCounter = 0;
            var myStringArray = data.counts;
            var arrayLength = myStringArray.length;
            // Check each "timestamped hit" in the current product's array to see if it's older than 24 hours
            for (var i = 0; i < arrayLength; i++) {
                var itemTimestamp = data.counts[i].item;
                // Count up all the product hits that are 24 hours old or newer
                if (itemTimestamp > dayAgo) {
                    timedViewCounter++;
                }
            }
            // If total count is greater than 50, then output HTML onto page
            var hotItem = '<div id="hot-item"><strong><i class="fa fa-fire"></i> Hot Like Fire!</strong> - ' + 
                            '<span class="view-count">' + timedViewCounter + '</span> people have viewed this product in the last 24 hours</div>';
            if (timedViewCounter > 50) {
                $(".FreeShippingContainer").before(hotItem);
            }
    });

And that's all! Now the product view count will only be output if it's 51 views or higher in the past 24 hours.

Upvotes: 0

kabiroberai
kabiroberai

Reputation: 2913

Actually, you can! You need jQuery though, so if you can get that, you're good to go!

Every time a person visits the page, execute this function (change usercount to something more unique):

$.ajax({
url:"http://count.io/vb/usercount/users+",
type: "POST"
});

And when you want to read its value, call this function. Usercount is the unique string you made previously:

$.ajax({
url:"http://count.io/vb/usercount/",
success: function(data) {
    alert(data.counts[0].count);
}
});

It's important to know that if someone gets to know the string, they might be able to hack the system so be wary of that.

Upvotes: 2

elixenide
elixenide

Reputation: 44841

It's impossible to do it solely using client-side JavaScript, because then you wouldn't have any unified record of how many visitors came to the site. You must have either a server-side element or a third-party element (such as Google Analytics).

Upvotes: 4

Related Questions