How to Self Host your own Website Analytics With Umami
Tags: tutorial, javascript, analytics, webdev
Published: 2022-08-14 20:07:39

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](https://sachinchaurasiya.dev) 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](https://plausible.io/) and [umami.is](https://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](https://github.com/umami-software/umami) and fork the repository.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660487119781/ta1n_Dymc.png)

## Create or login to the Heroku account

Go to the [Heroku website](https://id.heroku.com/login) and login into your Heroku account, if you don't have an account then click on signup to create one.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660487272250/Gj52zby_2.png)

## Create and configure the Heroku application

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

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660487546622/txlQnsA6N.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1660487664459/WmHm2BCgI.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1660487979578/eiLJnco9A.png)

Now navigate to the deploy tab and click on the **Connect to GitHub** button.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660487910606/vvAQpC6Me.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1660488135497/j3phNvTAM.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1660488571029/I-uie49hA.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1660488960169/ifSRbnU2q.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1660489155508/UxFfUi_AV.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1660489428316/L2xnsjpnl.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1660489813096/bTnYJlwpJ.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1660490128428/r0t7Y8mOt.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1660490355951/_nL64UVmQ.png)

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

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660490473122/D3Hk7mWLn.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1660490578614/es84Lztqp.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1660490811096/7sLEVLv0Q.png)

```html
<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](https://cdn.hashnode.com/res/hashnode/image/upload/v1660491350962/CXeJF2irF.png)

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

**Example:** 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660491547993/dpn10g9ky.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

- [Umami](https://umami.is/)
- [Umami features](https://umami.is/features)
- [Running on heroku](https://umami.is/docs/running-on-heroku)
- [Live demo](https://app.umami.is/share/8rmHaheU/umami.is)
- [Track events with umami](https://umami.is/docs/track-events)

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

## Connect with me
[LinkedIn](https://www.linkedin.com/in/sachin-chaurasiya) | [Twitter](https://twitter.com/sachindotcom)