Free Google Analytics Alternative: Quickstart with Umami Analytics
I used to love splitbee.io to handle my analytics for a while. But since Vercel bought it, the service no longer works. To avoid this unpleasant situation again, I wanted to find an open-source alternative that I can self-host while being developer friendly and RGPD compliant. Let me tell you a few words about Umami analytics.
@splitbee is a simpler, European-based alternative to Google analytics.— Adrien Zaganelli (@adri_zag) March 19, 2021
I really like the cute UI, but my favorite feature is the ability to avoid ad-blockers with a proxy 😈😈😈
...But once it became Vercel Analytics I had to find something else to avoid vendor lock-in.
If you want to avoid what happened to me, here is what you need to look for your analytics tool:
- 🤑 Self hosted and free (avoid cloud solution)
- 🍪 RGPD compliant for europeans laws (also avoid the need for cookies banner)
- 🥷 Bypass ad-blockers
- 🔓 Open-source is a big plus
- 🧑🏻💻 Developer friendly
I chose to go with Umami analytics. It matches all of the above !
Umami tracks page views, custom events, visitor location but you can host it yourself and own your data in your own database. It also allows you to work in teams, the UI is translated in many languages, you can share your dashboards and many other features... including dark mode 😎.
That's cool but I do get this in my own website ?
Excellent question Timmy ! you have two choices:
- use their cloud solution (with a free tier): https://cloud.umami.is
- Follow this tutorial to discover the simplest, cost-free path in under 10 minutes (ideal if you're a developer who wants to manage your data and avoid bills)
You will need node v16.13+ and PostgreSQL.
Setup your database
To get started quickly I used PlanetScale. Umami also provides guides for:
But any PostgreSQL database will do the job.
Create an account and create your database in PlanetScale. Choose your region and take the free options (you still need to enter your credit card).
I took the "Others" provider
Set your database password
you should have this file at the end
# your values will be different DATABASE_HOST="aws.connect.psdb.cloud" DATABASE_NAME="umami" DATABASE_USERNAME="zz6qgpsqiq4u932t2axo" DATABASE_PASSWORD="pscale_pw_zfsPwRz0tW9H2wLDaykeXqZV5SA34l52gqAgA7XoWc0" # added by me for next step # mysql://[username]:[password]@[host]/[dbname]?sslaccept=strict DATABASE_URL="mysql://zz6qgpsqiq4u932t2axo:pscale_pw_zfsPwRz0tW9H2wLDaykeXqZV5SA34l52gqAgA7XoWc0@aws.connect.psdb.cloud/umami?sslaccept=strict"
Self-host your Umami instance
Fork Umami analytics on Github: 🔗 fork here.
Your instance can be hosted on many providers such as:
When creating you project you have 3 things to do:
- Override build command:
- Override install command:
DATABASE_URLin environment variables (take a look at the
.envfile above to see what you should get).
After deployment, you should be able to see your instance's login !
Before continuing, login as username:
umami. Make sure to change your password: see docs
Setup your application
Once you're logged in, go to settings and create your website's project in Umami:
Once created, go to Settings > (your project's row) > Edit > Tracking code. Paste the tracking code in your HTML.
<script async src="https://umami-self-host-example.vercel.app/script.js" data-website-id="a477d142-f3d5-4514-8251-f9f538a2b28f"></script>
track custom events
You can track custom events using
window.umami.track or using HTML attributes:
data-umami-**** for custom properties.
Here is a real-world example app with an increment tracker:
And that's how to easily set up Umami Analytics in 10 minutes ! You can publicly access all the trackings of the stackblitz on my Umami instance: https://umami-self-host-example.vercel.app