DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to Self Host your own Website Analytics With Umami
Sachin Chaurasiya
Sachin Chaurasiya

Posted on • Originally published at blog.sachinchaurasiya.dev

How to Self Host your own Website Analytics With Umami

When we talk about website analytics, the first thing that comes to mind is Google Analytics. However, we all know that Google Analytics captures all of your users' information, so there is no privacy or control over the data.

Google Analytics capture so many different metrics that even we don't need and the most important fact is that to understand the metrics you will need a PhD 😁, jokes apart but honestly it's not easy to understand the google analytics metrics.

Lately, I was looking for an analytics solution for my portfolio website and some of the people suggested google analytics, but I wanted full control of my website analytics and easy-to-understand metrics with the simple friendly dashboard. So, I started searching for google analytics alternatives and I found a few interesting ones like plausible.io and umami.is.

After a few days of research, I concluded that Umami will be the best fit for my use case because it is Open-source and focuses on privacy, it provides you with a powerful web analytics solution that respects your users' privacy. the best part is that you will have complete control over your data when you self-host Umami.

So In this article, I will be discussing how to self-host your own Website Analytics With Umami on Heroku.

Let's get started.

Fork the umami repository

Visit https://github.com/umami-software/umami and fork the repository.

image.png

Create or login to the Heroku account

Go to the Heroku website and login into your Heroku account, if you don't have an account then click on signup to create one.
image.png

Create and configure the Heroku application

After login, go to the dashboard and from there click on New > Create new app.

image.png

Now give a name to your app and I have given website-analytics-umami. then click on the create app button to create your app.

image.png

Connect your Heroku app to your forked umami repository

From your dashboard click on the app name that you just created. I will click on website-analytics-umami.

image.png

Now navigate to the deploy tab and click on the Connect to GitHub button.
image.png

Once you click the Connect to GitHub button, you will have to authorize the Heroku to access your github repositories.

Search for a repository that you want to connect to, that is umami and then click on connect button to connect your Heroku app with the umami repository.

image.png

Enable automatic deploys

After connecting your repository, scroll down to the Automatic deploys section and click on Enable Automatic deploys.
Heroku will automatically deploy if you make any new changes to this repository.

image.png

Setup database

As I mentioned umami is self-hosted so you will have to set up a database to store your analytics data.

Navigate to Resource tab and scroll down to Add-ons section, then search for postgres.

image.png

Select the Heroku Postgres option. after selecting you will see a modal like below.
Select a free plan and click on the submit order form to add this add-on to your application.
image.png

Umami requires the env variable DATABASE_URL to work with the database.
Navigate to the settings tab and scroll down to the Config Vars section and you will see that Heroku has automatically created an env variable DATABASE_URL, so you don't have to set it manually.

image.png

Umami requires one more env variable HASH_SALT and you can add that from the Config Vars section.

Now everything is set up, let's move to the next part which is deploying your application.

Deploy Umami

You have enabled the automatic deploys for your app, but for the first time, you will have to deploy it manually.

Navigate to the deploy tab and scroll down to the Manual deploy section and then click on the Deploy Branch button and wait for some time to finish the deployment.

image.png

Once your app is deployed you will see a green check for Deploy to Heroku and a message Your app was successfully deployed.

Click on the View button to open the deployed app.

image.png

Configure Umami

If you open the application you will get to see the login screen like this, by default umami creates one admin user with username admin and password umami.

image.png

From the dashboard navigate to settings and click on the Add website button.

image.png

Give a name to your website and add the domain that you want to track. you can also enable the share URL if you want to share your analytics with someone.

image.png

To track stats for your website, you will have to get the tracking code and place it in the <head> section of your website.

image.png

<head>
...
<script async defer data-website-id="006299fc-774a-4eda-be0f-8556e629930a" src="https://app-name.herokuapp.com/umami.js"></script>
</head>
Enter fullscreen mode Exit fullscreen mode

Congratulations πŸ₯³, if you've followed along so far, you have successfully self-hosted your own Website Analytics.

View the analytics

Now from the website's section click on the website that you have added to view the analytics. I will click on my portfolio website.

image.png

You will be redirected to the dashboard where you will see all the available analytics metrics for your website.

Example:

image.png

Summary

In this article, we have discussed how to self-host your website analytics with umami on Heroku and as a final result, you will have the self-hosted analytics for your website with privacy and complete control over your data.

And that’s it for this topic. Thank you for reading.

Useful links

Hashnode Also uses the umami for providing advanced analytics for blogs.

Connect with me

LinkedIn | Twitter

Top comments (12)

Collapse
joelbonetr profile image
JoelBonetR

That's quite interesting, thanks for sharing!

Bookmarking for my future me 😁

Collapse
sachinchaurasiya profile image
Sachin Chaurasiya Author

Thanks for your kind words @JoelBonet.

Collapse
joelbonetr profile image
JoelBonetR

You're welcome!

Collapse
shshank profile image
Shshank

Thanks for sharing. Never knew this. Bookmarking for future reference.

Collapse
sachinchaurasiya profile image
Sachin Chaurasiya Author

Most welcome @shshank

Collapse
therealdewang profile image
Dewang Shah

Thanks for sharing! I was planning to move away from GA and didn't know about umami.
The heroku free option for Postgres looks like it's limited to 10K rows. I didn't spot anything on the umami docs about how they log analytics. Any ideas on how much usage it can log before it runs out of space?

I don't expect it has built-in "overwrtite" functionality so one would have to go in and clear old records perhaps? Wondering how long you've been running it for and whether you've run into any such problems.

Collapse
sachinchaurasiya profile image
Sachin Chaurasiya Author

Hey Dewang, I recently started using Umami and So Far My experience is good.
Umami does provide reset option for clearing out the old data.
Umami has FAQ section and community support umami.is/docs/faq.

Collapse
therealdewang profile image
Dewang Shah

Thanks. Yeah had a look and will probably use umami but with a separate DB hosted with another provider. 10K records (max with Heroku's free option) is basically 10K hits to your site.

Thread Thread
sachinchaurasiya profile image
Sachin Chaurasiya Author

Yeah, You can look for render for hosting.

Collapse
qm3ster profile image
Mihail Malo

We all know what "privacy" really means: overcoming people's adblockers that prevent Google Analytics from working :v

Collapse
ravavyr profile image
Ravavyr

Does anyone know if Umami has a way of filtering out bot traffic?
Can you trust the numbers it gives you?

Collapse
sachinchaurasiya profile image
Sachin Chaurasiya Author

Not sure on this, you can read more about umami here umami.is/

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.