Harnessing Umami: A Privacy-Centric Alternative to Google Analytics
Written on
Chapter 1: Overview of Umami
Umami is a privacy-oriented, open-source analytics tool that serves as an excellent substitute for Google Analytics. It enables website owners to monitor user interactions while safeguarding personal data. In this article, we will explore the steps to deploy Umami on your server using Netlify and Supabase at no cost.
Section 1.1: Forking the Umami Repository
To start, visit the Umami JS repository and click the "Fork" button located at the top right of the page. This action will create a personal copy of the project in your GitHub account, allowing you to modify it independently of the original.
After forking, you can rename your repository to something meaningful. This will help you keep track of the project and customize it to your preferences.
Section 1.2: Setting Up Supabase
To initiate a new project in Supabase, navigate to the Projects tab and click on "New Project." You'll need to assign a name to your database, set a secure password, and choose a region that is closest to your location. Once you've filled in these details, click "Create New Project."
Following the project creation, copy the connection string provided. Ensure to replace "your-password" with the actual password you set. For added security, append ?pgbounder=true to the end of the connection string. This will later be defined as an environment variable in Netlify.
Chapter 2: Running the Umami Application
After cloning the Umami repository locally, execute the migration command by running yarn install. Create a .env file containing the following information:
DATABASE_URL=//generated from supabase
HASH_SALT=
DATABASE_TYPE='postgresql'
Then, run the command npx prisma migrate deploy --schema="./db/postgresql/schema.prisma" to set up your database tables.
As discussed with the Umami Team via GitHub Issue #1703, future releases will incorporate the migration command within the build process, eliminating the need for manual execution by developers.
The first video titled Umami: The Open Source Google Analytics Alternative elaborates on the features and advantages of using Umami, showcasing its user-friendly interface and privacy-first approach.
Section 2.1: Deploying on Netlify
Log into your Netlify account and select "Import an Existing Project" from the top right corner. This option allows you to import projects from various Git providers such as GitHub, GitLab, or Bitbucket. For this example, we will use GitHub.
Utilize the search function to locate the Umami repository and select it. Keep the default settings for the build command and publish directory, then click on the "Deploy Site" button.
In the Site Settings tab, input the DATABASE_URL that you generated earlier from Supabase. Generate a random string for HASH_SALT to enhance security; this should be unique for each installation. Also, set DATABASE_TYPE to "postgresql."
To initiate deployment on Netlify, navigate to the Deploys tab and click the "Trigger Deploy" button. This action will commence the deployment process, and once completed, your site will be live.
The second video titled Umami | Self-Hosted Google Analytics Alternative for ReactJS/NextJS dives into how to seamlessly integrate Umami into React and NextJS applications, providing a comprehensive guide for developers.
Section 2.2: Accessing and Configuring Umami
To access Umami, go to the URL where your application is deployed and log in using "admin" as the username and "umami" as the password. If you wish to change the password, navigate to the Settings tab and select "Change Password." Enter your current password and your new password twice for confirmation, then click "Save."
To add a new website, click the "Add website" button located in the top right corner. Provide the name and domain for your website, and click "Save" to finalize the addition. The new website will now appear in your listing.
To retrieve the script for your added website, click on the code icon. This will provide you with the necessary script to embed in your HTML file. After adding the script, redeploy your project. Once the deployment is complete, you can view the analytics in the Umami dashboard.
I hope this guide has been helpful. For those interested in automatic deployment of React applications using GitHub Actions, be sure to check out my other blog post on that topic.