Cara Menggunakan Google Analytics 4 di Blog Jekyll

Untuk tahu berapa banyak pengunjung blog kamu, dari mana mereka datang, artikel mana yang paling banyak dibaca, dan perangkat apa yang mereka gunakan — kamu butuh tool analitik. Google Analytics 4 (GA4) adalah solusi yang paling banyak dipakai dan tersedia gratis.

Di artikel ini kita bahas cara memasang Google Analytics 4 di blog Jekyll dengan cara yang bersih dan tidak memperlambat halaman.

Persiapan: Buat Property di Google Analytics

Sebelum memasang kode tracking, kamu perlu membuat property GA4 terlebih dahulu.

Langkah 1: Buka Google Analytics

Kunjungi analytics.google.com dan login dengan akun Google.

Langkah 2: Buat Property Baru

Klik ikon gear (⚙) di pojok kiri bawah untuk masuk ke Admin
Di kolom Property, klik Create Property
Isi nama property (misalnya: “Blog Kamu”)
Pilih timezone dan mata uang
Isi informasi bisnis (kategori, ukuran)
Klik Create

Langkah 3: Buat Data Stream

Setelah property dibuat, klik Data Streams → Add Stream
Pilih Web
Isi URL website dan nama stream
Klik Create stream

Langkah 4: Salin Measurement ID

Setelah stream dibuat, kamu akan mendapat Measurement ID dengan format G-XXXXXXXXXX. Simpan ID ini, kita akan memakainya di konfigurasi Jekyll.

Cara 1: Lewat `_config.yml` (Cara Paling Bersih)

Tambahkan ke `_config.yml`

google_analytics: G-XXXXXXXXXX

Buat File Include untuk GA4

Buat file _includes/google-analytics.html:

{% if site.google_analytics %}
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '{{ site.google_analytics }}');
</script>
{% endif %}

Sisipkan di Layout Default

Buka _layouts/default.html dan tambahkan include di dalam <head>:

<head>
  <meta charset="utf-8">
  <title>{{ page.title }}</title>
  ...

  {% include google-analytics.html %}
</head>

Cara 2: Hanya Aktif di Production

Agar GA tidak aktif saat development lokal (supaya data tidak tercampur dengan traffic pengujian), gunakan pengecekan environment:

{% if jekyll.environment == "production" and site.google_analytics %}
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '{{ site.google_analytics }}');
</script>
{% endif %}

Saat build untuk production, set environment variable:

JEKYLL_ENV=production bundle exec jekyll build

Di GitHub Actions atau Cloudflare Pages, tambahkan environment variable JEKYLL_ENV=production di pengaturan build.

Cara 3: Menggunakan Google Tag Manager (GTM)

Jika kamu juga ingin memasang tag lain (Facebook Pixel, hotjar, dll.) selain GA, lebih baik menggunakan Google Tag Manager sebagai pengelola semua tag.

Buat Container GTM

Kunjungi tagmanager.google.com
Buat akun dan container baru untuk website kamu
Dapatkan Container ID dengan format GTM-XXXXXXX

Buat File Include GTM

_includes/google-tag-manager.html:

{% if site.google_tag_manager %}
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','{{ site.google_tag_manager }}');</script>
<!-- End Google Tag Manager -->
{% endif %}

_includes/google-tag-manager-noscript.html:

{% if site.google_tag_manager %}
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ site.google_tag_manager }}"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
{% endif %}

Sisipkan di Layout

<head>
  {% include google-tag-manager.html %}
  ...
</head>
<body>
  {% include google-tag-manager-noscript.html %}
  ...
</body>

Di _config.yml:

google_tag_manager: GTM-XXXXXXX

Verifikasi GA4 Aktif

Setelah deploy, pastikan GA4 berfungsi:

Buka blog kamu di browser
Di Google Analytics, klik Reports → Realtime
Kamu seharusnya melihat setidaknya 1 active user (kamu sendiri)

Jika tidak muncul, cek:

Apakah ada adblocker aktif di browser kamu? (Adblocker biasanya memblokir GA)
Apakah Measurement ID sudah benar?
Apakah JEKYLL_ENV=production sudah diset?

Alternatif: Cloudflare Web Analytics

Jika blog kamu sudah di belakang Cloudflare, pertimbangkan Cloudflare Web Analytics sebagai alternatif yang lebih privacy-friendly:

Tidak menggunakan cookies
Tidak perlu banner consent GDPR
Tersedia gratis di semua plan Cloudflare
Dashboard terintegrasi di Cloudflare

Aktifkan di Cloudflare Dashboard → Analytics & Logs → Web Analytics → Add a site.

Kesimpulan

Memasang Google Analytics 4 di Jekyll hanya butuh beberapa baris kode. Kuncinya adalah menggunakan kondisi jekyll.environment == "production" agar data analytics tidak tercempur saat development lokal, dan menyimpan Measurement ID di _config.yml agar mudah dikelola dan tidak hardcoded di template.