Published on

Setting Up Umami Analytics Using Supabase and Vercel

Authors
  • avatar
    Name
    Rosa Tiara
    Twitter

Introduction

Umami Analytics

Umami is an open-source and simple web analytics software that runs on PostgreSQL and Next.js API routes. By using umami, we are able to track events, referring pages, session durations, view counts, and unique visitor counts for your website. Umami is privacy-focused and only collects the metrics you care about. Such a great alternative for Google Analytics.

Supabase

Supabase is an open-source alternative to Firebase that provides all the backend services you need to build a product!

Without further ado, let's get started!

Getting Started

Account Preparation

First of all, make sure you already have a Github, Vercel, and Supabase account.

If you've already have a Github account but don't have Vercel and/or Supabase yet, you can easily sign up to them by clicking the "Sign in with Github" button.

Setting Up A Project in Supabase

  1. Log in to Supabase
  2. Go to the main dashboard
  3. Click the New Project button
new-project-supabase
  1. Fill out the form based on your preferences and make sure you also select the closest region from your location.
fill-the-form

  1. When you're done, click the Create new project button

  2. While waiting for the project to be set up, go to the SQL editor section on the left side.

sql-editor

  1. Click New query and then head to Umami's official Github Repository, copy, and paste the sql schema query into your newly-created query.

  2. Click the RUN button on the right side. It should show a "Success. No rows returned" message to indicate that you ran the right query.

Effortlessly Deploying Umami on Vercel

  1. Go to this link and click the blue Deploy button.

  2. Fill in the repository name, check/uncheck git repository privacy based on your preference, and click Create. DO NOT click the Deploy button yet.

  3. Get back to Supabase, and go to the Settings menu.

settings
  1. Click Database, scroll down till you find the Connection string section, and go to the URI tab.
uri

  1. Click Copy, and paste it to the DATABASE_URL in your Vercel project configuration. Make sure to change YOUR_PASSWORD in the URI link with the password you created for this project as shown in step 4.

  2. For the HASH_SALT field, fill it with a random string. You can also use an online tool like password generator to help you.

config vercel
  1. Click Deploy.

Congratulations! 🥳 you have successfully deployed Umami! Now it's time for configuration and add Umami to your website.

Umami Configuration

  1. Visit the deployed project and log in to Umami. Fill the username with admin and the password with umami (this is configured by default, you can change this later).

  2. To change your password, go to Settings -> Profile -> click Change password

change password

  1. Fill the current password with umami, set the new password as your preferences, and click Save.

  2. To add Umami to your website, go to the Website section and click Add website

add-website
setting up website

Note: leaving the Enable share URL checked means that your website's analytics dashboard link is accessible to everyone.

  1. When you're done, click the Get tracking code icon and paste it to your website project folder. Since I'm using Next.js for my website, I paste it in the _document.js file (inside the <head> tag).
get tracking code
adding tracking code to document

That's all :) You have successfully added Umami analytics to your website. Hope this helps! Cheers!