[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FSR25CJYM8DCXR3KYB4DQT":3,"skill-same:01M6FSR25CJYM8DCXR3KYB4DQT":83},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":33,"publishedAt":50,"linkOnly":51,"markdownContent":52,"markdownBody":53,"frontMatter":54,"refName":56,"commitSha":57,"skillDirectory":58,"forksCount":59,"repositoryHtmlUrl":60,"repositoryHomepageUrl":6,"ownerHtmlUrl":61,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":62,"install":63,"resources":76},"01M6FSR25CJYM8DCXR3KYB4DQT","add-analytics",null,"Add Google Analytics 4 tracking to any project. Detects framework, adds tracking code, sets up events, and configures privacy settings.","kbarbel640-del\u002Fskills","kbarbel640-del","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F255315490?v=4","01M6CJPPQGCCESXMG3K7BBGQ5J","01M6CJPPX2PB2BCZERFVM2C2B3",1,"MIT","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fjeftekhari\u002Fadd-analytics\u002FSKILL.md",[17,22,25,30],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000013","分析与可视化",{"categoryNo":26,"categoryName":27,"taxonomyType":28,"taxonomyTypeDesc":29},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",{"categoryNo":31,"categoryName":32,"taxonomyType":28,"taxonomyTypeDesc":29},"01JBSEEDCAT000000000000033","数据分析师",[34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49],"analytics","add","add analytics","google","debug","code","framework","privacy","google analytics","settings","tracking","up","project","id","events","measurement","2026-11-10 10:12:30",false,"---\nname: add-analytics\ndescription: Add Google Analytics 4 tracking to any project. Detects framework, adds tracking code, sets up events, and configures privacy settings.\nargument-hint: \"\u003Cmeasurement-id> [--events] [--consent] [--debug]\"\n---\n\n# Google Analytics 4 Setup Skill\n\nYou are setting up Google Analytics 4 (GA4) for a project. Follow this comprehensive guide to add analytics properly.\n\n## Arguments\n\nParse the following from `$ARGUMENTS`:\n- **Measurement ID**: Format `G-XXXXXXXXXX` (required, ask if not provided)\n- **--events**: Include custom event tracking helpers\n- **--consent**: Include cookie consent integration\n- **--debug**: Enable debug mode for development\n\n## Step 1: Detect Project Type\n\nScan the project to determine the framework\u002Fsetup:\n\n```\nPriority detection order:\n1. next.config.js\u002Fts → Next.js\n2. nuxt.config.js\u002Fts → Nuxt.js\n3. astro.config.mjs → Astro\n4. svelte.config.js → SvelteKit\n5. remix.config.js → Remix\n6. gatsby-config.js → Gatsby\n7. vite.config.js + src\u002FApp.vue → Vue + Vite\n8. vite.config.js + src\u002FApp.tsx → React + Vite\n9. angular.json → Angular\n10. package.json with \"react-scripts\" → Create React App\n11. index.html only → Plain HTML\n12. _app.tsx\u002Fjsx → Next.js (App Router check: app\u002F directory)\n```\n\nAlso check for:\n- TypeScript usage (tsconfig.json)\n- Existing analytics (search for gtag, GA, analytics)\n- Package manager (pnpm-lock.yaml, yarn.lock, package-lock.json)\n\n## Step 2: Validate Measurement ID\n\nThe Measurement ID must:\n- Start with `G-` (GA4 format)\n- Be followed by exactly 10 alphanumeric characters\n- Example: `G-ABC1234567`\n\nIf the user provides a `UA-` ID, inform them:\n> \"You provided a Universal Analytics ID (UA-). GA4 uses Measurement IDs starting with 'G-'.\n> Universal Analytics was sunset in July 2024. You'll need to create a GA4 property at analytics.google.com\"\n\n## Step 3: Implementation by Framework\n\n### Next.js (App Router - app\u002F directory)\n\nCreate `app\u002Flayout.tsx` modification or create `components\u002FGoogleAnalytics.tsx`:\n\n```tsx\n\u002F\u002F components\u002FGoogleAnalytics.tsx\n'use client'\n\nimport Script from 'next\u002Fscript'\n\ninterface GoogleAnalyticsProps {\n  measurementId: string\n}\n\nexport function GoogleAnalytics({ measurementId }: GoogleAnalyticsProps) {\n  return (\n    \u003C>\n      \u003CScript\n        src={`https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=${measurementId}`}\n        strategy=\"afterInteractive\"\n      \u002F>\n      \u003CScript id=\"google-analytics\" strategy=\"afterInteractive\">\n        {`\n          window.dataLayer = window.dataLayer || [];\n          function gtag(){dataLayer.push(arguments);}\n          gtag('js', new Date());\n          gtag('config', '${measurementId}');\n        `}\n      \u003C\u002FScript>\n    \u003C\u002F>\n  )\n}\n```\n\nAdd to root layout:\n```tsx\n\u002F\u002F app\u002Flayout.tsx\nimport { GoogleAnalytics } from '@\u002Fcomponents\u002FGoogleAnalytics'\n\n\u002F\u002F Add inside \u003Cbody> or \u003Chtml>:\n\u003CGoogleAnalytics measurementId=\"G-XXXXXXXXXX\" \u002F>\n```\n\n### Next.js (Pages Router - pages\u002F directory)\n\nModify `pages\u002F_app.tsx`:\n\n```tsx\n\u002F\u002F pages\u002F_app.tsx\nimport type { AppProps } from 'next\u002Fapp'\nimport Script from 'next\u002Fscript'\n\nconst GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID\n\nexport default function App({ Component, pageProps }: AppProps) {\n  return (\n    \u003C>\n      \u003CScript\n        src={`https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=${GA_MEASUREMENT_ID}`}\n        strategy=\"afterInteractive\"\n      \u002F>\n      \u003CScript id=\"google-analytics\" strategy=\"afterInteractive\">\n        {`\n          window.dataLayer = window.dataLayer || [];\n          function gtag(){dataLayer.push(arguments);}\n          gtag('js', new Date());\n          gtag('config', '${GA_MEASUREMENT_ID}');\n        `}\n      \u003C\u002FScript>\n      \u003CComponent {...pageProps} \u002F>\n    \u003C\u002F>\n  )\n}\n```\n\n### React (Vite\u002FCRA)\n\nCreate `src\u002Flib\u002Fanalytics.ts`:\n\n```typescript\n\u002F\u002F src\u002Flib\u002Fanalytics.ts\nexport const GA_MEASUREMENT_ID = import.meta.env.VITE_GA_MEASUREMENT_ID\n\ndeclare global {\n  interface Window {\n    gtag: (...args: unknown[]) => void\n    dataLayer: unknown[]\n  }\n}\n\nexport const initGA = () => {\n  if (typeof window === 'undefined') return\n\n  const script = document.createElement('script')\n  script.src = `https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=${GA_MEASUREMENT_ID}`\n  script.async = true\n  document.head.appendChild(script)\n\n  window.dataLayer = window.dataLayer || []\n  window.gtag = function gtag() {\n    window.dataLayer.push(arguments)\n  }\n  window.gtag('js', new Date())\n  window.gtag('config', GA_MEASUREMENT_ID)\n}\n\nexport const pageview = (url: string) => {\n  window.gtag('config', GA_MEASUREMENT_ID, {\n    page_path: url,\n  })\n}\n\nexport const event = (action: string, params?: Record\u003Cstring, unknown>) => {\n  window.gtag('event', action, params)\n}\n```\n\nInitialize in `src\u002Fmain.tsx`:\n\n```tsx\nimport { initGA } from '.\u002Flib\u002Fanalytics'\n\n\u002F\u002F Initialize before render\nif (import.meta.env.PROD) {\n  initGA()\n}\n```\n\n### Vue 3 (Vite)\n\nCreate `src\u002Fplugins\u002Fanalytics.ts`:\n\n```typescript\n\u002F\u002F src\u002Fplugins\u002Fanalytics.ts\nimport type { App } from 'vue'\nimport type { Router } from 'vue-router'\n\nconst GA_MEASUREMENT_ID = import.meta.env.VITE_GA_MEASUREMENT_ID\n\ndeclare global {\n  interface Window {\n    gtag: (...args: unknown[]) => void\n    dataLayer: unknown[]\n  }\n}\n\nexport const analyticsPlugin = {\n  install(app: App, { router }: { router: Router }) {\n    \u002F\u002F Load gtag script\n    const script = document.createElement('script')\n    script.src = `https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=${GA_MEASUREMENT_ID}`\n    script.async = true\n    document.head.appendChild(script)\n\n    window.dataLayer = window.dataLayer || []\n    window.gtag = function gtag() {\n      window.dataLayer.push(arguments)\n    }\n    window.gtag('js', new Date())\n    window.gtag('config', GA_MEASUREMENT_ID)\n\n    \u002F\u002F Track route changes\n    router.afterEach((to) => {\n      window.gtag('config', GA_MEASUREMENT_ID, {\n        page_path: to.fullPath,\n      })\n    })\n\n    \u002F\u002F Provide global methods\n    app.config.globalProperties.$gtag = window.gtag\n  }\n}\n```\n\n### Nuxt 3\n\nCreate `plugins\u002Fanalytics.client.ts`:\n\n```typescript\n\u002F\u002F plugins\u002Fanalytics.client.ts\nexport default defineNuxtPlugin(() => {\n  const config = useRuntimeConfig()\n  const measurementId = config.public.gaMeasurementId\n\n  if (!measurementId) return\n\n  \u002F\u002F Load gtag\n  useHead({\n    script: [\n      {\n        src: `https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=${measurementId}`,\n        async: true,\n      },\n      {\n        innerHTML: `\n          window.dataLayer = window.dataLayer || [];\n          function gtag(){dataLayer.push(arguments);}\n          gtag('js', new Date());\n          gtag('config', '${measurementId}');\n        `,\n      },\n    ],\n  })\n\n  \u002F\u002F Track route changes\n  const router = useRouter()\n  router.afterEach((to) => {\n    window.gtag('config', measurementId, {\n      page_path: to.fullPath,\n    })\n  })\n})\n```\n\nAdd to `nuxt.config.ts`:\n\n```typescript\nexport default defineNuxtConfig({\n  runtimeConfig: {\n    public: {\n      gaMeasurementId: process.env.NUXT_PUBLIC_GA_MEASUREMENT_ID,\n    },\n  },\n})\n```\n\n### Astro\n\nCreate `src\u002Fcomponents\u002FAnalytics.astro`:\n\n```astro\n---\n\u002F\u002F src\u002Fcomponents\u002FAnalytics.astro\ninterface Props {\n  measurementId: string\n}\n\nconst { measurementId } = Astro.props\n---\n\n\u003Cscript\n  is:inline\n  define:vars={{ measurementId }}\n  src={`https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=${measurementId}`}\n>\u003C\u002Fscript>\n\n\u003Cscript is:inline define:vars={{ measurementId }}>\n  window.dataLayer = window.dataLayer || [];\n  function gtag() {\n    dataLayer.push(arguments);\n  }\n  gtag('js', new Date());\n  gtag('config', measurementId);\n\u003C\u002Fscript>\n```\n\nAdd to layout:\n\n```astro\n---\nimport Analytics from '..\u002Fcomponents\u002FAnalytics.astro'\n---\n\u003Chtml>\n  \u003Chead>\n    \u003CAnalytics measurementId=\"G-XXXXXXXXXX\" \u002F>\n  \u003C\u002Fhead>\n\u003C\u002Fhtml>\n```\n\n### SvelteKit\n\nCreate `src\u002Flib\u002Fanalytics.ts` and `src\u002Froutes\u002F+layout.svelte`:\n\n```typescript\n\u002F\u002F src\u002Flib\u002Fanalytics.ts\nimport { browser } from '$app\u002Fenvironment'\n\nexport const GA_MEASUREMENT_ID = import.meta.env.VITE_GA_MEASUREMENT_ID\n\nexport function initGA() {\n  if (!browser) return\n\n  const script = document.createElement('script')\n  script.src = `https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=${GA_MEASUREMENT_ID}`\n  script.async = true\n  document.head.appendChild(script)\n\n  window.dataLayer = window.dataLayer || []\n  window.gtag = function gtag() {\n    window.dataLayer.push(arguments)\n  }\n  window.gtag('js', new Date())\n  window.gtag('config', GA_MEASUREMENT_ID)\n}\n\nexport function trackPageview(url: string) {\n  if (!browser) return\n  window.gtag('config', GA_MEASUREMENT_ID, { page_path: url })\n}\n```\n\n```svelte\n\u003C!-- src\u002Froutes\u002F+layout.svelte -->\n\u003Cscript lang=\"ts\">\n  import { onMount } from 'svelte'\n  import { page } from '$app\u002Fstores'\n  import { initGA, trackPageview } from '$lib\u002Fanalytics'\n\n  onMount(() => {\n    initGA()\n  })\n\n  $: if ($page.url.pathname) {\n    trackPageview($page.url.pathname)\n  }\n\u003C\u002Fscript>\n\n\u003Cslot \u002F>\n```\n\n### Plain HTML\n\nAdd to `\u003Chead>`:\n\n```html\n\u003C!-- Google Analytics -->\n\u003Cscript async src=\"https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=G-XXXXXXXXXX\">\u003C\u002Fscript>\n\u003Cscript>\n  window.dataLayer = window.dataLayer || [];\n  function gtag(){dataLayer.push(arguments);}\n  gtag('js', new Date());\n  gtag('config', 'G-XXXXXXXXXX');\n\u003C\u002Fscript>\n```\n\n## Step 4: Environment Variables\n\nCreate or update `.env` \u002F `.env.local`:\n\n```bash\n# For Next.js\nNEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX\n\n# For Vite (React\u002FVue\u002FSvelte)\nVITE_GA_MEASUREMENT_ID=G-XXXXXXXXXX\n\n# For Nuxt\nNUXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX\n```\n\nAdd to `.env.example` if it exists (without the actual ID):\n\n```bash\n# Google Analytics 4 Measurement ID\nNEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX\n```\n\n**IMPORTANT**: Add `.env.local` to `.gitignore` if not already present.\n\n## Step 5: Event Tracking Helpers (if --events flag)\n\nCreate a comprehensive events utility:\n\n```typescript\n\u002F\u002F lib\u002Fanalytics-events.ts\n\n\u002F**\n * GA4 Event Tracking Utilities\n *\n * Recommended events: https:\u002F\u002Fsupport.google.com\u002Fanalytics\u002Fanswer\u002F9267735\n *\u002F\n\ntype GTagEvent = {\n  action: string\n  category?: string\n  label?: string\n  value?: number\n  [key: string]: unknown\n}\n\n\u002F\u002F Core event function\nexport const trackEvent = ({ action, category, label, value, ...rest }: GTagEvent) => {\n  if (typeof window === 'undefined' || !window.gtag) return\n\n  window.gtag('event', action, {\n    event_category: category,\n    event_label: label,\n    value,\n    ...rest,\n  })\n}\n\n\u002F\u002F Engagement events\nexport const trackClick = (elementName: string, location?: string) => {\n  trackEvent({\n    action: 'click',\n    category: 'engagement',\n    label: elementName,\n    click_location: location,\n  })\n}\n\nexport const trackScroll = (percentage: number) => {\n  trackEvent({\n    action: 'scroll',\n    category: 'engagement',\n    value: percentage,\n  })\n}\n\n\u002F\u002F Conversion events\nexport const trackSignUp = (method: string) => {\n  trackEvent({\n    action: 'sign_up',\n    method,\n  })\n}\n\nexport const trackLogin = (method: string) => {\n  trackEvent({\n    action: 'login',\n    method,\n  })\n}\n\nexport const trackPurchase = (params: {\n  transactionId: string\n  value: number\n  currency: string\n  items?: Array\u003C{\n    itemId: string\n    itemName: string\n    price: number\n    quantity: number\n  }>\n}) => {\n  trackEvent({\n    action: 'purchase',\n    transaction_id: params.transactionId,\n    value: params.value,\n    currency: params.currency,\n    items: params.items,\n  })\n}\n\n\u002F\u002F Content events\nexport const trackSearch = (searchTerm: string) => {\n  trackEvent({\n    action: 'search',\n    search_term: searchTerm,\n  })\n}\n\nexport const trackShare = (method: string, contentType: string, itemId: string) => {\n  trackEvent({\n    action: 'share',\n    method,\n    content_type: contentType,\n    item_id: itemId,\n  })\n}\n\n\u002F\u002F Form events\nexport const trackFormStart = (formName: string) => {\n  trackEvent({\n    action: 'form_start',\n    form_name: formName,\n  })\n}\n\nexport const trackFormSubmit = (formName: string, success: boolean) => {\n  trackEvent({\n    action: 'form_submit',\n    form_name: formName,\n    success,\n  })\n}\n\n\u002F\u002F Error tracking\nexport const trackError = (errorMessage: string, errorLocation?: string) => {\n  trackEvent({\n    action: 'exception',\n    description: errorMessage,\n    fatal: false,\n    error_location: errorLocation,\n  })\n}\n\n\u002F\u002F Custom event builder for flexibility\nexport const createCustomEvent = (eventName: string) => {\n  return (params?: Record\u003Cstring, unknown>) => {\n    trackEvent({\n      action: eventName,\n      ...params,\n    })\n  }\n}\n```\n\n## Step 6: Cookie Consent Integration (if --consent flag)\n\nCreate a consent-aware wrapper:\n\n```typescript\n\u002F\u002F lib\u002Fanalytics-consent.ts\n\ntype ConsentState = 'granted' | 'denied'\n\ninterface ConsentConfig {\n  analytics_storage: ConsentState\n  ad_storage: ConsentState\n  ad_user_data: ConsentState\n  ad_personalization: ConsentState\n}\n\nconst CONSENT_COOKIE = 'analytics_consent'\n\n\u002F\u002F Initialize with consent mode\nexport const initWithConsent = (measurementId: string) => {\n  if (typeof window === 'undefined') return\n\n  \u002F\u002F Set default consent state (denied until user consents)\n  window.gtag('consent', 'default', {\n    analytics_storage: 'denied',\n    ad_storage: 'denied',\n    ad_user_data: 'denied',\n    ad_personalization: 'denied',\n    wait_for_update: 500, \u002F\u002F Wait for consent banner\n  })\n\n  \u002F\u002F Load gtag\n  const script = document.createElement('script')\n  script.src = `https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=${measurementId}`\n  script.async = true\n  document.head.appendChild(script)\n\n  window.dataLayer = window.dataLayer || []\n  window.gtag = function gtag() {\n    window.dataLayer.push(arguments)\n  }\n  window.gtag('js', new Date())\n  window.gtag('config', measurementId)\n\n  \u002F\u002F Check for existing consent\n  const savedConsent = getCookie(CONSENT_COOKIE)\n  if (savedConsent) {\n    updateConsent(JSON.parse(savedConsent))\n  }\n}\n\n\u002F\u002F Update consent when user makes a choice\nexport const updateConsent = (consent: Partial\u003CConsentConfig>) => {\n  if (typeof window === 'undefined' || !window.gtag) return\n\n  const consentState: ConsentConfig = {\n    analytics_storage: consent.analytics_storage || 'denied',\n    ad_storage: consent.ad_storage || 'denied',\n    ad_user_data: consent.ad_user_data || 'denied',\n    ad_personalization: consent.ad_personalization || 'denied',\n  }\n\n  window.gtag('consent', 'update', consentState)\n\n  \u002F\u002F Save to cookie\n  setCookie(CONSENT_COOKIE, JSON.stringify(consentState), 365)\n}\n\n\u002F\u002F Convenience functions\nexport const acceptAll = () => {\n  updateConsent({\n    analytics_storage: 'granted',\n    ad_storage: 'granted',\n    ad_user_data: 'granted',\n    ad_personalization: 'granted',\n  })\n}\n\nexport const acceptAnalyticsOnly = () => {\n  updateConsent({\n    analytics_storage: 'granted',\n    ad_storage: 'denied',\n    ad_user_data: 'denied',\n    ad_personalization: 'denied',\n  })\n}\n\nexport const denyAll = () => {\n  updateConsent({\n    analytics_storage: 'denied',\n    ad_storage: 'denied',\n    ad_user_data: 'denied',\n    ad_personalization: 'denied',\n  })\n}\n\n\u002F\u002F Cookie utilities\nfunction setCookie(name: string, value: string, days: number) {\n  const date = new Date()\n  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000)\n  document.cookie = `${name}=${value};expires=${date.toUTCString()};path=\u002F;SameSite=Lax`\n}\n\nfunction getCookie(name: string): string | null {\n  const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`))\n  return match ? match[2] : null\n}\n```\n\n## Step 7: Debug Mode (if --debug flag)\n\nAdd debug configuration:\n\n```typescript\n\u002F\u002F For development, enable debug mode\nif (process.env.NODE_ENV === 'development') {\n  window.gtag('config', 'G-XXXXXXXXXX', {\n    debug_mode: true,\n  })\n}\n```\n\nAlso recommend installing the [Google Analytics Debugger](https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fgoogle-analytics-debugger\u002Fjnkmfdileelhofjcijamephohjechhna) Chrome extension.\n\n## Step 8: TypeScript Declarations\n\nCreate `types\u002Fgtag.d.ts` if using TypeScript:\n\n```typescript\n\u002F\u002F types\u002Fgtag.d.ts\ndeclare global {\n  interface Window {\n    gtag: Gtag.Gtag\n    dataLayer: object[]\n  }\n}\n\ndeclare namespace Gtag {\n  interface Gtag {\n    (command: 'config', targetId: string, config?: ConfigParams): void\n    (command: 'set', targetId: string, config: ConfigParams): void\n    (command: 'set', config: ConfigParams): void\n    (command: 'js', date: Date): void\n    (command: 'event', eventName: string, eventParams?: EventParams): void\n    (command: 'consent', consentArg: 'default' | 'update', consentParams: ConsentParams): void\n    (...args: unknown[]): void\n  }\n\n  interface ConfigParams {\n    page_title?: string\n    page_location?: string\n    page_path?: string\n    send_page_view?: boolean\n    debug_mode?: boolean\n    [key: string]: unknown\n  }\n\n  interface EventParams {\n    event_category?: string\n    event_label?: string\n    value?: number\n    [key: string]: unknown\n  }\n\n  interface ConsentParams {\n    analytics_storage?: 'granted' | 'denied'\n    ad_storage?: 'granted' | 'denied'\n    ad_user_data?: 'granted' | 'denied'\n    ad_personalization?: 'granted' | 'denied'\n    wait_for_update?: number\n  }\n}\n\nexport {}\n```\n\n## Step 9: Verification Checklist\n\nAfter implementation, verify:\n\n1. [ ] Measurement ID is correct format (G-XXXXXXXXXX)\n2. [ ] Script loads in production (check Network tab)\n3. [ ] Real-time reports show activity in GA4 dashboard\n4. [ ] Page views are tracked on navigation\n5. [ ] No console errors related to gtag\n6. [ ] Environment variables are not committed to git\n7. [ ] TypeScript has no type errors (if applicable)\n\n## Step 10: Summary Output\n\nAfter completing setup, provide the user with:\n\n1. **Files created\u002Fmodified** (list them)\n2. **Environment variables needed** (with example values)\n3. **Next steps**:\n   - Add the Measurement ID to environment variables\n   - Deploy and verify in GA4 Real-time reports\n   - Set up conversions in GA4 dashboard\n   - Consider adding custom events for key user actions\n\n## Common Issues & Solutions\n\n**\"gtag is not defined\"**\n- Script hasn't loaded yet; ensure async loading is handled\n\n**No data in GA4**\n- Check if ad blockers are preventing tracking\n- Verify Measurement ID is correct\n- Check browser console for errors\n\n**Double page views**\n- SPA router sending duplicate events; implement deduplication\n\n**GDPR Compliance**\n- Always implement consent mode for EU users\n- Use the --consent flag to add consent management\n","# Google Analytics 4 Setup Skill\n\nYou are setting up Google Analytics 4 (GA4) for a project. Follow this comprehensive guide to add analytics properly.\n\n## Arguments\n\nParse the following from `$ARGUMENTS`:\n- **Measurement ID**: Format `G-XXXXXXXXXX` (required, ask if not provided)\n- **--events**: Include custom event tracking helpers\n- **--consent**: Include cookie consent integration\n- **--debug**: Enable debug mode for development\n\n## Step 1: Detect Project Type\n\nScan the project to determine the framework\u002Fsetup:\n\n```\nPriority detection order:\n1. next.config.js\u002Fts → Next.js\n2. nuxt.config.js\u002Fts → Nuxt.js\n3. astro.config.mjs → Astro\n4. svelte.config.js → SvelteKit\n5. remix.config.js → Remix\n6. gatsby-config.js → Gatsby\n7. vite.config.js + src\u002FApp.vue → Vue + Vite\n8. vite.config.js + src\u002FApp.tsx → React + Vite\n9. angular.json → Angular\n10. package.json with \"react-scripts\" → Create React App\n11. index.html only → Plain HTML\n12. _app.tsx\u002Fjsx → Next.js (App Router check: app\u002F directory)\n```\n\nAlso check for:\n- TypeScript usage (tsconfig.json)\n- Existing analytics (search for gtag, GA, analytics)\n- Package manager (pnpm-lock.yaml, yarn.lock, package-lock.json)\n\n## Step 2: Validate Measurement ID\n\nThe Measurement ID must:\n- Start with `G-` (GA4 format)\n- Be followed by exactly 10 alphanumeric characters\n- Example: `G-ABC1234567`\n\nIf the user provides a `UA-` ID, inform them:\n> \"You provided a Universal Analytics ID (UA-). GA4 uses Measurement IDs starting with 'G-'.\n> Universal Analytics was sunset in July 2024. You'll need to create a GA4 property at analytics.google.com\"\n\n## Step 3: Implementation by Framework\n\n### Next.js (App Router - app\u002F directory)\n\nCreate `app\u002Flayout.tsx` modification or create `components\u002FGoogleAnalytics.tsx`:\n\n```tsx\n\u002F\u002F components\u002FGoogleAnalytics.tsx\n'use client'\n\nimport Script from 'next\u002Fscript'\n\ninterface GoogleAnalyticsProps {\n  measurementId: string\n}\n\nexport function GoogleAnalytics({ measurementId }: GoogleAnalyticsProps) {\n  return (\n    \u003C>\n      \u003CScript\n        src={`https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=${measurementId}`}\n        strategy=\"afterInteractive\"\n      \u002F>\n      \u003CScript id=\"google-analytics\" strategy=\"afterInteractive\">\n        {`\n          window.dataLayer = window.dataLayer || [];\n          function gtag(){dataLayer.push(arguments);}\n          gtag('js', new Date());\n          gtag('config', '${measurementId}');\n        `}\n      \u003C\u002FScript>\n    \u003C\u002F>\n  )\n}\n```\n\nAdd to root layout:\n```tsx\n\u002F\u002F app\u002Flayout.tsx\nimport { GoogleAnalytics } from '@\u002Fcomponents\u002FGoogleAnalytics'\n\n\u002F\u002F Add inside \u003Cbody> or \u003Chtml>:\n\u003CGoogleAnalytics measurementId=\"G-XXXXXXXXXX\" \u002F>\n```\n\n### Next.js (Pages Router - pages\u002F directory)\n\nModify `pages\u002F_app.tsx`:\n\n```tsx\n\u002F\u002F pages\u002F_app.tsx\nimport type { AppProps } from 'next\u002Fapp'\nimport Script from 'next\u002Fscript'\n\nconst GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID\n\nexport default function App({ Component, pageProps }: AppProps) {\n  return (\n    \u003C>\n      \u003CScript\n        src={`https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=${GA_MEASUREMENT_ID}`}\n        strategy=\"afterInteractive\"\n      \u002F>\n      \u003CScript id=\"google-analytics\" strategy=\"afterInteractive\">\n        {`\n          window.dataLayer = window.dataLayer || [];\n          function gtag(){dataLayer.push(arguments);}\n          gtag('js', new Date());\n          gtag('config', '${GA_MEASUREMENT_ID}');\n        `}\n      \u003C\u002FScript>\n      \u003CComponent {...pageProps} \u002F>\n    \u003C\u002F>\n  )\n}\n```\n\n### React (Vite\u002FCRA)\n\nCreate `src\u002Flib\u002Fanalytics.ts`:\n\n```typescript\n\u002F\u002F src\u002Flib\u002Fanalytics.ts\nexport const GA_MEASUREMENT_ID = import.meta.env.VITE_GA_MEASUREMENT_ID\n\ndeclare global {\n  interface Window {\n    gtag: (...args: unknown[]) => void\n    dataLayer: unknown[]\n  }\n}\n\nexport const initGA = () => {\n  if (typeof window === 'undefined') return\n\n  const script = document.createElement('script')\n  script.src = `https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=${GA_MEASUREMENT_ID}`\n  script.async = true\n  document.head.appendChild(script)\n\n  window.dataLayer = window.dataLayer || []\n  window.gtag = function gtag() {\n    window.dataLayer.push(arguments)\n  }\n  window.gtag('js', new Date())\n  window.gtag('config', GA_MEASUREMENT_ID)\n}\n\nexport const pageview = (url: string) => {\n  window.gtag('config', GA_MEASUREMENT_ID, {\n    page_path: url,\n  })\n}\n\nexport const event = (action: string, params?: Record\u003Cstring, unknown>) => {\n  window.gtag('event', action, params)\n}\n```\n\nInitialize in `src\u002Fmain.tsx`:\n\n```tsx\nimport { initGA } from '.\u002Flib\u002Fanalytics'\n\n\u002F\u002F Initialize before render\nif (import.meta.env.PROD) {\n  initGA()\n}\n```\n\n### Vue 3 (Vite)\n\nCreate `src\u002Fplugins\u002Fanalytics.ts`:\n\n```typescript\n\u002F\u002F src\u002Fplugins\u002Fanalytics.ts\nimport type { App } from 'vue'\nimport type { Router } from 'vue-router'\n\nconst GA_MEASUREMENT_ID = import.meta.env.VITE_GA_MEASUREMENT_ID\n\ndeclare global {\n  interface Window {\n    gtag: (...args: unknown[]) => void\n    dataLayer: unknown[]\n  }\n}\n\nexport const analyticsPlugin = {\n  install(app: App, { router }: { router: Router }) {\n    \u002F\u002F Load gtag script\n    const script = document.createElement('script')\n    script.src = `https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=${GA_MEASUREMENT_ID}`\n    script.async = true\n    document.head.appendChild(script)\n\n    window.dataLayer = window.dataLayer || []\n    window.gtag = function gtag() {\n      window.dataLayer.push(arguments)\n    }\n    window.gtag('js', new Date())\n    window.gtag('config', GA_MEASUREMENT_ID)\n\n    \u002F\u002F Track route changes\n    router.afterEach((to) => {\n      window.gtag('config', GA_MEASUREMENT_ID, {\n        page_path: to.fullPath,\n      })\n    })\n\n    \u002F\u002F Provide global methods\n    app.config.globalProperties.$gtag = window.gtag\n  }\n}\n```\n\n### Nuxt 3\n\nCreate `plugins\u002Fanalytics.client.ts`:\n\n```typescript\n\u002F\u002F plugins\u002Fanalytics.client.ts\nexport default defineNuxtPlugin(() => {\n  const config = useRuntimeConfig()\n  const measurementId = config.public.gaMeasurementId\n\n  if (!measurementId) return\n\n  \u002F\u002F Load gtag\n  useHead({\n    script: [\n      {\n        src: `https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=${measurementId}`,\n        async: true,\n      },\n      {\n        innerHTML: `\n          window.dataLayer = window.dataLayer || [];\n          function gtag(){dataLayer.push(arguments);}\n          gtag('js', new Date());\n          gtag('config', '${measurementId}');\n        `,\n      },\n    ],\n  })\n\n  \u002F\u002F Track route changes\n  const router = useRouter()\n  router.afterEach((to) => {\n    window.gtag('config', measurementId, {\n      page_path: to.fullPath,\n    })\n  })\n})\n```\n\nAdd to `nuxt.config.ts`:\n\n```typescript\nexport default defineNuxtConfig({\n  runtimeConfig: {\n    public: {\n      gaMeasurementId: process.env.NUXT_PUBLIC_GA_MEASUREMENT_ID,\n    },\n  },\n})\n```\n\n### Astro\n\nCreate `src\u002Fcomponents\u002FAnalytics.astro`:\n\n```astro\n---\n\u002F\u002F src\u002Fcomponents\u002FAnalytics.astro\ninterface Props {\n  measurementId: string\n}\n\nconst { measurementId } = Astro.props\n---\n\n\u003Cscript\n  is:inline\n  define:vars={{ measurementId }}\n  src={`https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=${measurementId}`}\n>\u003C\u002Fscript>\n\n\u003Cscript is:inline define:vars={{ measurementId }}>\n  window.dataLayer = window.dataLayer || [];\n  function gtag() {\n    dataLayer.push(arguments);\n  }\n  gtag('js', new Date());\n  gtag('config', measurementId);\n\u003C\u002Fscript>\n```\n\nAdd to layout:\n\n```astro\n---\nimport Analytics from '..\u002Fcomponents\u002FAnalytics.astro'\n---\n\u003Chtml>\n  \u003Chead>\n    \u003CAnalytics measurementId=\"G-XXXXXXXXXX\" \u002F>\n  \u003C\u002Fhead>\n\u003C\u002Fhtml>\n```\n\n### SvelteKit\n\nCreate `src\u002Flib\u002Fanalytics.ts` and `src\u002Froutes\u002F+layout.svelte`:\n\n```typescript\n\u002F\u002F src\u002Flib\u002Fanalytics.ts\nimport { browser } from '$app\u002Fenvironment'\n\nexport const GA_MEASUREMENT_ID = import.meta.env.VITE_GA_MEASUREMENT_ID\n\nexport function initGA() {\n  if (!browser) return\n\n  const script = document.createElement('script')\n  script.src = `https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=${GA_MEASUREMENT_ID}`\n  script.async = true\n  document.head.appendChild(script)\n\n  window.dataLayer = window.dataLayer || []\n  window.gtag = function gtag() {\n    window.dataLayer.push(arguments)\n  }\n  window.gtag('js', new Date())\n  window.gtag('config', GA_MEASUREMENT_ID)\n}\n\nexport function trackPageview(url: string) {\n  if (!browser) return\n  window.gtag('config', GA_MEASUREMENT_ID, { page_path: url })\n}\n```\n\n```svelte\n\u003C!-- src\u002Froutes\u002F+layout.svelte -->\n\u003Cscript lang=\"ts\">\n  import { onMount } from 'svelte'\n  import { page } from '$app\u002Fstores'\n  import { initGA, trackPageview } from '$lib\u002Fanalytics'\n\n  onMount(() => {\n    initGA()\n  })\n\n  $: if ($page.url.pathname) {\n    trackPageview($page.url.pathname)\n  }\n\u003C\u002Fscript>\n\n\u003Cslot \u002F>\n```\n\n### Plain HTML\n\nAdd to `\u003Chead>`:\n\n```html\n\u003C!-- Google Analytics -->\n\u003Cscript async src=\"https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=G-XXXXXXXXXX\">\u003C\u002Fscript>\n\u003Cscript>\n  window.dataLayer = window.dataLayer || [];\n  function gtag(){dataLayer.push(arguments);}\n  gtag('js', new Date());\n  gtag('config', 'G-XXXXXXXXXX');\n\u003C\u002Fscript>\n```\n\n## Step 4: Environment Variables\n\nCreate or update `.env` \u002F `.env.local`:\n\n```bash\n# For Next.js\nNEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX\n\n# For Vite (React\u002FVue\u002FSvelte)\nVITE_GA_MEASUREMENT_ID=G-XXXXXXXXXX\n\n# For Nuxt\nNUXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX\n```\n\nAdd to `.env.example` if it exists (without the actual ID):\n\n```bash\n# Google Analytics 4 Measurement ID\nNEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX\n```\n\n**IMPORTANT**: Add `.env.local` to `.gitignore` if not already present.\n\n## Step 5: Event Tracking Helpers (if --events flag)\n\nCreate a comprehensive events utility:\n\n```typescript\n\u002F\u002F lib\u002Fanalytics-events.ts\n\n\u002F**\n * GA4 Event Tracking Utilities\n *\n * Recommended events: https:\u002F\u002Fsupport.google.com\u002Fanalytics\u002Fanswer\u002F9267735\n *\u002F\n\ntype GTagEvent = {\n  action: string\n  category?: string\n  label?: string\n  value?: number\n  [key: string]: unknown\n}\n\n\u002F\u002F Core event function\nexport const trackEvent = ({ action, category, label, value, ...rest }: GTagEvent) => {\n  if (typeof window === 'undefined' || !window.gtag) return\n\n  window.gtag('event', action, {\n    event_category: category,\n    event_label: label,\n    value,\n    ...rest,\n  })\n}\n\n\u002F\u002F Engagement events\nexport const trackClick = (elementName: string, location?: string) => {\n  trackEvent({\n    action: 'click',\n    category: 'engagement',\n    label: elementName,\n    click_location: location,\n  })\n}\n\nexport const trackScroll = (percentage: number) => {\n  trackEvent({\n    action: 'scroll',\n    category: 'engagement',\n    value: percentage,\n  })\n}\n\n\u002F\u002F Conversion events\nexport const trackSignUp = (method: string) => {\n  trackEvent({\n    action: 'sign_up',\n    method,\n  })\n}\n\nexport const trackLogin = (method: string) => {\n  trackEvent({\n    action: 'login',\n    method,\n  })\n}\n\nexport const trackPurchase = (params: {\n  transactionId: string\n  value: number\n  currency: string\n  items?: Array\u003C{\n    itemId: string\n    itemName: string\n    price: number\n    quantity: number\n  }>\n}) => {\n  trackEvent({\n    action: 'purchase',\n    transaction_id: params.transactionId,\n    value: params.value,\n    currency: params.currency,\n    items: params.items,\n  })\n}\n\n\u002F\u002F Content events\nexport const trackSearch = (searchTerm: string) => {\n  trackEvent({\n    action: 'search',\n    search_term: searchTerm,\n  })\n}\n\nexport const trackShare = (method: string, contentType: string, itemId: string) => {\n  trackEvent({\n    action: 'share',\n    method,\n    content_type: contentType,\n    item_id: itemId,\n  })\n}\n\n\u002F\u002F Form events\nexport const trackFormStart = (formName: string) => {\n  trackEvent({\n    action: 'form_start',\n    form_name: formName,\n  })\n}\n\nexport const trackFormSubmit = (formName: string, success: boolean) => {\n  trackEvent({\n    action: 'form_submit',\n    form_name: formName,\n    success,\n  })\n}\n\n\u002F\u002F Error tracking\nexport const trackError = (errorMessage: string, errorLocation?: string) => {\n  trackEvent({\n    action: 'exception',\n    description: errorMessage,\n    fatal: false,\n    error_location: errorLocation,\n  })\n}\n\n\u002F\u002F Custom event builder for flexibility\nexport const createCustomEvent = (eventName: string) => {\n  return (params?: Record\u003Cstring, unknown>) => {\n    trackEvent({\n      action: eventName,\n      ...params,\n    })\n  }\n}\n```\n\n## Step 6: Cookie Consent Integration (if --consent flag)\n\nCreate a consent-aware wrapper:\n\n```typescript\n\u002F\u002F lib\u002Fanalytics-consent.ts\n\ntype ConsentState = 'granted' | 'denied'\n\ninterface ConsentConfig {\n  analytics_storage: ConsentState\n  ad_storage: ConsentState\n  ad_user_data: ConsentState\n  ad_personalization: ConsentState\n}\n\nconst CONSENT_COOKIE = 'analytics_consent'\n\n\u002F\u002F Initialize with consent mode\nexport const initWithConsent = (measurementId: string) => {\n  if (typeof window === 'undefined') return\n\n  \u002F\u002F Set default consent state (denied until user consents)\n  window.gtag('consent', 'default', {\n    analytics_storage: 'denied',\n    ad_storage: 'denied',\n    ad_user_data: 'denied',\n    ad_personalization: 'denied',\n    wait_for_update: 500, \u002F\u002F Wait for consent banner\n  })\n\n  \u002F\u002F Load gtag\n  const script = document.createElement('script')\n  script.src = `https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=${measurementId}`\n  script.async = true\n  document.head.appendChild(script)\n\n  window.dataLayer = window.dataLayer || []\n  window.gtag = function gtag() {\n    window.dataLayer.push(arguments)\n  }\n  window.gtag('js', new Date())\n  window.gtag('config', measurementId)\n\n  \u002F\u002F Check for existing consent\n  const savedConsent = getCookie(CONSENT_COOKIE)\n  if (savedConsent) {\n    updateConsent(JSON.parse(savedConsent))\n  }\n}\n\n\u002F\u002F Update consent when user makes a choice\nexport const updateConsent = (consent: Partial\u003CConsentConfig>) => {\n  if (typeof window === 'undefined' || !window.gtag) return\n\n  const consentState: ConsentConfig = {\n    analytics_storage: consent.analytics_storage || 'denied',\n    ad_storage: consent.ad_storage || 'denied',\n    ad_user_data: consent.ad_user_data || 'denied',\n    ad_personalization: consent.ad_personalization || 'denied',\n  }\n\n  window.gtag('consent', 'update', consentState)\n\n  \u002F\u002F Save to cookie\n  setCookie(CONSENT_COOKIE, JSON.stringify(consentState), 365)\n}\n\n\u002F\u002F Convenience functions\nexport const acceptAll = () => {\n  updateConsent({\n    analytics_storage: 'granted',\n    ad_storage: 'granted',\n    ad_user_data: 'granted',\n    ad_personalization: 'granted',\n  })\n}\n\nexport const acceptAnalyticsOnly = () => {\n  updateConsent({\n    analytics_storage: 'granted',\n    ad_storage: 'denied',\n    ad_user_data: 'denied',\n    ad_personalization: 'denied',\n  })\n}\n\nexport const denyAll = () => {\n  updateConsent({\n    analytics_storage: 'denied',\n    ad_storage: 'denied',\n    ad_user_data: 'denied',\n    ad_personalization: 'denied',\n  })\n}\n\n\u002F\u002F Cookie utilities\nfunction setCookie(name: string, value: string, days: number) {\n  const date = new Date()\n  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000)\n  document.cookie = `${name}=${value};expires=${date.toUTCString()};path=\u002F;SameSite=Lax`\n}\n\nfunction getCookie(name: string): string | null {\n  const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`))\n  return match ? match[2] : null\n}\n```\n\n## Step 7: Debug Mode (if --debug flag)\n\nAdd debug configuration:\n\n```typescript\n\u002F\u002F For development, enable debug mode\nif (process.env.NODE_ENV === 'development') {\n  window.gtag('config', 'G-XXXXXXXXXX', {\n    debug_mode: true,\n  })\n}\n```\n\nAlso recommend installing the [Google Analytics Debugger](https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fgoogle-analytics-debugger\u002Fjnkmfdileelhofjcijamephohjechhna) Chrome extension.\n\n## Step 8: TypeScript Declarations\n\nCreate `types\u002Fgtag.d.ts` if using TypeScript:\n\n```typescript\n\u002F\u002F types\u002Fgtag.d.ts\ndeclare global {\n  interface Window {\n    gtag: Gtag.Gtag\n    dataLayer: object[]\n  }\n}\n\ndeclare namespace Gtag {\n  interface Gtag {\n    (command: 'config', targetId: string, config?: ConfigParams): void\n    (command: 'set', targetId: string, config: ConfigParams): void\n    (command: 'set', config: ConfigParams): void\n    (command: 'js', date: Date): void\n    (command: 'event', eventName: string, eventParams?: EventParams): void\n    (command: 'consent', consentArg: 'default' | 'update', consentParams: ConsentParams): void\n    (...args: unknown[]): void\n  }\n\n  interface ConfigParams {\n    page_title?: string\n    page_location?: string\n    page_path?: string\n    send_page_view?: boolean\n    debug_mode?: boolean\n    [key: string]: unknown\n  }\n\n  interface EventParams {\n    event_category?: string\n    event_label?: string\n    value?: number\n    [key: string]: unknown\n  }\n\n  interface ConsentParams {\n    analytics_storage?: 'granted' | 'denied'\n    ad_storage?: 'granted' | 'denied'\n    ad_user_data?: 'granted' | 'denied'\n    ad_personalization?: 'granted' | 'denied'\n    wait_for_update?: number\n  }\n}\n\nexport {}\n```\n\n## Step 9: Verification Checklist\n\nAfter implementation, verify:\n\n1. [ ] Measurement ID is correct format (G-XXXXXXXXXX)\n2. [ ] Script loads in production (check Network tab)\n3. [ ] Real-time reports show activity in GA4 dashboard\n4. [ ] Page views are tracked on navigation\n5. [ ] No console errors related to gtag\n6. [ ] Environment variables are not committed to git\n7. [ ] TypeScript has no type errors (if applicable)\n\n## Step 10: Summary Output\n\nAfter completing setup, provide the user with:\n\n1. **Files created\u002Fmodified** (list them)\n2. **Environment variables needed** (with example values)\n3. **Next steps**:\n   - Add the Measurement ID to environment variables\n   - Deploy and verify in GA4 Real-time reports\n   - Set up conversions in GA4 dashboard\n   - Consider adding custom events for key user actions\n\n## Common Issues & Solutions\n\n**\"gtag is not defined\"**\n- Script hasn't loaded yet; ensure async loading is handled\n\n**No data in GA4**\n- Check if ad blockers are preventing tracking\n- Verify Measurement ID is correct\n- Check browser console for errors\n\n**Double page views**\n- SPA router sending duplicate events; implement deduplication\n\n**GDPR Compliance**\n- Always implement consent mode for EU users\n- Use the --consent flag to add consent management\n",{"name":5,"description":7,"argument-hint":55},"\u003Cmeasurement-id> [--events] [--consent] [--debug]","main","e7e336ac628c3e3bd771aff1aaa469c93778f94a","skills\u002Fjeftekhari\u002Fadd-analytics",0,"https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del","2026-08-23 22:39:37",{"source":8,"skillName":5,"commands":64,"prompt":74,"zipAvailable":75},[65,68,71],{"tool":66,"command":67},"npx","npx skills add kbarbel640-del\u002Fskills --skill add-analytics",{"tool":69,"command":70},"bunx","bunx skills add kbarbel640-del\u002Fskills --skill add-analytics",{"tool":72,"command":73},"pnpm","pnpm dlx skills add kbarbel640-del\u002Fskills --skill add-analytics","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fjeftekhari\u002Fadd-analytics\u002FSKILL.md",true,[77],{"path":78,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":81,"sourceHtmlUrl":82},"_meta.json","REFERENCE","参考文档",282,"https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fjeftekhari\u002Fadd-analytics\u002F_meta.json",[84,113,140,161,167,187],{"skillNo":85,"name":86,"nameZh":6,"description":87,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":93,"publishedAt":50},"01M6G8J55967D6281ACMKAKTEQ","crowd-prompting","A marketplace where AI agents improve prompts, system instructions, tool descriptions, and other text-based content with domain expertise from real-world operations — and earn tokens for valuable contributions.","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fzzadrian\u002Fcrowd-prompting\u002FSKILL.md",[90],{"categoryNo":91,"categoryName":92,"taxonomyType":28,"taxonomyTypeDesc":29},"01JBSEEDCAT000000000000036","内容创作者",[94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112],"crowd prompting","prompting","api","with","tokens","domain","world","prompts","operations","instructions","text","tool","system","improve","productivity","marketplace","https","content","ai agents",{"skillNo":114,"name":115,"nameZh":6,"description":116,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":117,"categories":118,"keywords":122,"publishedAt":50},"01M6G8J0PKPAYVET6BWE8W4C26","dilemm-ai","Compete in DilemmAI, the prisoner's dilemma AI arena at dilemm.ai. Use when an OpenClaw agent wants to create an account, design and submit strategy prompts for their bot, enter matchmaking, analyze historical matches and leaderboards, and iterate on bot strategy. Requires headless browser automation (no API available yet).","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fzyori\u002Fdilemm-ai\u002FSKILL.md",[119],{"categoryNo":120,"categoryName":121,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[123,96,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,101,139],"dilemm ai","arena","analyze","browser","openclaw agent","create","automation","browser automation","bot","openclaw","design","strategy","headless","compete","submit","matchmaking","use",{"skillNo":141,"name":142,"nameZh":6,"description":143,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":144,"categories":145,"keywords":149,"publishedAt":50},"01M6G8HWAF3K9SW7NP3Z83CPJ6","arxiv-paper-reviews","Interact with arXiv Crawler API to fetch papers, read reviews, and submit comments. Use when working with arXiv papers, fetching paper lists by date\u002Fcategory\u002Finterest, viewing paper details with comments, or submitting paper reviews via API at http:\u002F\u002F150.158.152.82:8000.","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fzxrys\u002Fweak-accept\u002FSKILL.md",[146],{"categoryNo":147,"categoryName":148,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000021","资料检索与研究",[150,151,152,153,154,155,156,97,157,137,139,158,96,159,160],"arxiv paper reviews","reviews","arxiv","paper","crawler","papers","comments","fetch","read","http","via",{"skillNo":162,"name":142,"nameZh":6,"description":143,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":163,"categories":164,"keywords":166,"publishedAt":50},"01M6G8HQJ7N7WMY6YV7D7SSJ16","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fzxrys\u002Farxiv-paper-reviews\u002FSKILL.md",[165],{"categoryNo":147,"categoryName":148,"taxonomyType":20,"taxonomyTypeDesc":21},[153,152,151,150,160,155,156,97,154,137,139,157,158,96,159],{"skillNo":168,"name":169,"nameZh":6,"description":170,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":171,"categories":172,"keywords":173,"publishedAt":50},"01M6G8HM95Y64JNVFC2HN4E2BG","git-summary","Get a quick summary of the current Git repository including status, recent commits, branches, and contributors.","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fzweack\u002Fgit-summary\u002FSKILL.md",[],[174,175,176,177,178,179,180,181,182,183,184,185,186],"git","summary","git summary","commits","repository","win32","status","linux","contributors","true","quick","get","branches",{"skillNo":188,"name":189,"nameZh":6,"description":190,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":191,"categories":192,"keywords":197,"publishedAt":50},"01M6G8HGEGF05CNEJCGVYFSC4R","agent-constitution","Interact with AgentConstitution governance contracts on Base Sepolia. Check compliance, read rules, log actions, query governance state.","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fztsalexey\u002Fagent-constitution\u002FSKILL.md",[193,194],{"categoryNo":120,"categoryName":121,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":195,"categoryName":196,"taxonomyType":28,"taxonomyTypeDesc":29},"01JBSEEDCAT000000000000037","律师与法务",[198,199,200,201,97,202,203,56,204,158,205,206,207,208,209,110,210,211,212],"agent constitution","constitution","contracts","tree","query","base","log","check","Rules","projects","compliance","actions","state","governance","github"]