integration-astro-view-transitions

Name: integration-astro-view-transitions
Availability: InStock
Author: Amplitude

Integrate Amplitude analytics into Astro apps with ClientRouter view transitions.

28|Updated Dec 5, 2025

Search Tags:#routing #astro #amplitude #event_tracking #view_transitions #client_router #unified_sdk

Ready to run

npx skills add https://github.com/amplitude/wizard --skill integration-astro-view-transitions-amplitude

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: integration-astro-view-transitions
Source: https://github.com/amplitude/wizard/tree/main/skills/integration/integration-astro-view-transitions
Command: npx skills add https://github.com/amplitude/wizard --skill integration-astro-view-transitions-amplitude

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This integration ensures Amplitude analytics are correctly initialized and preserved across Astro's ClientRouter view transitions, so events remain accurate during soft navigations.

Core Features & Use Cases

Guarded initialization with ClientRouter to avoid reinitializing analytics on navigation.
Use the Unified SDK (initAll) to enable analytics, session replay, and experiments across Astro pages.
Track custom events during transitions, such as "User Logged In" and "Burrito Considered".

Quick Start

Follow the reference setup to initialize Amplitude in Astro and run the local server with your API key.

Frequently Asked Questions about integration-astro-view-transitions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I maintain Amplitude event tracking during Astro view transitions?▼

To maintain Amplitude event tracking during Astro view transitions, you need a guarded initialization approach using the Unified SDK's initAll method. This prevents reinitializing analytics during soft navigations, ensuring events remain accurate across ClientRouter route changes.

Why does Amplitude analytics break after ClientRouter soft navigations in Astro?▼

Amplitude analytics break after ClientRouter soft navigations because the page content swaps without a full reload, often retriggering initialization scripts. Guarding the initialization to run once per app lifecycle prevents duplicate setups and lost event data during these transitions.

How do I initialize Amplitude in an Astro project using the Unified SDK?▼

You initialize Amplitude in Astro using the Unified SDK by calling initAll with your environment variable API key and enabling autocapture. This setup must be guarded to execute only once per app lifecycle to support ClientRouter view transitions correctly.

Can I track custom events like user logins across Astro page transitions?▼

Yes, you can track custom events like User Logged In across Astro page transitions. By correctly integrating the Unified SDK with ClientRouter, your custom events fire accurately during soft navigations without being reset or duplicated.

Does the Amplitude Unified SDK support session replay and experiments in Astro?▼

Yes, the Amplitude Unified SDK supports session replay and experiments in Astro. Using the initAll method enables these analytics features alongside event tracking, maintaining their state across ClientRouter view transitions.

What are the requirements for setting up Amplitude analytics in an Astro app?▼

Requirements for setting up Amplitude analytics in an Astro app include using environment variables for your API key, enabling autocapture, and ensuring the Unified SDK initializes only once per app lifecycle to support ClientRouter view transitions.