Switching from Google Analytics to Umami

Note: The original post can be found here

For any new site, there is always the tendency to reach out and grab Google Analytics as the "go to" method for collecting and analysing stats about your site and users. I, for one, have been guilty of that in the past but with the growing popularity of open source analytics and cheaper options out there, more and more developers are looking elsewhere.

Why move away?

Personally I am trying to move what I can away from Google's ecosystem but, in the grand scheme of things, I think there is something fundamentally wrong with how easily we open up our sites to Google. I think a lot of the time this comes down to convenience and the perceived best practice of it all, which is totally understandable, and something I can relate to. But, with internet privacy becoming an alarming concern for many people I think it makes sense to explore other options, and keep our visitor information safe.

In addition to this, here are some other benefits I can see:

• Analytics is pretty bloated so we should see some performance benefits. Most open source solutions tend to come in at around 2kb, whereas GA comes in at around 40kb which is a huge saving.
• No need for the dreaded GDPR cookie banner! Most self-hosted solutions don't set a cookie or track any personal data, so have saved ourselves a job.
• Most ad blockers block the GA script. By hosting our own solution we will receive uninterrupted, accurate data.
• You'll own the data! Protecting the privacy of your visitors and creating a safer space on the internet.

Note: Before I ventured down the path of self-hosted analytics I researched whether it was possible to set up Google Analytics to be GDPR compliant. At the time of writing this, there was nothing concrete or anything "official". For the amount of developers/site owners that reach for Google Analytics for a new project, I found it interesting and slightly disappointing that there wasn't extensive documentation or guides for this.

Choosing an Analytics solution

It may be a coincidence or it may be fate but as it happens the first open-source analytics solution I digitally stumbled across was in fact Umami! I first discovered it from issue #102 of Kai Brach's Dense Discovery and even though it came out a while back, it still made a big impression on me. In addition to this, thanks to the Twitterverse and "the algorithm", I came across Mike Cao’s (@cauzilla) post How I wrote Umami in 30 days which shared some great insights into the inspiration, why the project came to be and how it was created. I’m still pretty blown away that it only took 30 days from start to *finish. But as fated as this was I did look at a few other solutions:

Ackee - Free Alternative - Probably the most similar solution to Umami and it would have been my second choice. It seems to be pretty popular and well worth checking out.

Fathom - Paid/Free Trial - I came across this solution from one of @brianlovin's tweets so I thought it was worth checking out (as with anything Brian does). For this site, a huge focus isn't put on the data so I wanted a free solution (however, you can try it out for free for 7 days).

Splitbee - Paid/Conversion Focussed - Created by Tobias Lins Splitbee is a paid service with more of a focus on businesses and conversion. It's got a beautiful UI and some great features, but for me (who wants something super simple) it felt a little overkill.

Choosing a Hosting solution

Now I had chosen an analytics solution I needed to decide where it was going to be hosted. As a rule, self-hosting an open-source project can be a bit of a pain with many moving parts. Luckily, Umami's docs give you a few options when it comes to hosting, ranging from all-in-one solutions (DigitalOcean, Railway, Heroku) to set up your frontend and backend separately (Vercel). The biggest thing for me here was finding an easy to use, all-in-one solution so I didn't need to worry about the database and UI layer separately and sign up for two different services. So, as with anything, I did a couple of searches and came across Railway.app via the blogpost Self Hosted Web Analytics.

Railway provided everything I wanted above, a single service that automagically deploys the database and front end for you, and linking them together seamlessly. Having never heard of Railway before I was excited to give it a go.

Note: You could also use Heroku which from what I remember should set up your database and UI layer for you, but I've never been a fan of Heroku so that's why I didn't use it.

Deploying Umami on Railway

I'd like to tell you that it was a complicated process and only really smart people will be able to accomplish this but in reality, it's one of the easiest, friction-free deployment processes I've experienced. Railway provides you with an Umami starter (along with a lot of other starters worth checking out) which automagically deploys your Postgres database and Next frontend for you. To get started you can click the Railway deployment button below.

Note: this can also be found in the official docs and the blogpost I mentioned before

1. You will be asked to sign in to your Github and give Railway some permissions. This is so railway can create an Umami repo for you which you can fork and apply any updates in the future.
2. Give your repo a name and add a random string for your HASH_SALT (this can be anything you want) and then click deploy.
3. Once we have clicked deploy the project will start building. At this point, it's a waiting game until it finishes. I'll admit I just ended up staring at the build logs until it finished (no regrets).
4. When the deployment has successfully finished we can click the URL in our Project deployments and low and behold you should see the Umami Admin screen.
5. Sign in with username: admin and password: umami and make sure to change your password. This can be found in Settings > Profile > Change Password.

Configuring our website

So we have Umami up and running on Railway and everything is starting to come together. The only thing left for us to do now is to configure our website in Umami and add the tracking script to our website. So let's do just that:

1. Head into our settings page in Umami and click add website
2. Fill in the Name and Domain fields and click save
3. You should see a </div> button next to our newly created domain. Click it and copy the tracking code
4. I'm using Next.js so in our _document.jsx file (you may need to create this if you haven't already) we can add the following

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          {process.env.NODE_ENV === "production" && (
            // the tracking script copied from umami
            <script
              async
              defer
              data-website-id="your-umami-id"
              src="your-umami-src"
            />
            // end of tracking script from umami
          )}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Notice how I have added the process.env.NODE_ENV conditional here to make sure that we are only getting stats sent to umami on production. The conditional could be more complex in my opinion but it works for what I need.

Once your site is deployed with the tracking script you should start to see some stats coming through in Umami.

Conclusion

There we have it! In a relatively short amount of time, you can move your personal site/project away from Google analytics and have the peace of mind that you own the data and a range of other benefits. I want to give a big thanks to Mike Cao (@cauzilla) for creating Umami as without him the project wouldn't exist, and if you do switch over I hope you will send him some love. Also, big claps for railway.app as they have taken the (annoying) problem of self-hosting open-source projects and made the process incredibly easy. What they've built and achieved with this is nothing less than remarkable.

Finally, I do hope you will check out Umami or any of the other listed solutions and migrate away from Google Analytics. I don't think you will regret it.

Useful Tips

• Umami works great as a PWA so you can add it to your home screen for quick access (I wouldn't recommend doing this if you feel you would be checking it every 5 minutes).
• The URL generated by Railway is a pretty random one so add a browser bookmark so you don't need to dive into your search history from months ago.
• Probably the most important when writing for fun: don't let the stats dictate what you write. You'll find yourself losing motivation quickly and writing will feel like a chore.