Setup & Installation
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
What This Skill Does
Adds Google Analytics 4 tracking to a project by detecting the framework and inserting the appropriate gtag setup. Supports Next.js, Nuxt, Astro, SvelteKit, Remix, Gatsby, Vue, React (Vite/CRA), Angular, and plain HTML. Optional flags enable custom event helpers, cookie consent mode, and debug output.
Handles framework detection and generates the correct integration pattern automatically, avoiding the manual lookup and copy-paste errors that typically come with setting up gtag across different project types.
When to use it
- Adding GA4 to a Next.js app without manually writing gtag boilerplate
- Setting up page-view tracking in a SvelteKit or Astro site
- Adding cookie consent mode before launching to EU users
- Instrumenting form submissions and purchase events with typed helpers
- Configuring debug mode to verify tracking during development
Example Workflow
Here's how your AI assistant might use this skill in practice.
User asks: add analytics G-ABC1234567 --events --consent
- 1Scans project files to detect framework (e.g., finds next.config.ts, identifies Next.js App Router)
- 2Validates measurement ID format matches G-XXXXXXXXXX
- 3Creates components/GoogleAnalytics.tsx with Script tags and injects it into app/layout.tsx
- 4Creates lib/analytics-events.ts with typed event helpers (trackClick, trackPurchase, etc.)
- 5Creates lib/analytics-consent.ts with consent mode defaults and updateConsent helpers
- 6Adds NEXT_PUBLIC_GA_MEASUREMENT_ID to .env.local and .env.example, ensures .env.local is in .gitignore
GA4 tracking is live with consent mode defaulting to denied, event helpers exported and ready to use, and environment variable documented
Requirements
Accounts, API keys, or tools you or your AI assistant may need to set up while using this skill.