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 captures so many different metrics that we don’t even need, and the most important fact is that to understand the metrics, you will need a Ph.D. 😁 Jokes aside, it's not easy to understand the google analytics metrics. Lately, I was looking for an analytics solution for my website, and some people suggested google analytics, but I wanted full control of my website analytics and easy-to-understand metrics with a simple, friendly dashboard. portfolio So, I started searching for google analytics alternatives, and I found a few interesting ones like and . plausible.io 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 with 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 and fork the repository. https://github.com/umami-software/umami Create or Log In to the Heroku Account Go to the __ __and login into your Heroku account; if you don't have an account, then click on signup to create one. Heroku website Create and Configure the Heroku Application After login, go to the dashboard and from there, click on . New > Create new app Now, give a name to your app. I have given it . Then click on the button to create your app. website-analytics-umami create app 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 Now, navigate to the deploy tab, and click on the button. Connect to GitHub Once you click the button, you will have to authorize Heroku to access your GitHub repositories. Connect to GitHub Search for a repository that you want to connect to (that is and then click on connect button to connect your Heroku app with the umami repository. Umami), Enable Automatic Deploys After connecting your repository, scroll down to the section, and click on . Heroku will automatically deploy if you make any new changes to this repository. Automatic deploys Enable Automatic deploys 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 the tab, scroll down to the section, and then search for . Resource Add-ons Postgres Select the option. After selecting it, you will see a modal like below. Select a free plan, and click on the to add this add-on to your application. Heroku Postgres submit order form Umami requires the env variable to work with the database. Navigate to the tab, scroll down to the section, and you will see that Heroku has automatically created an env variable , so you don't have to set it manually. DATABASE_URL settings Config Vars DATABASE_URL Umami requires one more env variable, You can add that from the section. HASH_SALT. Config Vars 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 tab, scroll down to the section, and then click on the button and wait for some time to finish the deployment. deploy Manual deploy Deploy Branch Once your app is deployed, you will see a green check for and a message: Deploy to Heroku Your app was successfully deployed. Click on the View button to open the deployed app. Configure Umami If you open the application, you will see the login screen like this, by default, Umami creates one admin user with username and password . admin umami From the dashboard, navigate to settings and click on the button. Add website 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. To track stats for your website, you will have to get the tracking code and place it in the section of your website. <head> <head>
...
<script async defer data-website-id="006299fc-774a-4eda-be0f-8556e629930a" src="https://app-name.herokuapp.com/umami.js"></script>
</head> 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 website. portfolio You will be redirected to the dashboard where you will see all the available analytics metrics for your website. Example: 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 Umami Umami features Running on Heroku Live Demo Track events with umami Hashnode Also uses the umami for providing advanced analytics for blogs. Connect With Me | LinkedIn Twitter Also published here

Google

Heroku

Twitter

My Top 5 Best Practices for ReactJs

Read My Stories

Portfolio

Buy Me a Coffee

Hire Me

Newsletter

Nominated for 2022 - HackerNoon Contributor of the Year - React

Nominated for 2022 - HackerNoon Contributor of the Year - Best Practices

Too Long; Didn't Read

Make resilience your competitive advantage

A Guide to Self-Hosting Your Own Website Analytics With Umami

A Guide to Self-Hosting Your Own Website Analytics With Umami

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

My Top 5 Best Practices for ReactJs

10 Great Articles On Data Science And Programming!

10 FinTech Trends in 2021 [Part II]

10 Financial Predictions for 2021 to Protect Your Wealth

13 API Metrics That Every Platform Team Should be Tracking

My Top 5 Best Practices for ReactJs

10 Great Articles On Data Science And Programming!

10 FinTech Trends in 2021 [Part II]

10 Financial Predictions for 2021 to Protect Your Wealth

13 API Metrics That Every Platform Team Should be Tracking

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps