Cara Instalasi Umami di Vercel dan Supabase (100% Berhasil) - Nayaka Yoga Pradipta

Cara Instalasi Umami di Vercel dan Supabase (100% Berhasil)

Senin, 9 Des 2024

Dulu saya pakai Google Analytics (GA), tapi performa website jadi lambat, dan datanya nggak 100% aman. Umami jadi alternatif karena self-hosted, nggak mengganggu kecepatan website, dan fiturnya nggak kalah lengkap.

Dalam tutorial ini, saya akan memandu kamu cara install Umami dengan Vercel (hosting) dan Supabase (database) - 100% gratis!

Apa itu Umami?

Umami adalah web analytics yang:

  • ✅ Open source
  • ✅ Privacy-friendly (no cookies)
  • ✅ Ringan (~2KB script)
  • ✅ Self-hosted
  • ✅ Simple dan clean UI

Prasyarat

  • Akun GitHub
  • Akun Vercel (gratis)
  • Akun Supabase (gratis)

Step 1: Setup Database di Supabase

1.1 Buat Project Baru

  1. Buka supabase.com
  2. Login dengan GitHub
  3. Klik “New Project”
  4. Isi detail:
    • Name: umami-analytics
    • Database Password: (generate strong password, simpan!)
    • Region: pilih yang terdekat
  5. Klik “Create new project”

1.2 Dapatkan Connection String

  1. Pergi ke Settings → Database
  2. Scroll ke Connection string
  3. Pilih tab URI
  4. Copy connection string
  5. Ganti [YOUR-PASSWORD] dengan password yang kamu buat tadi

Format:

postgresql://postgres.[project-id]:[password]@aws-0-[region].pooler.supabase.com:6543/postgres

Step 2: Fork Repository Umami

  1. Buka github.com/umami-software/umami
  2. Klik Fork
  3. Biarkan default settings
  4. Klik Create fork

Step 3: Deploy ke Vercel

3.1 Import Project

  1. Buka vercel.com
  2. Klik Add New → Project
  3. Import repository umami yang sudah di-fork
  4. Klik Import

3.2 Configure Environment Variables

Sebelum deploy, tambahkan environment variables:

KeyValue
DATABASE_URLConnection string dari Supabase
HASH_SALTRandom string (bisa generate di random.org)

3.3 Deploy

  1. Klik Deploy
  2. Tunggu proses build (sekitar 2-3 menit)
  3. Setelah selesai, klik Visit untuk buka dashboard

Step 4: Login ke Umami

Default credentials:

  • Username: admin
  • Password: umami

⚠️ Penting: Segera ganti password setelah login!

  1. Login dengan default credentials
  2. Klik Settings → Profile
  3. Ganti password

Step 5: Tambahkan Website

  1. Klik Settings → Websites
  2. Klik Add website
  3. Isi:
    • Name: Nama website kamu
    • Domain: Domain website (tanpa https://)
  4. Klik Save

Step 6: Pasang Tracking Script

  1. Di halaman Websites, klik Edit pada website yang baru dibuat
  2. Klik tab Tracking code
  3. Copy script
<script 
  async 
  src="https://your-umami-domain.vercel.app/script.js" 
  data-website-id="your-website-id"
></script>

Untuk Next.js

Di app/layout.tsx:

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          async
          src="https://your-umami.vercel.app/script.js"
          data-website-id="your-website-id"
        />
      </body>
    </html>
  )
}

Untuk Astro

Di src/layouts/Layout.astro:

<script 
  async 
  src="https://your-umami.vercel.app/script.js" 
  data-website-id="your-website-id"
></script>

Step 7: Verifikasi

  1. Buka website kamu
  2. Buka Umami dashboard
  3. Harusnya sudah ada 1 visitor (kamu!)

Troubleshooting

Data tidak muncul?

  1. Pastikan script sudah terpasang dengan benar
  2. Cek Console browser untuk error
  3. Pastikan domain di Umami sesuai dengan domain website

Error saat deploy?

  1. Pastikan DATABASE_URL format-nya benar
  2. Pastikan password tidak ada special character yang perlu di-escape

Kesimpulan

Dengan Umami, kamu bisa punya analytics yang:

  • Gratis (Vercel + Supabase free tier)
  • Privacy-friendly
  • Cepat dan ringan
  • Self-hosted

Selamat! Kamu sudah punya analytics sendiri 🎉

Ada pertanyaan? Reach out di Twitter @nayakayp!