Pasang Google Analytics, terima cookie banner. Pasang Mixpanel, bayar mahal begitu traffic naik. Pasang Plausible, dapat traffic overview yang bagus tapi tanpa funnel atau retention. Itulah dilema yang sering dihadapi developer ketika memilih platform analitik untuk aplikasi web mereka.
OpenPanel hadir untuk memecahkan dilema itu. Platform ini adalah alternatif open source yang menggabungkan kemudahan Plausible untuk web analytics dengan kemampuan Mixpanel untuk product analytics — semuanya dalam satu alat, bisa dijalankan sendiri di server, dan cookieless by default.
Apa yang Membedakan OpenPanel
Kebanyakan alat analitik memaksa kita memilih: mau yang simpel tapi terbatas, atau yang powerful tapi kompleks dan mahal. OpenPanel menolak dikotomi itu dengan menyatukan kedua pendekatan.
Dari sisi web analytics, OpenPanel merekam pageviews, referrer, lokasi pengunjung, dan durasi sesi. Dari sisi product analytics, ada event tracking kustom, funnel, retention chart, cohort analysis, dan profil pengguna individual — fitur yang biasanya hanya ada di Mixpanel atau Amplitude.
| Fitur | Plausible | Mixpanel | OpenPanel |
|---|---|---|---|
| Pageviews & traffic | Ya | Terbatas | Ya |
| Event tracking kustom | Terbatas | Ya | Ya |
| Funnel analysis | Tidak | Ya | Ya |
| Retention chart | Tidak | Ya | Ya |
| User profiles | Tidak | Ya | Ya |
| Self-hosting | Ya (ribet) | Tidak | Ya (mudah) |
| Cookieless | Ya | Tidak | Ya |
| Harga mulai | $9/bln | $20/bln | $2.50/bln |
Satu hal lagi yang menonjol: OpenPanel berjalan tanpa cookie secara default, artinya tidak perlu consent banner untuk memenuhi GDPR. Data tetap milik kita, tidak ada vendor lock-in.
Cara Self-Host OpenPanel di VPS
Self-hosting OpenPanel tidak memerlukan konfigurasi yang rumit. Cukup siapkan VPS dengan Ubuntu 24.04 (atau distro Linux lain yang sudah ada Docker), kemudian jalankan tiga perintah berikut:
git clone -b self-hosting https://github.com/Openpanel-dev/openpanel
cd openpanel/self-hosting
./setupScript setup akan mendeteksi apakah Docker dan Node sudah terinstal. Jika belum, script akan menawarkan untuk menginstalnya secara otomatis. Setelah setup selesai, jawab beberapa pertanyaan konfigurasi (domain, port, dll), lalu jalankan:
./startOpenPanel akan berjalan via Docker Compose dan bisa diakses di domain yang sudah dikonfigurasi. Untuk kebutuhan produksi, Hetzner CPX21 (4 vCPU, 8 GB RAM) sudah cukup untuk menangani jutaan event per bulan.
Setelah setup, akun pertama yang mendaftar akan otomatis menjadi admin. Registrasi akan tertutup setelah itu. Jika perlu membuka registrasi lagi, tambahkan ALLOW_REGISTRATION=true di file environment.
Beberapa script manajemen yang berguna:
./stop— matikan semua service./update— pull update terbaru dari repository./rebuild <service>— rebuild service tertentu tanpa downtime total
Integrasi dengan Next.js
Setelah instance OpenPanel berjalan, saatnya menghubungkan aplikasi. Untuk Next.js, instal package resminya:
npm install @openpanel/nextjsTambahkan komponen OpenPanelComponent di root layout agar tracking berjalan otomatis di seluruh halaman:
// app/layout.tsx
import { OpenPanelComponent } from '@openpanel/nextjs';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="id">
<body>
<OpenPanelComponent
clientId={process.env.NEXT_PUBLIC_OP_CLIENT_ID!}
trackScreenViews={true}
trackOutgoingLinks={true}
/>
{children}
</body>
</html>
);
}clientId bisa didapat dari dashboard OpenPanel setelah membuat project baru. Jika menggunakan instance self-hosted, tambahkan juga apiUrl yang menunjuk ke server sendiri:
<OpenPanelComponent
clientId={process.env.NEXT_PUBLIC_OP_CLIENT_ID!}
apiUrl="https://analitik.domainku.com/api"
trackScreenViews={true}
/>Tracking Event Kustom
Untuk melacak aksi pengguna yang lebih spesifik — misalnya klik tombol, submit form, atau pembelian — gunakan hook useOpenPanel di client component:
// components/checkout-button.tsx
'use client';
import { useOpenPanel } from '@openpanel/nextjs';
export function CheckoutButton({ planId }: { planId: string }) {
const op = useOpenPanel();
const handleCheckout = () => {
op.track('checkout_started', {
plan_id: planId,
source: 'pricing_page',
});
// lanjut ke proses checkout
};
return (
<button onClick={handleCheckout}>
Mulai Berlangganan
</button>
);
}Setiap event bisa membawa properties tambahan sebagai objek di parameter kedua. Properties ini nantinya bisa digunakan sebagai filter di dashboard saat membangun funnel atau analisis segmentasi.
Menghubungkan Event ke Profil Pengguna
Agar event yang direkam bisa dihubungkan ke pengguna yang login, panggil identify setelah autentikasi berhasil:
// app/auth/callback/page.tsx
'use client';
import { useOpenPanel } from '@openpanel/nextjs';
import { useEffect } from 'react';
export default function AuthCallbackPage() {
const op = useOpenPanel();
useEffect(() => {
// diasumsikan session sudah tersedia
op.identify({
profileId: 'usr_12345',
firstName: 'Budi',
lastName: 'Santoso',
email: 'budi@contoh.com',
properties: {
plan: 'pro',
joined_at: '2026-01-15',
},
});
}, []);
return <div>Mengalihkan...</div>;
}Setelah identify dipanggil, semua event berikutnya dari browser yang sama akan terhubung ke profil budi@contoh.com. Di dashboard OpenPanel, kita bisa melihat journey lengkap pengguna tersebut — halaman yang dikunjungi, event yang dipicu, hingga kapan terakhir aktif.
Tracking di Server Component
Untuk event yang perlu direkam dari sisi server — misalnya ketika webhook masuk atau saat background job selesai — instantiate SDK langsung tanpa hook:
// lib/analytics.ts
import { OpenPanel } from '@openpanel/nextjs';
export const serverAnalytics = new OpenPanel({
clientId: process.env.OP_CLIENT_ID!,
clientSecret: process.env.OP_CLIENT_SECRET!,
apiUrl: process.env.OP_API_URL,
});// app/api/webhook/route.ts
import { serverAnalytics } from '@/lib/analytics';
export async function POST(request: Request) {
const payload = await request.json();
await serverAnalytics.track('payment_received', {
amount: payload.amount,
currency: payload.currency,
plan: payload.plan_id,
});
return Response.json({ ok: true });
}clientSecret wajib ada untuk server-side tracking karena request ini tidak melewati browser — OpenPanel perlu memverifikasi bahwa event benar-benar datang dari server yang sah.
Jangan gunakan clientSecret di client component atau kode yang diekspos ke browser. Variabel ini hanya boleh ada di server-side code (tanpa prefix NEXT_PUBLIC_).
Membangun Funnel di Dashboard
Salah satu fitur paling berguna OpenPanel adalah funnel builder. Setelah beberapa event terekam, buka dashboard, pilih menu Funnels, lalu susun langkah-langkah konversi yang ingin dianalisis.
Misalnya untuk mengukur konversi dari pengunjung baru ke langganan berbayar:
page_view— halaman/pricingcheckout_started— event yang kita track di contoh sebelumnyapayment_received— event dari webhook
Dashboard akan menampilkan berapa persen pengguna yang lolos dari tiap langkah, di mana mereka drop off, dan berapa lama rata-rata waktu antar langkah. Informasi ini jauh lebih actionable dibanding sekadar melihat pageviews.
Kesimpulan
OpenPanel mengisi celah yang selama ini tidak terlayani dengan baik: platform analitik yang cukup powerful untuk product analytics, cukup simpel untuk digunakan sehari-hari, dan cukup terjangkau (atau bahkan gratis jika self-hosted) untuk proyek dengan budget terbatas. Jika sudah familiar dengan Docker, setup self-hosting-nya tidak akan butuh lebih dari 10 menit. Untuk yang belum siap self-host, tier cloud mereka mulai dari $2.50 per bulan sudah mencakup 5.000 event — cukup untuk memulai dan merasakan manfaatnya sebelum memutuskan skala lebih jauh.
