Pasang Google Analytics 4 di Astro tanpa plugin berbayar.
Masuk untuk Mengikuti
Kamu perlu login terlebih dahulu untuk mengikuti penulis ini dan mendapatkan notifikasi artikel terbaru.
Sebagai penulis blog atau developer, hal pertama yang paling ditunggu setelah susah payah deploy web buatan sendiri adalah melihat ada berapa banyak pengunjung yang mengklik tautan kita. Saya masih ingat perasaan berdebar ketika melihat ada 1 trafik “Realtime” masuk ke situs pertama yang saya bangun.
Masalahnya, untuk website statis modern yang super cepat seperti Astro, integrasi kode tracking sering kali membingungkan. Apalagi, kita tidak ingin skrip dari third-party malah membuat loading web jadi sangat lambat. Di sinilah Google Analytics 4 (GA4) dikonfigurasi dengan cara yang optimal.
Mengapa Tracking GA4 Ini Penting
Mungkin Anda berpikir, “Saya cuma nge-blog iseng, ngapain repot pasang Analytics?” Nah, percaya atau tidak, saya dulu juga berpikir demikian, sampai akhirnya saya kebingungan sendiri memvalidasi apakah artikel yang saya tulis itu benar-benar dibaca orang atau cuma ditelan void.
Menanamkan GA4 ini memberikan kita keuntungan nyata:
- Memahami Audiens: Anda jadi tahu pengunjung Anda pakai browser apa, dari negara mana, dan pakai device (HP/Laptop) apa.
- Validasi Strategi Konten: Anda bisa melihat artikel spesifik mana yang durasi bacanya (Average Engagement Time) paling lama. Ini sinyal hijau bahwa artikel jenis tersebut disukai algoritma Google!
- Syarat Monetisasi Lanjutan: Hampir semua platform sponsor atau agensi iklan premium (selain AdSense) akan meminta screenshot dasbor Analytic real-time Anda sebelum mereka mau membayar review produk.
Persiapan Sebelum Mulai
Pastikan Anda sudah memiliki:
- Akses ke akun Google (Gmail)
- Repositori projek web Astro Anda di komputer lokal (localhost)
- Koneksi internet untuk masuk ke Dasbor Google Analytics
Langkah-langkah Tutorial
Buat Akun Properti Google Analytics
Pertama, kunjungi halaman Google Analytics dan pastikan Anda sudah login. Jika belum punya akun sama sekali, klik Start Measuring dan isi nama web Anda (misal: Sitemas Blog).
Di tahap pembuatan aliran data (Data Stream), pilih opsi Web lalu isi URL website Anda secara penuh tanpa tanda garis miring (/) di ekor. Anda akan mendapatkan serangkaian huruf/angka yang unik, yakni Measurement ID yang diawali dengan kode G- (Contoh: G-XYZ123ABC).
Pasang Script GA4 di Layout Utama Astro
Buka projek Astro Anda di editor (VS Code, Cursor, Zed, dll). Karena kita ingin agar pelacakan berjalan di seluruh halaman, kita wajib menanamkan kodenya di Layout Utama.
Biasanya file ini bernama BaseLayout.astro atau Layout.astro.
Tulis Logika Asynchronus
Saya akan membagikan kode skrip rahasia yang tidak akan merusak performa Lighthouse Anda ke angka merah, karena ini dieksekusi secara asinkron (async). Tempel tepat di dalam komponen <head> pada Astro Layout.
Contoh Kode Integrasi Layout
---
// Taruh variabel ID ini di blok frontmatter atas
const GA_MEASUREMENT_ID = "G-XYZ123ABC";
// Kita cegah pelacakan terekam di localhost!
const isProd = import.meta.env.PROD;
---
<html lang="id">
<head>
<!-- ... tag meta SEO lainnya ... -->
{isProd && (
<>
<script is:inline async src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}></script>
<script is:inline define:vars={{ GA_MEASUREMENT_ID }}>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', GA_MEASUREMENT_ID);
</script>
</>
)}
</head>
<body>
<!-- <slot /> Anda -->
</body>
</html>Kompatibilitas Khusus View Transitions
Jika dari awal situs Astro Anda menggunakan View Transitions (<ViewTransitions />) untuk mendapatkan efek navigasi transisi tanpa-loading layaknya SPA (Single Page Application), skrip standar di atas tidak akan berjalan sempurna.
Navigasi antar-halaman tidak me-reload tag <head>, sehingga pageview artikel berikutnya gagal terekam. Anda wajib melakukan hooking ke dalam custom event astro:page-load:
<script is:inline define:vars={{ GA_MEASUREMENT_ID }}>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
// Mengikat pageview ke event rendering khusus Astro
document.addEventListener('astro:page-load', () => {
// Opsional: Anda bisa console.log di sini untuk mode debungging
gtag('config', GA_MEASUREMENT_ID, {
page_path: window.location.pathname,
});
});
</script>Saya menggunakan import.meta.env.PROD. Trik ini mencegah Google me-rekam aktivitas Anda ketika mengutak-atik localhost melalui pnpm dev. Skrip tracking cuma akan diinjeksikan saat situs benar-benar sudah live di production server seperti Cloudflare Pages atau Vercel.
Jika target pembaca utama Anda berasal dari region Uni Eropa (EU), Anda wajib menempel modul persetujuan Cookie Consent untuk menghindari masalah hukum GDPR. Namun jika target cuma Indonesia, saat ini ini belum terlalu dirisaukan secara teknis.
Pertanyaan yang Sering Ditanyakan
Berapa lama traffic mulai muncul di Dashboard GA?
Untuk laporan standar (Reports) biasanya memakan 24 hingga 48 jam masa sinkronisasi data dari Google. Namun, Anda bisa memvalidasi sukses atau tidaknya pemasangan kode secara instan lewat menu 'Realtime'.
Kenapa saya tidak disuruh pakai package npm/komponen pihak ketiga?
Astro lebih mencintai kode murni bawaan (*Vanilla JS*). Terkurung dengan library eksternal cuma buat masukin skrip analytics justru membuang kelebihan Astro dalam kontrol *overhead* JavaScript.
Kesimpulan
Selamat! Anda baru saja memeluk teknologi pelacakan pamungkas tanpa merelakan kecepatan website. Memisahkan logika eksekusi berdasarkan lingkungan environment (menggunakan PROD var) adalah rahasia best practice yang tidak banyak diungkap panduan umum.
Jika situs tidak kunjung mendapatkan angka trafik, cobalah berkunjung ke web sendiri menggunakan smartphone dengan paket data yang bersih, lalu intip halaman “Realtime” Anda.
Sudah Siap Terima Traffic?
Jika analytics sudah tepasang, ini saatnya mengoptimasi mesin pencari website Anda.
Komentar