Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From astro
ACTIVATE when integrating third-party scripts (Google Analytics, GTM, Facebook Pixel) in Astro via Partytown web worker. ACTIVATE for 'analytics', 'Partytown', 'GA4', 'GTM', 'tracking script', 'text/partytown'. Covers: Partytown setup, GA4/GTM/Facebook Pixel integration, forward configuration, custom events, conditional loading (prod only), cookie consent integration, debug mode. DO NOT use for: general script handling in Astro, SEO configuration.
npx claudepluginhub fabiensalles/claude-marketplace --plugin astroHow this skill is triggered — by the user, by Claude, or both
Slash command
/astro:astro-partytownThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Patterns for offloading third-party scripts to a web worker for better performance.
Provides Astro framework patterns for islands architecture, content collections, rendering strategies (SSG, SSR, hybrid), view transitions, partial hydration, and Cloudflare deployment.
Expert Astro Islands Architecture — client:load, client:idle, client:visible, client:media, client:only, server:defer (Server Islands), fallback slots, transition:persist, prop serialization. Use when adding interactivity to Astro pages or rendering dynamic server content.
Builds or consumes Astro integrations to extend build pipelines by adding renderers, injecting routes, modifying Vite config, and hooking into lifecycle events.
Share bugs, ideas, or general feedback.
Patterns for offloading third-party scripts to a web worker for better performance.
Third-party scripts (analytics, ads, chat widgets) block the main thread and slow page interactivity. Partytown runs them in a web worker, keeping the main thread free.
npx astro add partytown
// astro.config.mjs
import partytown from '@astrojs/partytown';
export default defineConfig({
integrations: [
partytown({
config: {
forward: ['dataLayer.push'],
},
}),
],
});
Scripts use type="text/partytown" and is:inline to run in the web worker. The forward array tells Partytown which functions to proxy from main thread to worker.
partytown({
config: {
forward: [
'dataLayer.push', // Google Analytics/GTM
'fbq', // Facebook Pixel
'gtag', // Google gtag
'_hsq.push', // HubSpot
],
},
}),
When integrating GA4, GTM, or Facebook Pixel, read
references/analytics-integration-examples.mdfor complete setup snippets with Partytown.
When implementing custom events, conditional loading, or cookie consent, read
references/analytics-integration-examples.mdfor React component events, production-only loading, and consent patterns.
When debugging Partytown issues (scripts not running, CORS errors), read
references/analytics-integration-examples.mdfor troubleshooting steps.
| Script Type | Forward Config | Notes |
|---|---|---|
| GA4 | dataLayer.push | Most common |
| GTM | dataLayer.push | Same as GA4 |
fbq | Single function | |
| HubSpot | _hsq.push | Array-based |
| Intercom | Intercom | Object-based |
| Custom | Add to forward | Any global function |
| Attribute | Purpose |
|---|---|
type="text/partytown" | Run in web worker |
is:inline | Don't bundle, keep inline |
define:vars={{ }} | Pass Astro vars to script |