add-analytics_skill

Overview

This skill adds Google Analytics 4 (GA4) tracking to any project by detecting the framework, injecting the correct tracking code, and optionally wiring event helpers and cookie consent. It validates Measurement IDs, configures environment variables, and provides framework-specific snippets for Next.js, React (Vite/CRA), Vue, Nuxt, SvelteKit, Astro, and plain HTML. The goal is a quick, consistent GA4 install with privacy-aware defaults and optional event utilities.

How this skill works

The skill scans the project to detect the framework, TypeScript usage, existing analytics, and package manager locks to choose the proper implementation path. It validates the provided Measurement ID (must start with G- and have exactly 10 alphanumeric characters) and warns about legacy UA- IDs. For each framework it generates or modifies the recommended files to load gtag, initialize dataLayer, and expose pageview/event helpers. Optional flags add a reusable event tracking library and consent-aware initialization that sets default denied consent until the user grants permissions.

When to use it

• Adding GA4 to a new or existing web project that lacks analytics
• Migrating sites that still reference Universal Analytics (UA-) to GA4
• Automating consistent environment variable and .env handling for analytics
• Adding standardized pageview and event helpers across multiple frameworks
• Integrating cookie consent management with analytics for GDPR/CCPA compliance

Best practices

• Provide a valid GA4 Measurement ID (format G-XXXXXXXXXX) and store it in environment variables
• Keep .env.local out of version control and add example values to .env.example
• Enable debug mode only in development and guard init code with environment checks
• Use the provided event utilities to standardize event names and parameters
• Use the --consent option to default to denied analytics until user consent is recorded

Example use cases

• Add GA4 to a Next.js App Router project by injecting a client GoogleAnalytics component into app/layout
• Initialize GA on a Vite + React app and expose initGA, pageview, and event helpers in src/lib/analytics.ts
• Install analytics plugin for Vue 3 that registers route change tracking with vue-router
• Add a consent-aware analytics loader for a Nuxt 3 site to defer analytics until consent is granted
• Drop a simple inline gtag snippet into a plain HTML site head for quick tracking