Analytics is the process of collecting and analyzing data about how visitors interact with your website. This information is crucial because it allows you to make informed decisions to improve your website.

Google Analytics is a great choice but there could be data privacy as well as GDPR compliance concerns.

When choosing an analytics tool, it's important that it:

Umami Analytics checks all these boxes.

Umami Analytics : An open source analytics solution

Umami Analytics is a simple, fast, and privacy-focused tool that lets you track website usage without compromising user privacy. It is an open-source alternative to Google Analytics. A big plus is that Umami analytics is GDPR (General Data Protection Regulation) compliant.

There are two options to use UMAMI analytics

In this article we are going to explore self hosting option. We are going to use Supabase (free tier plan) for database (postgres) and Vercel (free tier/hobby plan) for hosting Umami.

Let us dive into how to self host Umami analytics using Vercel + Supabase for free

1. Create new project in Supabase

2. Initial Configuration for Supabase

3. Fork UMAMI on github

4. Deploy on Vercel

DATABASE_URL = postgres://[user]:[password]@aws-0-[aws-region].pooler.supabase.com:6543/postgres?**pgbouncer=true&connection_limit=1**
DIRECT_DATABASE_URL = postgres://[user]:[password]@aws-0-[aws-region].pooler.supabase.com:**5432**/postgres

Important!!

💡 DATABASE_URL is same as the Connection Url copied from supabase (in step 2) but you have to add ?pgbouncer=true&connect_timeout=1 at the end of Url

💡 DATABASE_URL is same as the Connection Url copied from supabase (in step 2) but you have to replace the port from 6543 to 5432

5. Resolving Error “The database Schema is not empty”

  1. If you have a prisma/migrations folder, delete, move, rename, or archive this folder.

  2. Run the following command to create a migrations directory inside with your preferred name. This example will use 01_init for the migration name:

     mkdir -p prisma/migrations/01_init
    

  3. Generate a migration and save it to a file using prisma migrate diff

     npx prisma migrate diff \
     --from-empty \
     --to-schema-datamodel prisma/schema.prisma \
     --script > prisma/migrations/01_init/migration.sql
    

  4. Run the prisma migrate resolve command for each migration that should be ignored:

     npx prisma migrate resolve --applied 01_init
    

    This command adds the target migration to the _prisma_migrations table and marks it as applied. When you run prisma migrate deploy to apply new migrations, Prisma Migrate:

    1. Skips all migrations marked as 'applied', including the baseline migration

    2. Applies any new migrations that come after the baseline migration

6. Login to Umami

username : admin
password : umami

7. Configure your website for analytics tracking

Name : provide any name of your choice
Domain : your [website](https://www.invoizly.com) domain (eg. invoizly.com) 

8. Add tracking code to your project

In Next.JS projects to load a third-party script for multiple routes, import next/script and include the script directly in your layout component:

import Script from 'next/script'
 
export default function Layout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
		<html lang="en" className="dark">
      <body className={cn(`${inter.className} antialiased`)}>
	      <Navbar />
        {children}
        <Footer />
      </body>
      <Script 
	      defer 
	      src="https://[your-analytics-app].vercel.app/script.js" 
	      data-website-id="xxxx-xxx-xxxx-xxxx-xxxxx" 
	    />
    </>
  )
}

After adding the Sript in your root layout, deploy your app and visit your web page. you will be able to track the visits on your analytics dashboard page.

Conclusion

Hope with help of this article you will be able to set up analytics for your application quickly and easily, without relying on third-party services. Since Vercel and Supabase both provides generous free tier, you can run your analytics for free in the initial days while being GDPR compliant.

About Invoizly

Invoizly is all about making invoicing easy and free. With Invoizly, you can quickly create high-quality, customizable invoices that look professional. It’s designed to be super user-friendly, so you can focus on your business instead of getting bogged down in paperwork.