How to Track the Number of Page Views a Page Has Using jQuery and AJAX

In this article, we show how to track the number of page views a page has using jQuery and AJAX.

So before we go into the code, let's go over how tracking page views can be done, theoretically.

And it's very simple.

Let's say you have a site where users can write posts, such as quora or stackoverflow (these sites keep track of post views, not the point though).

Each post that you have on your site is going to have its own instance on the database table. For example, you may have a database table, called Post, that stores all the posts on your site. In this database table, you should add a field, views, which will be an integer field, which will store the numerical value of the views that a post has received.

After this is done, we want to update the number of views the page has by 1 each time the page has fully loaded.

This can be easily done with jQuery using the following code below. This code is tailored to Django.

<script> $(document).ready(function(){ $.ajax({ method:'POST', url:'/documents/{{eachdocument.slug}}/updatedocumentviews/', data:{ csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val() }, success: function() { $.get("/documents/{{eachdocument.slug}}/getdocumentviews/", function(data, status){ $('#documentviews').html(data); }); }, }); //}); });//this ends complete function </script>

The jQuery ready() function executes when the page has fully loaded (every time the page fully loads, we register this as 1 page view).

Being that we want to update the page views by 1, we do a POST request.

In this POST request, we want to retrieve the current number of page views and add 1 to this number.

So this is what you do in your code.

Below is the Python code for retrieving the views from the database, adding 1 to this amount, and then saving this updated number.

from documents.models import Document def updatedocumentviews(request, slug): eachdocument= get_object_or_404(Document, slug=slug) currentviews= eachdocument.views currentviews= currentviews + 1 Document.objects.filter(slug = slug).update(views= currentviews) context={'eachdocument':eachdocument} return render (request, 'documents/documentdetailpage.html', context)

It's a very simple function that takes the current number of views, adds 1, and then updates the database with this new number.

Going back to the jQuery code, we then have a success function.

The success function is a function that is executed in AJAX if there are no server-side errors in running the AJAX function. A server-side error can happen, for example, if the URL does not exist in the URL scheme or there is an error in the function serving the URL.

In our success function, we have a get() function, because we now want to retrieve the newly-updated views from the database table.

So we specify a URL within this get() function and create a function that retrieves the current views.

This is shown in the following code below.

from django.http import HttpResponse #remember to import Database def getdocumentviews(request, slug): eachdocument= get_object_or_404(Document, slug=slug) currentviews= eachdocument.views return HttpResponse(currentviews)

So in the Python function above, we simply get the page views from the database and return this using the HttpResponse() function, specifying the page views within this function.

Now if you go back to the success function from our AJAX code, 2 parameters are specified within this success function: data and status.

data represents the data we returned from the GET request, which is the number of page views.

We now just use simple jQuery to update our page by using the jQuery html() function to overwrite the value within the HTML div element that has an id attribute of "documentviews". Make sure you have a div element that has an id attribute of "documentviews".

And this is all that is required to track the number of page views a page has received using jQuery and AJAX.

Related Resources

How to Randomly Select From or Shuffle a List in Python