How To: Display visitors currently on this page

Learn the GoSquared API. You'll go real-time in no time.

Back in March, I wrote a guide explaining how to display popular pages on your website. Now, we’re going to dive deeper into the Pages function and explore the new per-page filtering functionality.

Ever been on your homepage, or your blog and wanted to show the number of visitors currently on this page? Let’s find out how to make that happen.

Using the GoSquared API, you can use GoSquared’s real-time analytics engine to grab the data for a specific page. This can be shown on the page to engage your visitors, or even be used to optimise the page. If there are a lot of people viewing a certain product on your Ecommerce site, could you offer them a discount to help them convert? If lots of people are highly engaged, why not push them to share or browse more content?

Note: this tutorial requires jQuery!

We strongly recommend using a simple proxy to get the API data so your API key isn’t exposed publicly and using a cache so you won’t hit your API limits if you have a lot of visitors.

Basic usage

Getting the real-time data and displaying the current number of visitors on a certain page can be done using the following code.

Get data for the current page

To display the stats for the currently active page, you can use window.location.href to get the URL and pass that as the href parameter to our API. For the Team Fortress 2 demo site this would look as follows…

Update on an interval

The number of people online updates in real-time, so when new people come online or when people leave we can update our figure.

Animate the updates

Animating numbers looks nice, especially if the number is changing by a few visitors every time.

Using Engaged Time

On a per-page level, we track the total amount of time the current visitors have been engaged (actively interacting with the page). This can be great for blogs to adapt content based on how engaged their current visitors are.

In the wild

GoSquared Global Metrics – real-time analytics and numbers on global usage of web technologies

We’re using the GoSquared API on the new Global Metrics section of the site. Check out our iOS 8 adoption page – the counter is at the bottom. We’ve also seen lots of our customers implement a huge range of ideas with the API. One cool use – a few customers have integrated the per page API metrics with their CMS to display the current number of people online while they’re editing a page.

What are you waiting for? Start using the GoSquared API today! We can’t wait to see what you build.

Subscribe to the GoSquared newsletter.

Join 15,000 people. Get our latest posts delivered to your inbox every week.