The Number of Active Users on the Site at the Moment

I have a web app and a personal website. The app sends data to google analytics where I can see the number of active users in the current moment. But how I can show this number on my website?

Image for post
Image for post

Goal

In the form of a user story: as an owner of the website, I want to show the number of active users in the current moment.

Image for post
Image for post
show number of active users

All code you can find in the repository.

Plan

First, we will take secrets from google console. Then we will write a function for fetching the number of active users in the current moment. Then we will create infrastructure via Terraform and deploy our code to AWS Lambda. Finally, we will call the lambda from the website.

Google Analytics

Before writing the actual code, we need to get two things from google: client_secrets.json and view id. To get them you want to enable google analytics API for your project. At the end of the creating process, you will get client_secrets.json. Then you need to take generated email:

Image for post
Image for post
google console

To add a new user go to Admin > View > User Management. Save the view id of a newly created user for the future.

Image for post
Image for post
google analytics

Function

When we have client_secrets.json and view id we are ready to write the function. Before doing this, we will create directories and install required libraries.

$ mkdir analytics-taker
$ cd analytics-taker
$ mkdir src
$ cd src
$ pip3 install requests oauth2client

Inside of src we will put a file with secrets from Google and create three python files. So our directory will look like this:

Image for post
Image for post
src directory

Let’s start with active_users.py. In this file, we will create a function that will send a request to google analytics and will return a number of active users.

Let’s test this function using terminal.py.

$ python3 terminal.py <VIEW_ID>

AWS Lambda

Nest step is deploying our function to AWS Lambda. First, we need to create the handler function. Let’s do this in file lambda.py:

From some point on I started using sentry in all the new small projects I make. If you are not using Sentry, you can remove the sentry_sdk call from the function.

Next, we are creating files for deployment automation.

Image for post
Image for post
src directory

In list.txt we have libraries required for our function. Commands to create a zip file with all code for lambda are inside of pack_up.sh:

We won’t look at deploy.sh since we don’t have the infrastructure for our code yet. Before start creating infrastructure we need to zip file with the code so let’s run the command:

$ . ./pack_up.sh
Image for post
Image for post
infrastructure directory

In vars.tf listed all variables required to create infrastructure:

We can specify them directly or by creating environment variables like this:

In file main.tf we describe resources required for running our code in the cloud. Those are:

  1. S3 for saving the function
  2. Lambda for running the function
  3. API Gateway to communicate with the function

With all files in place, we can create infrastructure by running these commands inside of infrastructure folder:

$ terraform init
$ terraform apply

After running terraform apply at the end of output you will see a green line with the URL. Using this URL we can run deployed lambda. Now you can test the lambda by opening this URL in the browser.

OK, but what if you make changes to the function and want to see new version deployed? Let’s write a script for deployment.

Run it by typing:

$ . ./deploy.sh tf-analytics-taker tf-analytics-taker function.zip

Website

Now we can integrate a call to the lambda in the website. I am using react, redux, redux-saga in my website and integration of the function looks like this:

And component has some trick in it — if no active users right now — component will now be rendered:)

Conclusion

In this story, we created a reusable function and infrastructure for getting the number of active users in your app in the current moment.

Reach the next level of focus and productivity with increaser.org.

Image for post
Image for post
Increaser

Written by

Software engineer, creator of increaser.org. More at geekrodion.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store