post-image

Cara Setup Umami Dengan Vercel dan Supabase

23 Oktober 2022

Tutorial

Read in English
Share on Twitter

Table of contents

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.

Umami Web

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.

Supabase New Project

Juga, pilih region yang paling dekat dengan domisili kalian.

Supabase New Project Form

Sesudah itu, kalian bisa menuju SQL Editor pada project Supabase kalian.

SQL Editor

Nah di sini kalian bisa cope SQL Schema query dari Umami’s Github Repository. Setelahnya, kalian bisa run query yang telah di-copy tadi.

Query

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.

Deploy to Vercel

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.

Connection String

Configure in Vercel

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.

Change Domain

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.

Umami 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.

Umami Tracking Code

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.

NextJS Integration

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)

Back To Articles Page
Home
Projects
Articles
About Me