Understand How Users Interact with your SPAs using Google Analytics
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.
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.
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.
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.
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.
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!
