Setup Google Analytics Astro + Partytown

# astrojs # SEO
Yhotie
Published date:
Edit this post

Setup Google Analytics dengan Partytown di Astro

Saat membuat website menggunakan Astro, performa biasanya menjadi prioritas utama. Astro dikenal ringan, cepat, dan sangat SEO-friendly. Namun ada satu hal yang sering membuat skor Lighthouse turun tanpa disadari:

script pihak ketiga seperti Google Analytics.

Banyak developer langsung memasang Google Analytics menggunakan script biasa. Padahal script analytics dapat membebani main thread browser dan memperlambat rendering halaman.

Solusinya adalah menggunakan Partytown.

Di artikel ini kamu akan belajar:

Artikel ini cocok untuk:

Apa Itu Partytown?

Partytown adalah library dari Builder.io yang memungkinkan script pihak ketiga berjalan di Web Worker.

Biasanya script seperti:

akan berjalan di browser utama (main thread).

Akibatnya:

Partytown memindahkan proses tersebut ke worker thread sehingga website tetap cepat.

Kenapa Astro Cocok dengan Partytown?

Astro memiliki filosofi:

“Ship less JavaScript”

Astro sangat fokus pada:

Karena itu, menggabungkan Astro dengan Partytown menjadi kombinasi yang sangat powerful.

Cocok untuk:

Cara Install Partytown di Astro

Gunakan command berikut:

pnpm astro add partytown

Command ini otomatis:

Konfigurasi Astro

Buka file:

astro.config.mjs

Lalu ubah menjadi:

import { defineConfig } from 'astro/config';
import partytown from '@astrojs/partytown';

export default defineConfig({
  integrations: [
    partytown({
      config: {
        forward: ['dataLayer.push'],
      },
    }),
  ],
});

Kenapa forward: ['dataLayer.push'] Penting?

Google Analytics menggunakan:

dataLayer.push()

untuk tracking event.

Tanpa konfigurasi ini:

Cara 1 — Menggunakan Component GoogleAnalytics

Ini adalah metode yang paling umum digunakan.

Membuat Component

Buat file:

src/components/GoogleAnalytics.astro

Isi:

---
const GA_ID = import.meta.env.PUBLIC_GA_ID;
---

<script
  type="text/partytown"
  async
  src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
></script>

<script type="text/partytown">
  window.dataLayer = window.dataLayer || [];

  window.gtag = function () {
    dataLayer.push(arguments);
  };

  gtag('js', new Date());

  gtag('config', '{GA_ID}', {
    page_path: window.location.pathname,
  });
</script>

Tambahkan ke Layout

Contoh:

---
import GoogleAnalytics from '@/components/GoogleAnalytics.astro';
---

<html>
  <head>
    <GoogleAnalytics />
  </head>

  <body>
    <slot />
  </body>
</html>

Cara 2 — Menggunakan BaseHead Langsung

Metode kedua adalah memasukkan script analytics langsung ke file BaseHead.

Pendekatan ini cocok jika:

Contoh Implementasi

<!-- Google Analytics (GA4) via Partytown -->
<script
  type="text/partytown"
  src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
  async
></script>

<script
  type="text/partytown"
  set:html={`window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${GA_ID}');`}
></script>

Penjelasan Metode Kedua

Pada implementasi ini:

Ini sangat cocok untuk:

Kelebihan Cara Kedua

Struktur Lebih Ringkas

Semua:

berada dalam satu file.

Lebih Mudah Dikelola

Tidak perlu:

Cocok untuk Static Website

Terutama untuk:

Cara 3 — Manual GA4 Integration dengan Astro ClientRouter

Selain menggunakan component terpisah atau langsung memasukkan script ke BaseHead, ada juga pendekatan yang lebih advanced dan production-ready.

Metode ini biasanya digunakan pada:

Pendekatan ini disebut:

Manual GA4 Integration dengan Astro ClientRouter SPA Tracking

Kenapa Metode Ini Berbeda?

Pada implementasi sebelumnya, Google Analytics hanya berjalan pada initial page load.

Namun saat menggunakan:

<ClientRouter />

Astro bekerja seperti SPA (Single Page Application).

Artinya:

Karena itu dibutuhkan:

manual page view tracking

Contoh Implementasi Production Ready

Berikut contoh implementasi modern yang mendukung:

{
  PUBLIC_GA_MEASUREMENT_ID && (
    <>
      <script
        type="text/partytown"
        async
        src={`https://www.googletagmanager.com/gtag/js?id=${PUBLIC_GA_MEASUREMENT_ID}`}
      ></script>

      <script
        type="text/partytown"
        define:vars={{ gaId: PUBLIC_GA_MEASUREMENT_ID }}
      >
        {`
          window.dataLayer = window.dataLayer || [];

          function gtag() {
            window.dataLayer.push(arguments);
          }

          window.gtag = window.gtag || gtag;

          gtag("js", new Date());

          gtag("config", gaId, {
            send_page_view: true,
          });

          let lastTrackedPath =
            window.location.pathname + window.location.search;

          document.addEventListener("astro:page-load", () => {
            const currentPath =
              window.location.pathname + window.location.search;

            if (currentPath === lastTrackedPath) return;

            lastTrackedPath = currentPath;

            gtag("event", "page_view", {
              page_path: currentPath,
              page_title: document.title,
              page_location: window.location.href,
            });
          });
        `}
      </script>
    </>
  )
}

Apa yang Dilakukan Kode Ini?

Implementasi ini melakukan beberapa hal penting.

1. Menjalankan Google Analytics di Web Worker

Bagian:

type="text/partytown"

menandakan script dijalankan melalui:

Hasilnya:

2. Mendukung SPA Navigation Astro

Bagian:

document.addEventListener("astro:page-load", () => {

digunakan untuk mendeteksi:

Tanpa ini:
Google Analytics hanya membaca halaman pertama saja.

3. Menghindari Duplicate Tracking

Bagian:

if (currentPath === lastTrackedPath) return;

digunakan agar:

Perbandingan Ketiga Metode

MetodeTingkatCocok Untuk
Component GoogleAnalyticsMudahPemula
BaseHead Inline ScriptMenengahBlog sederhana
ClientRouter + SPA TrackingAdvancedProduction modern website

Cara Mengecek Apakah Analytics Berhasil

Buka:

Cari request:

Kalau muncul:
✅ Google Analytics aktif.

Cara Memastikan Partytown Berjalan

Saat production build dijalankan, akan muncul folder:

/~partytown/

Ini menandakan script dijalankan melalui Web Worker.

Tips SEO Tambahan untuk Astro

Gunakan Absolute URL untuk Gambar

Contoh yang benar:

<meta property="og:image" content="https://domain.com/image.png" />

Jangan gunakan:

../../image.png

Gunakan Ukuran OG Image Ideal

Rekomendasi:

Gunakan Meta Description yang Natural

Hindari keyword stuffing.

Gunakan deskripsi yang:

Kelebihan Menggunakan Partytown

Berikut manfaat utama:

Kekurangan Partytown

Walaupun sangat bagus, ada beberapa hal yang perlu diperhatikan:

Namun untuk Google Analytics, Partytown sudah sangat stabil digunakan.

FAQ

Apakah Partytown cocok untuk pemula?

Ya. Astro sudah menyediakan integrasi resmi sehingga setup menjadi jauh lebih mudah.

Apakah Google Analytics tetap akurat?

Ya. Selama forward: ['dataLayer.push'] digunakan, tracking tetap normal.

Mana yang lebih baik, component atau langsung di BaseHead?

Keduanya bagus.

Gunakan:

Kapan harus menggunakan ClientRouter tracking?

Gunakan jika website kamu menggunakan:

Penutup

Menggunakan Google Analytics secara biasa memang mudah, tetapi bisa berdampak pada performa website.

Dengan Partytown, kamu bisa:

Astro dan Partytown adalah kombinasi modern yang sangat cocok untuk website cepat dan SEO-friendly.

Kalau kamu sedang membangun blog, portfolio, atau memorial website menggunakan Astro, implementasi ini sangat direkomendasikan.

Internal Linking Suggestion

Tambahkan internal link ke artikel berikut:

Share
Next
Pakai Ollama Cloud di Pi untuk Pemula