Getting Started
Umami is a privacy-focused web analytics tool that tracks pageviews, events, and user behavior without using cookies or collecting personal data. Available as an open web service in Eyevinn Open Source Cloud, Umami gives you clear insights into how users interact with your app — all in a lightweight, self-hosted solution. This tutorial walks you through the steps to get started.
Prerequisites
- If you have not already done so, sign up for an Eyevinn OSC account
Step 1: Create a PostgreSQL database
To store the analytics data we will first create a PostgreSQL database. To create a PostgreSQL database navigate to the PostgreSQL service in the Eyevinn OSC web console. Click on the button "Create psql-db" and enter a name of the instance and a password.
Important when creating the database is to initiate it with the SQL ALTER SYSTEM SET wal_level = 'logical'; as this cannot be configured once the database instance is up and running.
Based on the IP and port the URI to your PostgreSQL database is postgres://postgres:umami@<IP>:<PORT>/postgres.
In our example it is postgres://postgres:umami@172.232.131.169:10505/postgres.
Step 2: Store connection URL as a secret
It is a good practice to store the database credentials as a secret and refer to it when creating an instance. Before we setup a Umami instance, we will create a secret where we will store the URI with credentials to the database. Navigate to the Umami service in Eyevinn Open Source Cloud web console. Go to the tab "Service Secrets" and click on "New Secret".
In our example it was postgres://postgres:umami@172.232.131.169:10505/postgres and we will store it in the a secret named dburl.
Step 3: Create Umami instance
Now we can create the Umami instance by going to the tab "My umamis" and click on "Create umamis".
We refer to the created secret in step 2 for the database connection string.
Click on the instance card when the status is green and "running".
Login using the following credentials:
username: admin
password: umami
Once you are logged in, navigate to settings and users to edit username and password so that you don't use Umami's default login credentials.
Step 4: Set up your website with Umami
Under settings, navigate to websites to set up tracking for your site.
Note that you should not add http/https in the url.
Once the website has been set up, press edit in the list of websites under settings
Navigate to tracking code, copy the code and paste it in the <head>...</head> section of your HTML. If you are using a Next.js app, you can place the code in your root layout.
You can also add the url and site ID as environment variables, if you want to be able to utilize the script for different environments. The url can be found within the script, which is the same url as your umami instance, ending it with /script.js. The site ID can found under details.
In our example the url is https://eyevinnlab-guide.umami-software-umami.auto.prod.osaas.io/script.js and the site ID is 5bddefd1-1d89-4a19-a895-44edee1e2d0d.
Your environment variables could then look something like this:
UMAMI_URL=https://eyevinnlab-guide.umami-software-umami.auto.prod.osaas.io/script.js
UMAMI_SITE_ID=5bddefd1-1d89-4a19-a895-44edee1e2d0d
And be used in the script like this:
const umamiUrl = process.env.UMAMI_URL;
const umamiSiteId = process.env.UMAMI_SITE_ID;
<html lang="en" className="dark">
<head>
<script defer src={`${umamiUrl}`} data-website-id={`${umamiSiteId}`} />
</head>
</html>
Once your code is up and running, you're ready to start exploring the full power of Umami.