skills.rest
amplitude
amplitudeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

integration-astro-hybrid

Integrate Amplitude analytics into Astro hybrid projects with client and server events.

28|Updated Dec 5, 2025
Search Tags:#analytics#astro#server-side#hybrid#amplitude#unified-sdk
One-click install
npx skills add https://github.com/amplitude/wizard --skill integration-astro-hybrid-amplitude
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: integration-astro-hybrid
Source: https://github.com/amplitude/wizard/tree/main/skills/integration/integration-astro-hybrid
Command: npx skills add https://github.com/amplitude/wizard --skill integration-astro-hybrid-amplitude

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Enables seamless Amplitude analytics integration for Astro Hybrid apps, combining static rendering with server-rendered pages to capture client and server events.

Core Features & Use Cases

  • Hybrid rendering support with client-side Unified SDK initialization and server-side analytics.
  • Reference implementation and guidance to instrument both frontend and backend code.
  • Safe, environment-variable-based configuration and adherence to best practices for event naming and data privacy.

Quick Start

Install dependencies, configure amplitude environment variables, and run the development server to see Amplitude in action.

Frequently Asked Questions about integration-astro-hybrid

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

FAQPage Schema
How do I add Amplitude analytics to an Astro hybrid app?▼

To add Amplitude analytics to an Astro hybrid app, initialize the client-side Unified SDK using initAll and use @amplitude/analytics-node for server-side events on API routes and prerendered pages. This approach captures both client and server events seamlessly.

What is the best way to track server-side events in Astro prerendered pages?▼

The best way to track server-side events in Astro prerendered pages is using the @amplitude/analytics-node package. This server-side pattern works alongside client-side Unified SDK initialization to provide complete analytics coverage for hybrid rendering setups.

Does the Amplitude Unified SDK work with Astro static rendering and server-rendered pages?▼

Yes, the Amplitude Unified SDK works with Astro static rendering and server-rendered pages. It applies to hybrid Astro setups by initializing client-side tracking via initAll while handling server-side analytics through Node-based event instrumentation.

Do I need environment variables to configure Amplitude in an Astro project?▼

Yes, you need environment-based Amplitude keys to configure Amplitude in an Astro project. Setting these environment variables ensures safe configuration and adheres to best practices for data privacy and event naming before running your development server.

Can I track both frontend and backend analytics events in a hybrid Astro setup?▼

Yes, you can track both frontend and backend analytics events in a hybrid Astro setup. The integration uses the client-side Unified SDK for frontend initialization and @amplitude/analytics-node for backend server events, ensuring comprehensive analytics coverage across rendering modes.

Related Skills

Explore More Software Engineering Skills→
amplitudeamplitude
28

integration-astro-ssr

Integrate Amplitude analytics into Astro SSR projects with client and server tracking.

Official
Advanced
amplitudeamplitude
28

integration-tanstack-start

Configure Amplitude client and server tracking for TanStack Start applications.

Official
Advanced
DexploarerDexploarer
7

nextjs-page-generator

Generate Next.js 13+ App Router pages, components, and API routes.

Community
Intermediate
amplitudeamplitude
28

integration-nextjs-app-router

Initialize Amplitude client and server tracking in Next.js App Router apps.

Official
Advanced