Analytics membantu Anda memahami pengunjung — dari mana mereka datang, konten apa yang populer, dan bagaimana mereka berinteraksi dengan website. Sitemas mendukung integrasi dengan Google Analytics 4 dan Plausible.

Perbandingan: GA4 vs Plausible

AspekGoogle Analytics 4Plausible
HargaGratis€9/bulan (atau self-host)
PrivacyMenggunakan cookiesCookie-free, GDPR compliant
Data ownershipGoogleAnda
ComplexityLearning curve tinggiSimple dashboard
FeaturesSangat lengkapEssential metrics
Script size~45KB~1KB
Cookie bannerDiperlukan (GDPR)Tidak perlu
Rekomendasi
  • GA4: Jika butuh data mendalam dan integrasi dengan Google Ads
  • Plausible: Jika prioritas privacy, simplicity, dan performa

Opsi 1: Google Analytics 4

Membuat Properti GA4

Buat Akun Google Analytics

  1. Kunjungi analytics.google.com
  2. Klik “Start measuring”
  3. Isi nama akun dan property
  4. Pilih platform: Web
  5. Masukkan URL website Anda

Dapatkan Measurement ID

Setelah property dibuat, Anda akan mendapat Measurement ID dengan format:

G-XXXXXXXXXX

Simpan ID ini untuk langkah selanjutnya.

Tambahkan ke Sitemas

Buka .env dan tambahkan:

.env
bash 
PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX

Buat Komponen Analytics

Buat file src/components/Analytics.astro:

src/components/Analytics.astro
astro 
---
const GA_ID = import.meta.env.PUBLIC_GA_MEASUREMENT_ID;
---

{GA_ID && (
    <>
        <!-- Google Analytics -->
        <script
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
        />
        <script define:vars={{ GA_ID }}>
            window.dataLayer = window.dataLayer || [];
            function gtag() {
                dataLayer.push(arguments);
            }
            gtag('js', new Date());
            gtag('config', GA_ID, {
                page_path: window.location.pathname,
            });
        </script>
    </>
)}

Tambahkan ke Layout

Edit src/layouts/BaseLayout.astro:

BaseLayout.astro
astro 
---
import Analytics from '@/components/Analytics.astro';
---

<html>
    <head>
        <!-- ... meta tags ... -->
        <Analytics />
    </head>
    <body>
        <!-- ... -->
    </body>
</html>

Tracking Page Views dengan View Transitions

Jika menggunakan Astro View Transitions, perlu handle page navigation:

Analytics dengan View Transitions
astro 
<script define:vars={{ GA_ID }}>
    // Initial page load
    window.dataLayer = window.dataLayer || [];
    function gtag() {
        dataLayer.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', GA_ID);
    
    // Track navigation with View Transitions
    document.addEventListener('astro:page-load', () => {
        gtag('config', GA_ID, {
            page_path: window.location.pathname,
            page_title: document.title,
        });
    });
</script>

Opsi 2: Plausible Analytics

Cloud Plausible (Hosted)

Daftar di Plausible

  1. Kunjungi plausible.io
  2. Daftar free trial 30 hari
  3. Tambahkan domain website Anda

Tambahkan Script

Buat file src/components/PlausibleAnalytics.astro:

PlausibleAnalytics.astro
astro 
---
const DOMAIN = import.meta.env.PUBLIC_PLAUSIBLE_DOMAIN;
---

{DOMAIN && (
    <script
        defer
        data-domain={DOMAIN}
        src="https://plausible.io/js/script.js"
    />
)}

Konfigurasi Environment

Tambahkan ke .env:

.env
bash 
PUBLIC_PLAUSIBLE_DOMAIN=yourdomain.com

Self-Hosted Plausible

Jika hosting sendiri Plausible:

Self-hosted Plausible
astro 
---
const PLAUSIBLE_URL = import.meta.env.PUBLIC_PLAUSIBLE_URL;
const DOMAIN = import.meta.env.PUBLIC_PLAUSIBLE_DOMAIN;
---

{DOMAIN && PLAUSIBLE_URL && (
    <script
        defer
        data-domain={DOMAIN}
        src={`${PLAUSIBLE_URL}/js/script.js`}
    />
)}

Environment Variables

Untuk keamanan, gunakan environment variables:

.env.example
bash 
# Google Analytics
PUBLIC_GA_MEASUREMENT_ID=

# Plausible Analytics
PUBLIC_PLAUSIBLE_DOMAIN=
PUBLIC_PLAUSIBLE_URL=  # Untuk self-hosted, contoh: https://analytics.yourdomain.com
PUBLIC_ Prefix

Di Astro, environment variables yang diakses di client-side harus memiliki prefix PUBLIC_. Tanpa prefix ini, variabel hanya tersedia di server-side.

Conditional Loading (Dev vs Prod)

Jangan load analytics di development:

Conditional analytics
astro 
---
const isProd = import.meta.env.PROD;
const GA_ID = import.meta.env.PUBLIC_GA_MEASUREMENT_ID;
---

{isProd && GA_ID && (
    <!-- Analytics script -->
)}

Tracking Custom Events

Google Analytics 4

Custom event GA4
javascript 
// Track button click
gtag('event', 'click', {
    event_category: 'engagement',
    event_label: 'subscribe_button',
});

// Track article read
gtag('event', 'article_read', {
    article_title: 'Judul Artikel',
    article_category: 'Tutorial',
    read_time: 5,
});

Plausible

Custom event Plausible
javascript 
// Simple event
plausible('Subscribe');

// Event with props
plausible('Article Read', {
    props: {
        title: 'Judul Artikel',
        category: 'Tutorial',
    },
});

Testing Analytics

Google Analytics

  1. Buka website di browser
  2. Di GA4 dashboard, klik Reports → Realtime
  3. Anda harus melihat visit Anda sendiri

Plausible

  1. Kunjungi website Anda
  2. Cek dashboard Plausible
  3. Data muncul dalam hitungan detik

Debug Mode

Untuk GA4, gunakan Tag Assistant:

  1. Install Chrome extension
  2. Enable debug mode
  3. Verifikasi events terkirim dengan benar

Privacy Considerations

Jika menggunakan GA4 dan target audience di EU, Anda wajib menampilkan cookie consent:

Consent mode
javascript 
// Di awal, sebelum gtag
gtag('consent', 'default', {
    analytics_storage: 'denied',
});

// Setelah user menerima cookies
function acceptCookies() {
    gtag('consent', 'update', {
        analytics_storage: 'granted',
    });
}

Plausible tidak menggunakan cookies sehingga tidak memerlukan consent banner.

Membandingkan Data

MetricGA4Plausible
UsersUsersVisitors
SessionsSessionsVisits
Page viewsViewsPageviews
Bounce rateEngagement rate (inverse)Bounce rate
Avg session durationAvg engagement timeVisit duration

Langkah Selanjutnya

Setelah analytics terpasang, konfigurasi monetisasi dengan AdSense:

Monetisasi Blog

Pelajari cara mengintegrasikan Google AdSense untuk menghasilkan pendapatan dari blog Anda.

Konfigurasi AdSense

Kesimpulan

Analytics adalah fondasi untuk mengambil keputusan berbasis data. Pilih platform yang sesuai:

  • GA4: Untuk analisis mendalam dan integrasi Google ecosystem
  • Plausible: Untuk simplicity dan respect terhadap privacy pengunjung

Keduanya dapat diintegrasikan dengan mudah ke Sitemas. Yang penting adalah mulai tracking dari awal, sehingga Anda memiliki historical data saat website berkembang.

M

Mas Admin

Penulis Konten

Menyajikan konten terbaik seputar teknologi dan produktivitas.