Dari Error ke Data: Panduan Praktis Memasang Google Analytics di Next.js
Iwan Efendi
Setiap pemilik situs web pasti ingin tahu performa kontennya. Berapa banyak pengunjung yang datang? Halaman mana yang paling populer? Dari mana mereka berasal? Jawaban atas pertanyaan-pertanyaan ini biasanya datang dari satu nama besar: Google Analytics. Namun, mengintegrasikan alat sekuat ini ke dalam kerangka kerja modern seperti Next.js terkadang bisa menjadi perjalanan yang penuh liku.
Artikel ini adalah studi kasus nyata dari perjuangan yang kami alami di irweb.info. Kami akan membagikan pendekatan-pendekatan yang kami coba, error yang kami hadapi, dan solusi akhir yang terbukti paling stabil dan andal.
Pendekatan Pertama: Menggunakan Firebase SDK
Karena proyek kami sudah menggunakan Firebase, pendekatan pertama yang paling logis adalah memanfaatkan integrasi bawaan melalui Firebase SDK. Logikanya sederhana: inisialisasi Firebase di aplikasi kita, lalu panggil getAnalytics(app). Kelihatannya mudah, bukan?
Kami mencoba mengimplementasikannya di dalam komponen Providers yang ditandai dengan 'use client'. Namun, kami langsung dihadapkan pada serangkaian error yang membuat frustrasi:
FirebaseError: Missing App configuration value: "projectId"
Error ini muncul karena konfigurasi Firebase (termasuk `projectId`, `apiKey`, dll.) tidak tersedia di sisi klien pada saat inisialisasi. Kami mencoba berbagai cara untuk menyelesaikannya:
- Menggunakan variabel lingkungan (
process.env.NEXT_PUBLIC_...). - Membuat file
.env.local. - Memindahkan logika ke dalam
useEffect.
Setiap solusi tampaknya hanya mengarah ke error baru atau variasi dari error yang sama. Jelas bahwa pendekatan ini, meskipun secara teoretis benar, ternyata rapuh dan sensitif terhadap cara Next.js mengelola variabel lingkungan dan rendering komponen. Kami menghabiskan banyak waktu untuk debugging tanpa hasil yang memuaskan.
Titik Balik: Kembali ke Dasar
Setelah menghadapi jalan buntu, kami memutuskan untuk mundur dan memikirkan kembali tujuan utama kami. Kami tidak memerlukan semua fitur Firebase SDK di sisi klien; kami hanya butuh Google Analytics. Apa cara paling langsung dan andal untuk memasang Google Analytics di situs web mana pun?
Jawabannya adalah dengan menggunakan Global Site Tag (gtag.js) yang disediakan langsung oleh Google.
Solusi Akhir: Menggunakan Komponen Script Next.js
Next.js menyediakan komponen bawaan yang dioptimalkan untuk menyisipkan skrip pihak ketiga seperti gtag.js. Komponen ini adalah Script. Pendekatan ini jauh lebih bersih dan tidak rentan terhadap masalah inisialisasi SDK.
Berikut adalah langkah-langkah implementasi akhir yang berhasil:
Temukan Measurement ID Anda
Masuk ke dasbor Google Analytics Anda dan temukan ID Pengukuran (Measurement ID). Formatnya akan terlihat seperti
G-XXXXXXXXXX.Modifikasi File `layout.tsx`
Buka file layout root Anda di
src/app/layout.tsx. Ini adalah tempat terbaik untuk menempatkan skrip yang harus ada di setiap halaman.Tambahkan Komponen Script
Impor komponen Script dari
next/scriptdan tambahkan dua komponen Script di dalam `RootLayout`. Satu untuk memuat skrip `gtag.js` secara eksternal, dan satu lagi untuk inisialisasi skrip secara inline.Berikut adalah cuplikan kode akhir di
src/app/layout.tsx:import Script from 'next/script';
const GA_MEASUREMENT_ID = 'G-QZXNZKRDK5'; // Ganti dengan ID Anda
export default function RootLayout({ children }) { return (
{/* Muat skrip gtag.js dari Google /} <Script async src={https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}} /> {/ Inisialisasi dataLayer dan konfigurasikan gtag */} <Script id="google-analytics" dangerouslySetInnerHTML={{ __html:window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '${GA_MEASUREMENT_ID}');, }} /> {children} ); }Verifikasi
Setelah deploy, buka situs Anda dan periksa dasbor "Realtime" di Google Analytics. Anda seharusnya akan mulai melihat kunjungan Anda tercatat dalam beberapa menit.
Kesimpulan
Perjalanan ini adalah pengingat penting bahwa solusi yang paling terintegrasi (seperti Firebase SDK) belum tentu merupakan solusi terbaik untuk setiap kasus penggunaan. Terkadang, kembali ke metode dasar yang telah teruji—seperti menggunakan gtag.js langsung—adalah cara yang paling efisien dan stabil. Dengan komponen
