Integrating Google Analytics with a Preact application enables you to track user interactions and gather insightful data. Here is how to add GA to Preact, step by step. Let's dive in!
Before we dig in I want to show you something. I promise it's worth it...
Google Analytics is great, but also complex and a bit clunky. If you just want a straightforward dashboard with the insights you need, GA is not a great place to start. Additionally, Google doesn't care about privacy and GA requires an annoying cookie banner.
That's why I built Simple Analytics, a privacy-friendly and simple analytics tool - no personal data, no cookies, just the insights you need in a straightforward dashboard.
Here is how it looks vs GA. Feel free to check our live analytics to get an idea for your project. (It is free btw)
All right, enough about us. Now let's get into answering your question!
Integrating Google Analytics
Set up Google Analytics
- Log into your GA profile (or create one, if you haven't already).
- Create a GA property for your app.
- Inspect the property and note down your Measurement ID. You will need it later.
Install a GA Library
For a Preact application, you can use the same libraries as React. A popular choice is react-ga
:
npm install react-ga
Initialize GA in Your Application
In your main Preact component (usually index.js
or App.js
), initialize GA using your Measurement ID:
import ReactGA from 'react-ga';
ReactGA.initialize('YOUR_MEASUREMENT_ID');
const App = () => {
ReactGA.pageview(window.location.pathname + window.location.search);
// Rest of your app component...
}
Replace YOUR_MEASUREMENT_ID
with your actual GA Measurement ID!.
Track Page Views and Events
Preact applications are typically single-page apps (SPAs), so you need to track page views manually on route changes. If you're using a router like preact-router
, you can do this:
import { Router } from 'preact-router';
const handleRouteChange = () => {
ReactGA.pageview(window.location.pathname + window.location.search);
};
<Router onChange={handleRouteChange}>
{/* your routes */}
</Router>
For tracking events (like button clicks), use the ReactGA.event
method:
ReactGA.event({
category: 'User',
action: 'Clicked the Button',
label: 'Click Me Button'
});
Test Your Integration
Deploy your application and test the integration. Check the Google Analytics dashboard to ensure data is captured correctly. You can also use the Google Analytics Debugger Chrome extension for debugging.
(Optional) Create New Properties
To track multiple apps, create more GA properties and use the corresponding Measurement IDs. This prevents GA from conflating the data.
Final Thoughts
Adding Google Analytics to your app can give you great insights. However, ask yourself: is Google Analytics the right tool for you?
GA is an overpowered solution for straightforward analytics. If you're looking for a simple and intuitive dashboard with the insights you need, there are better alternatives. Yes, I’m talking about my own product (Simple Analytics), but there are others out there as well.
I hated using Google Analytics for my projects. It's clunky, there are hundreds of dashboards and it doesn't look appealing. Also Google doesn't care about privacy or ethics. That's why I decided to build my own and more intuitive web analytics tool.
If this resonates with you, feel free to give Simple Analytics a spin. You just need to add the script to your app and off you go. This takes about one minute- and there is a free version as well!
Enjoy!