Understand How Users Interact with your SPAs using Google Analytics

Image by Ayurmana Ayurveda

I’ve recently transitioned my political project from a traditional back-end to using CRON-scheduled AWS Lambda to generate new static responses that my React app retrieves.

When my app was still utilizing a Rails back-end, I was simply logging info about each request into a database table to track errors, specific queries, and other visitor info.

Now that my back-end had moved into the cloud, I wondered how I could maintain those logs. Initially, I decided to create a new Lambda that would accept small POSTs from my front-end and dutifully log them to an AWS RDS Cluster.

You could use AWS API Gateway to trigger an AWS Lambda to save analytics from your front end…or you could read on

After a day of troubleshooting CORS issues from passing events from an API Gateway to a Lambda that accessed an RDS instance, I finally got some rudimentary tracking working that I could trigger when my application initially loaded or when a user was about to end the session. I was quite proud of my efforts until the next article I stumbled upon changed my approach dramatically.

It turns out there’s a much easier (and free!) way: Google Analytics.

Creating an account with Google Analytics (we’ll call it GA moving forward) is easy and offers endless customization options. Don’t worry, stay focused on the core functionality and you’ll have it integrated into your SPA in just a few minutes.

After setting up your account, integration into your SPA is very straightforward. In this case, I’ll be using React and MobX for global state management. There is an NPM library that wraps basic GA functionality, react-ga.

While you could add a <script> tag for Google Analytics functionality and access it through the window, the ‘React-GA’ package makes GA integration even easier

After adding React-GA to your project, you’ll need to import and initialize the object, ideally on the initial load of your application. I pray you’re using React 16.8+ and thus taking full advantage of Hooks, as useEffect is perfect for our needs here. You’ll also want to retain a handle on this object wherever your app will use it, and I again recommend MobX for your global state needs.

Initialize your React-GA object with your unique Tracking ID, found in the Google Analytics Admin console under Property Settings

There are some optional settings that are only available on initialization that can be found here. Once you’re initialized, you can use the built-in methods from React-GA to asynchronously send data over the wire. For my use case, I created actions in my MobX store that can disable the GA functions if I’m in development mode and don’t want to flood the analytics from all the hot reloads of my code editor.

Two common React-GA methods you’ll use, pageview (to log when a user navigates within your site) and event (for any clicks or state changes you want to take note of)

Once you’ve got this set, you should be able to navigate through your site, and within seconds, see your GA console light up with activity from the events you’ve set.

View custom events in near-realtime in your GA console

There’s a ton of features and analytics available within the GA console itself, but with just these two methods (pageview and event), the possibilities are endless. Be sure to check out the ReactGA.timing methods, for benchmarking how long it’s taking your users to download your app’s resources. After all, time is money!