--- name: nextjs-ga-tracking description: Implements Google Analytics 4 tracking with GDPR-compliant Silktide cookie consent in Next.js projects. Use when the user wants to add GA tracking, implement Google Analytics, set up analytics with cookie consent, or add GDPR-compliant tracking to a Next.js app. --- # GA4 + Silktide Cookie Consent for Next.js ## Overview This skill adds Google Analytics 4 (GA4) tracking to a Next.js project with GDPR-compliant cookie consent via Silktide Consent Manager. It covers: - GA4 integration using `@next/third-parties/google` - Silktide cookie consent banner with gtag consent mode - Up to three consent categories: Necessary, Analytics, Advertising - TypeScript type declarations for global window objects ## Step 0: Gather Required Parameters **CRITICAL: Ask the user for these parameters BEFORE making any code changes.** ### Required parameters (MUST ask): 1. **GA4 Measurement ID** — format: `G-XXXXXXXXXX` (found in Google Analytics > Admin > Data Streams) 2. **Cookie banner description** — the main text shown on the consent banner (e.g. "We use cookies on our site to enhance your experience, provide personalized content, and analyze our traffic.") ### Optional parameters (ask, but provide defaults if user skips): 3. **Consent type descriptions** (defaults below): - Necessary: "These cookies are necessary for the website to function properly and cannot be switched off." - Analytics: "These cookies help us improve the site by tracking which pages are most popular and how visitors move around the site." - Advertising: "These cookies provide extra features and personalization to improve your experience. They may be set by us or by partners whose services we use." 4. **Button labels** (defaults below): - Accept all: "Accept all" - Reject non-essential: "Reject non-essential" - Preferences: "Preferences" 5. **Preferences dialog** (defaults below): - Title: "Customize your cookie preferences" - Description: "We respect your right to privacy. You can choose not to allow some types of cookies. Your cookie preferences will apply across our website." 6. **Include advertising consent category?** (default: yes) ## Step 1: Install dependency ```bash # Using yarn (preferred if yarn.lock exists): yarn add @next/third-parties # Using npm (if package-lock.json exists): npm install @next/third-parties ``` Check which package manager the project uses by looking for `yarn.lock` or `package-lock.json`. ## Step 2: Add GoogleAnalytics component to root layout Edit `src/app/layout.tsx` (or `app/layout.tsx` depending on project structure). ### Add import at the top: ```tsx import { GoogleAnalytics } from "@next/third-parties/google" ``` ### Add component inside ``, typically at the end: ```tsx ``` Replace `{USER_GA_ID}` with the user's GA4 Measurement ID. ## Step 3: Add Silktide Consent Manager files Copy the bundled assets from this skill into the project's `public/` directory: ```bash cp /assets/csm.js /public/csm.js cp /assets/csm.css /public/csm.css ``` The asset files are located in the `assets/` directory of this skill. See `references/silktide-setup.md` for more details about Silktide. ## Step 4: Create CookieConsent component **IMPORTANT:** Do NOT add raw `