DEV Community

Cover image for How I self-hosted my own website analytics with Umami
Deepankar Bhade
Deepankar Bhade

Posted on • Originally published at dpnkr.in

How I self-hosted my own website analytics with Umami

I absolutely love over-engineering this site. After months of procrastinating I finally rolled out my blog to this beautiful world. I stumbled upon this part of adding analytics and my needs were simple, lightweight, ethical, great if open-source and privacy-friendly Google Analytics alternative. So I signed up for Plausible , Fathom & Panelbear and started using them.

I didn't want to miss any other alternatives so I asked on Twitter on what people use in their sites and that's when I heard of umami. Here's a rough comparison of 4 of them.

Tool Open Source Pricing Bypass ad-blockers
umami Free
Plausible $6/month
Panelbear Free (1000visits)
Fathom $14/month

Umami was clearly a winner here so decided to self-host it and after 5mins I had my very own analytics up. In this article, I would explain how you can do the same.

There are many ways you can self-host umami you can find all ways here. Deciding to use Railway was a no-brainer for me because it would set up both the Postgres DB and Frontend app (analytics dashboard) therefore making my life easy.


Deploy on Railway

To get started click on the "Deploy on railway" button, you would be prompted to sign up if you haven't already and to connect it to a GitHub repository. After you're done go and click "Deploy".

Setup

This would create a new GitHub repo and start building the project. This generally takes 2-3min for deployment is not that much .

Building

This would set up Prisma, Nextjs and also create an admin user. You should see a deployed link go ahead and click on it.

Deployed

Umami installation will create a default administrator account with the username admin and the password umami. Make sure to reset the password in the settings you can refer to official docs for reference.

Login

You should be able to see a dashboard-like interface but hey where are the sites? You can add websites to track in the settings. Now to add them to your sites just click on the code icon and place the following code in the <head> section of your website.

Code

That's it? Yes! isn't it amazing how quickly you can provision and deploy it? Now if you visit your website you should see the dashboard getting updated. I would now cover some things I added to complete my setup.

I added a custom domain to the dashboard for that you can refer to this official guide from the railway.

One thing that was important for me is skipping analytics from the dev environment and from my personal visits.

Make sure to add data-domains attribute to the script to avoid sending analytics other than the production environment.

<script
  async
  defer
  data-domains='dpnkr.in'
  src='https://umami.is/umami.js'
  data-website-id='1313u131-85ee-42d4-97d2-8ba80de140a6'
></script>
Enter fullscreen mode Exit fullscreen mode

If you're like me who visits his own site too much then you shouldn't send the analytics to the dashboard to make this possible add umami.disabled = true

Local

And that's a wrap. Hope you find this interesting feel free to connect with me on Twitter if you have any questions. Cheers!

Discussion (18)

Collapse
michael_scharen profile image
Sci-Fi Author Michael James Scharen

Doh!
data-domains='dpnkr.in' is your own domain. I did not recognize the .in
So for my code I need to add data-domains='michaelsbookcorner.com' right?

Collapse
madza profile image
Madza

Curious what's your costs of hosting the DB with Railway?
I use free Postgres instance in Heroku with 10k row free tier. Have to clear the database once the limit is full to avoid cost, otherwise it's effective solution, too 😉

Collapse
deepcodes profile image
Deepankar Bhade Author

$1.85 per month

Also Railway's free tier is 5$ per month

so I don't have to pay anything yet.

Railway Cost

Collapse
madza profile image
Madza • Edited on

Nice to see that they use pay-for-use model 👍 Reminds me of AWS 😉

Collapse
anthonynsimon profile image
anthonynsimon

Hey Deepankar! Love to see Panelbear mentioned on your tutorial 🐻❤️

To add some of the benefits you also get on Panelbear vs self hosting umami:

  • Performance monitoring (eg. load time, DNS, TLS timings, and soon Web Vitals)
  • Alerting integrations to Slack, Discord, Email
  • And of course, fully managed (no databases or servers to take care of)

P.S.: I'm the dev running Panelbear, feel free to shoot any questions my way.

Collapse
deepcodes profile image
Deepankar Bhade Author

Things I really loved about Panelbear than other vendors

  • Web vitals stats (as you mentioned)
  • Free to use (no credit card)
  • Dedicated Nextjs wrapper

Been using it! Amazing stuff

Panel bear dashboard

Collapse
michael_scharen profile image
Sci-Fi Author Michael James Scharen

Where are we supposed to set umami.disabled = true?
Also, what is data-domains='dpnkr.in'? What does it mean? Is it specific to your case or does it have general meaning?

Collapse
alexweininger profile image
Alex Weininger

I self host Umami analytics for PulseBanner.com. Loving it so far!

Collapse
deepcodes profile image
Deepankar Bhade Author

Yep it's a delight , curious to know how are you hosting it?

Collapse
alexweininger profile image
Alex Weininger

I use CapRover on a DigitalOcean Droplet.

Collapse
asdivyansh profile image
Divyansh Chaurasia

Worth reading, loved it!

Collapse
deepcodes profile image
Deepankar Bhade Author

Thank you so much Divyansh ❤️

Collapse
mike_andreuzza profile image
Michael Andreuzza

Been using Umami for more than a year.

Love it to the bones, amazing stuff.

Collapse
th1nhng0 profile image
Ngô Phú Thịnh

Cool stuff, thanks for sharing this :D

Collapse
arturgdevelop profile image
Artur G

What about 66Analytics?

Collapse
deepcodes profile image
Deepankar Bhade Author

Looks very great, might be an overkill for personal sites tho

Also their OSS tier is paid.