Adding self-hosted analytics to your website for free with Umami
Tags: webdev, tutorial
Published: 2021-08-05 07:06:00

## Background

Google Analytics is free but there have been privacy concerns over the handling of user data. Zoom was recently fined 85 million for [misleading users about their Google and Facebook trackers](https://www.reuters.com/technology/zoom-reaches-85-mln-settlement-lawsuit-over-user-privacy-zoombombing-2021-08-01/). 

With ad blocks and tracking prevention built right into browsers like Safari, it is time to consider hosting your own analytics platform.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y735pdiaqhj6m6io0wag.png) 

## Start an Umami Project on Railway

[Umami](https://umami.is/) is free, open source, and dead simple. It requires a server with Node JS and either a MySQL or PostgreSQL database. 

You can set that up with a single click on [Railway](https://railway.app?referralCode=_9vrie). 

You can use [my referral link](https://railway.app?referralCode=_9vrie) to register and get a $5 credit. You also have a monthly $5 quota of free cloud resources and credit card not required. This should be plenty for Umami.

Go start a new project and select **Deploy Starter**.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ossk85uwidp3ftnmim73.png)

Select **Umami**. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mvsnob9eiz16q93lnd2f.png)

> [Ackee](https://ackee.electerious.com/) is another open source analytics platform you can deploy on Railway. I first tried Ackee but I prefer Umami because of its **Realtime Dashboard** that allows me to see active sessions and what webpages are being visited at this very moment.

> I hate to admit it but I might be a bit addicted to seeing what people are looking at on my website 😅 so I try not to visit my Umami dashboard that often. 

Select your Github account and name the repository for Umami.  

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0atldyp4y60dc14xeey.png)

You will need to enter HASH_SALT which can be easily generated on the platform with CMD+K -> Generate.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4qwzalbrmgxgjid6tir.png)
 
Once you click deploy, both the Node server and the Postgres database will be set up. 

Once they have been deployed, click on the **Deployments** tab and click on the link below the *Success* message to go to the Umami platform.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9q5t0wqc7z1rueyqtl1.png)

🎉🎉 Congratulations! Your own analytics platform 📈 is set up!

## Login

The default account has the username **admin** and the password **umami**.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96ox06es4p0cp5ceetl4.png)

Log in and go to **Settings** to change the password.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tiwtiguux9nosq5p76xq.png)
 
## Add a website 

In **Settings**, navigate to **Websites** and click on the **Add Website** button.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89rs13rct2q65tmarw6e.png)

*From Umami*: 

> The **Name** field can be whatever you want. Usually it's the same as the domain name.

> The **Domain** field is the actual domain of your website. It is used to filter out your own website from the list of referrers in your metrics.

> The **Enable share URL** checkbox means you want to share your website stats via a unique URL.  

After a website is added, we can get its tracking code.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08jipy74cp4oef7k7xfi.png)

A form will pop up with a code containing a script tag. You can then insert it to the `<head>` section of your website.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vn9lhosi1vnye6yc2vyj.png)

### Next JS app 

If you are adding it to your Next JS app, you can add it to your *_app.js* file and enclose it inside *next/head*. You can also use the environment variable **NODE_ENV** to render the tracker only on production environments so it won't collect data on your local environment while you're developing the website.

```javascript
import Head from 'next/head';

function MyApp({ Component, pageProps }) {
  return (
    <>
      {process.env.NODE_ENV === 'production' &&
        <Head>
          <script async defer data-website-id="4fb7fa4c-5b46-438d-94b3-3a8fb9bc2e8b" src="https://your-umami-app.com/umami.js"></script>
        </Head>
      }
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

```

Enjoy your new analytics portal!

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khahma07fgrl1rluly7t.png) 


## No Social Media trackers!

You can verify that Umami does not show as a tracker on browsers and security extensions. 

Since it doesn't use cookies, there is no need to show cookie consent pop up forms.

Safari Tracker Report:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c1t9yret0uuhhrwcyzfu.png)
  
DuckDuckGo Privacy Essentials:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uxrrm6qda5wxczi2ovsr.png)