A Guide to Self-Hosting Your Own Website Analytics With Umami‚Äāby@sachinchaurasiya
557 reads

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

tldt arrow
Read on Terminal Reader

Too Long; Didn't Read

Umami 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. In this article, we all know that Google Analytics captures all of your users information, so there is no privacy or control over the data. To understand the metrics you will need a PhD, but honestly it's not easy to understand the google analytics metrics. To give a name to your app and I have given a name, go to the **website-analytics-umami**. Then click on the**create app** to create your app.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - A Guide to Self-Hosting Your Own Website Analytics With Umami
Sachin Chaurasiya HackerNoon profile picture

@sachinchaurasiya

Sachin Chaurasiya

Software Engineer | Freelancer | Technical Writer | OpenSource Contributor...

Learn More
LEARN MORE ABOUT @SACHINCHAURASIYA'S EXPERTISE AND PLACE ON THE INTERNET.
react to story with heart

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 portfolio 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.

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 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 https://github.com/umami-software/umami and fork the repository.

GitHub-fork.png

GitHub-fork.png

Create or Log In 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.

Heroku-login.png

Heroku-login.png

Create and Configure the Heroku Application

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

Heroku-dashboard.png

Heroku-dashboard.png

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

create-Heroku-app.png

create-Heroku-app.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

image.png

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

image.png

image.png

Once you click the Connect to GitHub button, you will have to authorize 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

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

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 the Resource tab, scroll down to the Add-ons section, and then search for Postgres.

image.png

image.png

Select the Heroku Postgres option. After selecting it, 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

image.png

Umami requires the env variable DATABASE_URL to work with the database. Navigate to the settings tab, 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

image.png

Umami requires one more env variable, HASH_SALT. 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, 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

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

image.png

Configure Umami

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

image.png

image.png

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

image.png

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

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

image.png

<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 portfolio website.

image.png

image.png

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

Example:

image.png

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


Also published here

RELATED STORIES

L O A D I N G
. . . comments & more!
Hackernoon hq - po box 2206, edwards, colorado 81632, usa