How To Set up Web Analytics With Umami

Introduction

Analytics is a good tool to monitor the traffic on our websites, such as page views and visitors.

Take, for example, a blog about technology. Every person who visits the page is recorded, including where they came from (e.g., Indonesia) and what web browser they used (e.g., Chrome).

When it comes to analytics, you might think about Google Analytics, which is a web analytics tool offered by Google that tracks and reports website traffic, but you are also tired of being tracked by huge companies.

Then Umami may be the answer for you. Umami is a simple, fast, privacy-focused alternative to Google Analytics; let's look at how we can use this platform to monitor our website activities.

Requirements

Before we continue, we should first prepare the necessary environment for Umami:

• A server with Node.js 12 or newer - we are going to use vercel
• A database (MySQL or Postgresql) - we are going to use supabase

Setup Database

Before getting to Umami itself, let's create a database on supabase.

Supabase is an open-source alternative to Firebase, a collection of tools that helps developers build projects more quickly by automatically handling a whole lot of the behind-the-scenes work and wiring.

So let's just jump right into it!.

Create Supabase Account

Let's create an account on Supabase, and then initialize a New Project.

Supabase will ask for some information, we need to fill in the fields and then click Create New Project.

We will only use the database tool, so we need to focus more on it.

Fill in the forms fields based on your personal preferences, and then select the closest region to your area in the form field, in my case, Singapore is the closest region.

Configuring Schema

We need to configure the database schema on the supabase project.

On the project dashboard, there is a tool that helps us create a new query on the database, let's go ahead to the sidebar menu, and select SQL Editor.

Let's copy and paste this code on the query field, and then click run to run the query.

The query simply creates tables and wires up our database schema.

Installing Umami

The next step is quite easy, we only need to setup some frontend environment and deploy umami to vercel.

Make sure you have a vercel and github account.

Setup And Deployment

We need to set up the Umami app on vercel, and then deploy it.

But first, we need the Postgres Connection String, let's go back to our supabase project, search for settings, and click the Database menu on the left side.

Scroll down and search for Connection string, there would be a string that contains the database connection URL.

As we are using vercel to deploy our Umami app, we need to use the URI connection, the URI string should be like this:

# PostgreSQL connection URI
"postgresql://postgres:[YOUR-PASSWORD]@db.********.*******.co:****/postgres"

But remember to modify the URI, and change the [YOUR-PASSWORD] to your project password.

Keep the URI secret!

Lets' go ahead and start deploying our umami app, fork this repository, and then go to vercel.

From the dashboard, there is a New Project button to create a new project, click to create a new project, choose the umami repository we've forked before.

Before we click the Deploy button, we need to configure the Environment Variable, expand the Environment Variables section.

The first Environment Variable is DATABASE_URL, we need to fill in the value field with the URI string we just copied from our supabase project.

The second Environment Variable is HASH_SALT, it's just a random string, we can use this website to generate a random string, and then paste it to the value field.

Everything is ready, click the Deploy button to deploy the Umami app.

Change Umami Password

The app was deployed, and we can visit the app now, the domain usually would act as a subdomain of vercels' domain with our repository name, followed by vercel.app, e.g: https://repo-name.vercel.app.

And then we can change the password of the Umami app, the default password umami gave us is:

username: 'admin'
password: 'umami'

Login to the umami app, and then click Settings -> Profile, there is a buton on the top-right of the tab, and click change password button.

Linking Umami To Our Website

This is not finished yet, the last step is to link the Umami app to our website, so that umami can track our website.

We need to go to settings -> websites and add the website that we want to track, there will be a modal form asking for the websites' name and the websites' domain.

The name fields are the name of our website, we can name it whatever we want, fill in the domain field with your website's domain that you want to monitor, e.g: rizkicitra.dev, and click save.

The Enable share URL field is optional, this will let people could see our website traffic.

The website is then saved, and the next step is to get the tracking code, let's head over to the Settings -> Websites and click the link button to get the tracking code, the code should be like this:

<script
  async
  defer
  data-website-id="some-random-string-or-the-websites-id-here"
  src="https://the-umami-you-deployed.com/umami.js"
></script>

The tracking code is an embedded script that we can use to track our website.

<!DOCTYPE html>
<html>
  <head>
    <!-- other stuff... -->
    <script
      async
      defer
      data-website-id="some-random-string-or-the-websites-id-here"
      src="https://the-umami-you-deployed.com/umami.js"
    ></script>
    <!-- other stuff... -->
  </head>

  <body>
    <!-- body section -->
  </body>
</html>

Head over to our website's codebase, and paste the script tag inside the head section of the website and we're set.

A Little Notes

If you are developing a website based on a JavaScript framework which is NEXT.js, I recommend you to embed the script on the _document.tsx file, and embed the script conditionally.

This would prevent umami to track the website when you are developing the app on your local computer, like the following example below:

// _document.tsx
import Document, { Head, Html, Main, NextScript } from 'next/document'

export default class CustomDocument extends Document {
  render() {
    return (
      <Html lang='en-US'>
        <Head>
          {/* other stuff here... */}

          {/* if the environment is in production,
          embed the script, otherwise do nothing at all */}
          {process.env.NODE_ENV === 'production' && (
            <script
              async
              defer
              data-do-not-track='true'
              data-website-id='6daf05f5-92d2-430f-9cdd-1801014260da'
              src='https://umami.rizkicitra.dev/umami.js'
            />
          )}
          {/* other stuff here... */}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

Closing

That's all folks, the above setup can be used for any project, you just need to focus on setting up umami and deploying it.

And then grab the embed script, thank you for reading this blog, wish you a good day, and see you soon.