Astro: Migrate from GA4 to Plausible (Islands + View Transitions)

Astro GA4→Plausible playbook. Island architecture preserves Plausible's near-zero JS. View Transitions auto-tracked.

Why Astro needs its own playbook

Astro’s island architecture means most pages ship zero JS. Adding any analytics script is a deliberate decision. Plausible’s tiny defer script fits Astro’s philosophy; GA4’s heavy gtag.js often dominates the entire JS budget.

Pre-flight

Identify GA4 install location. Most likely `BaseLayout.astro` or component included in every page’s ``.
Identify hydration strategy. Are islands using `client:load` (mounted on JS load) or `client:idle` / `client:visible`? Determines when analytics fires relative to user interaction.
Plan view-transition behavior. Astro’s view transitions (``) don’t reload the page — they pushState. Plausible auto-detects this since v0.6.

Step-by-step

1. Install Plausible script (Day 1)

astro src/layouts/BaseLayout.astro

<br />
—<br />
const { title } = Astro.props;<br />
—<br />
<html lang="en"><br />
  <head><br />
    <title>{title}</title><br />
    <script
      defer
      data-domain="example.com"
      src="https://plausible.io/js/script.js"
      is:inline
    ></script><br />
  </head><br />
  <body><br />
    <slot /><br />
  </body><br />
</html><br />

is:inline tells Astro not to bundle the script — it goes directly to the rendered HTML.

2. Track view transitions (Day 1)

If using Astro’s view transitions, Plausible auto-tracks pushState. No extra config.

3. Custom events from islands (Day 1-2)

astro src/components/SignUp.astro

<br />
—<br />
// Server-side props if needed<br />
—<br />
<button id="signup-btn">Sign up</button></p>
<p><script>
document.getElementById('signup-btn')?.addEventListener('click', () => {
  // @ts-ignore - Plausible global
  window.plausible?.('Sign up', { props: { source: 'header' } });
});
</script><br />

Note: the inline `