top of page

Views Counter for Dynamic Pages


This code will show you how to add a page views counter which iterates by one each time a website visitor navigates to and views each dynamic page. You can then use the number of views for sorting your dynamic pages for the most popular using a repeater or you can display it back to your website visitors as an engagement indicator.
First, you need to add a field in your dynamic items collection to hold the number of views. Be sure to set the field to numeric. Review the permissions of the collection to ensure that anyone or members (depending on your audience) can update content for the collection. This is needed as your visitors will effectively be updating the collection by their presence on the page. In the screenshot below, a field called 'Views' is created for this purpose - but you can call it anything you'd like.

Next, at whatever point the items in your dynamic collection are created - you need to initiate this field to start the views counter at zero. If you do not do this, the calculation to add views later will fail as you cannot do arithmetic with missing values. I have a form for entering items into my dynamic collection. The example code below sets the 'views' field to zero and saves it to my collection when the submit button is clicked. It also navigates back to the home page, but this is an optional extra after the save event is successful.
Lines Of Code
The next step is to add some code to your dynamic item page which iterates the view counter by one each time someone visits the page. I have found lagging this iteration process works best, as sometimes the save event conflicts with other things which might be happening on page load. For this, we create a laggedEvents() function which we will call with a time delay. The other useful thing about time delays is that you could deliberately set a higher time delay so that you don't count accidental navigation to a page as a real page view. For example, you may only wish to count page views which are for visits of more than 5 seconds, by which time those whom accidentally navigated to the page will have gone. It is also great mitigation for website visitors who may wish to 'game' your view counter process by inflating the numbers. Be sure that your collection is set to Read & Write too!
Lines Of Code
The last step of the process is to call the laggedEvents function, in this case with a one second delay (1000 milliseconds). We do this only after the dynamic collection we are saving to is ready.
Lines Of Code
Lines Of Code
Lines Of Code
Please login or sign-up (it's free!) to view our code. Refresh the page if already logged in.
Disclaimer: To the best of our knowledge, this code works for its stipulated purpose. If you find an error in our code, or know of a better way to achieve the same result - please contact us! We will help where we can, however please be aware that the code is provided 'as is' and without a promise of support in using or implementing it.
bottom of page