Cara Setup Umami Dengan Vercel dan Supabase

Disclaimer

Di artikel ini, saya akan fokus untuk melakukan self-host and setup Umami, lalu memasangkannya di project yang menggunakan Next.js. Teman-teman pembaca bisa menyesuaikan kembali apabila ingin menerapkannya di project yang berbeda.

Introduction

Seringkali, ketika kita develop suatu project website dan ingin memasangkan web analytic tool, yang terpikirkan rata-rata adalah Google Analytics. Tetapi seperti yang umumnya kita tahu, tool ini memiliki kelemahan yaitu ketika ada pengujung website kita yang memakai AdBlocker maka tool ini tidak bisa bekerja sehingga datanya tidak akurat. Belum lagi memang ada isu privasi yang sering didebatkan perihal tool ini.

Oke langsung ke intinya saja ya. Jadi apa alternatifnya? Nah di sini saya rekomendasikan Umami. Kenapa? Dalam dokumentasi resminya, Umami merupakan tool yang open source dan diklaim privacy-focused dibandingkan Google Analytics.

Lalu bagaimana cara setup-nya? Nah di artikel ini saya akan bahas secara cepat cara setup Umami menggunakan Vercel dan Supabase.

Siapkan Akun Yang Diperlukan

Pertama-tama, jelas kamu harus punya akun Github karena ini akan digunakan sebagai repository utama kita saat self-host Umami.

Selain itu, kamu juga harus punya akun Vercel & Supabase.

Setup Supabase

Sekarang, login ke Supabase dan kamu akan redirect ke main dashboard, lalu click “New Project”. Silahkan isi form yang ada dengan data dan preferensi kalian ya.

Juga, pilih region yang paling dekat dengan domisili kalian.

Deploy ke Vercel

Kalian bisa dengan mudahnya deploy ke Vercel hanya dengan membuka Umami’s Docs (Running on Vercel section) dan klik “Deploy”. Lalu, kamu bisa pilih Github sebagai repository dan isi nama repository-nya sesuai preferensi kalian.

Ketika sudah sampai di tahap seperti gambar di bawah, kembali ke Supabase sebentar.

Di Supabase, silahkan ke menu Settings dan klik “Database” section. Lalu scroll ke “Connection String”. Pilih “URI” lalu copy & paste itu ke DATABASE_URL di Vercel settings kalian. Jangan lupa juga ubah “YOUR_PASSWORD” menjadi password database Supabase kalian.

Untuk field HASH_SALT, bisa pakai Password Generator untuk generate random string, lalu copy dari situ. Setelah itu kalian bisa klik tombol Deploy.

Jika kalian ingin ganti domainnya, kalian bisa ke project settings dan ke menu Domain, lalu klik tombol Edit.

Konfugurasi Umami

Nah sekarang kamu bisa buka halaman web Umami yang telah kamu deploy tadi. Default username nya adalah admin, dan passwordnya adalah umami. Kamu bisa ganti passwordnya di kemudian waktu. Bisa ke menu Settings lalu ke Profile section dan klik Change Password.

Memasangkan Umami ke Website Kalian

Di menu Settings, kalian bisa ke Website section, lalu klik Add Website. Nah di sini silahkan isi nama dan url web kalian dan jangan lupa enable “Share URL”.

Setelah menambahkan website di Umami, copy “Tracking Code”-nya.

Sebagai tahap terakhir, kalian bisa ke project folder kalian (project yang ingin kalian pasangkan Umami). Dalam hal ini project saya menggunakan Next.js dan saya paste code yang telah di-copy tadi di file _document.tsx.

Nah selesai deh, kalian tinggal deploy push commit terbaru dari project kalian ke repository masing-masing. Statistik di halaman dashboard Umami akan muncul dalam waktu kurang lebih 24 jam.

Closing

Kalian juga bisa terapkan cara ini ke project kalian yang lain tak hanya Next.js. Semoga bisa membantu. Kalau ada pertanyaan atau hal-hal yang ingin didiskusikan, bisa langsung tulis di kolom komentar ya.

Referensi: How to Setup Umami with Vercel and Supabase (by Jacob Bouchard)