A

添加分析

(Add Analytics)

add-analytics

🌐 English

将 Google Analytics 4 跟踪添加到任何项目。检测框架、添加跟踪代码、设置事件并配置隐私设置。

数据来源：ClawHub。在 ClawSkills 查看

2.6k下载量

1收藏数

7浏览量

安装

选择你使用的 Agent

方法一：命令行安装（推荐）

关于添加分析

--- name: add-analytics description: Add Google Analytics 4 tracking to any project. Detects framework, adds tracking code, sets up events, and configures privacy settings. argument-hint: " [--events] [--consent] [--debug]" ---

Google Analytics 4 Setup Skill

You are setting up Google Analytics 4 (GA4) for a project. Follow this comprehensive guide to add analytics properly.

Arguments

Parse the following from $ARGUMENTS:

Measurement ID: Format G-XXXXXXXXXX (required, ask if not provided)
--events: Include custom event tracking helpers
--consent: Include cookie consent integration
--debug: Enable debug mode for development

Step 1: Detect Project Type

Scan the project to determine the framework/setup:

Priority detection order:
1. next.config.js/ts → Next.js
2. nuxt.config.js/ts → Nuxt.js
3. astro.config.mjs → Astro
4. svelte.config.js → SvelteKit
5. remix.config.js → Remix
6. gatsby-config.js → Gatsby
7. vite.config.js + src/App.vue → Vue + Vite
8. vite.config.js + src/App.tsx → React + Vite
9. angular.json → Angular
10. package.json with "react-scripts" → Create React App
11. index.html only → Plain HTML
12. _app.tsx/jsx → Next.js (App Router check: app/ directory)

Also check for:

TypeScript usage (tsconfig.json)
Existing analytics (search for gtag, GA, analytics)
Package manager (pnpm-lock.yaml, yarn.lock, package-lock.json)

Step 2: Validate Measurement ID

The Measurement ID must:

Start with G- (GA4 format)
Be followed by exactly 10 alphanumeric characters
Example: G-ABC1234567

If the user provides a UA- ID, inform them: > "You provided a Universal Analytics ID (UA-). GA4 uses Measurement IDs starting with 'G-'. > Universal Analytics was sunset in July 2024. You'll need to create a GA4 property at analytics.google.com"

Step 3: Implementation by Framework

Next.js (App Router - app/ directory)

Create app/layout.tsx modification or create components/GoogleAnalytics.tsx:

// components/GoogleAnalytics.tsx
'use client'

import Script from 'next/script'

interface GoogleAnalyticsProps {
  measurementId: string
}

export function GoogleAnalytics({ measurementId }: GoogleAnalyticsProps) {
  return (
    <>
      <Script
        src={`https://www.googletagmanager.com/gtag/js?id=${measurementId}`}
        strategy="afterInteractive"
      />
      <Script id="google-analytics" strategy="afterInteractive">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '${measurementId}');
        `}
      </Script>
    </>
  )
}

Add to root layout:

// app/layout.tsx
import { GoogleAnalytics } from '@/components/GoogleAnalytics'

// Add inside <body> or <html>:
<GoogleAnalytics measurementId="G-XXXXXXXXXX" />

Next.js (Pages Router - pages/ directory)

Modify pages/_app.tsx:

// pages/_app.tsx
import type { AppProps } from 'next/app'
import Script from 'next/script'

const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Script
        src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
        strategy="afterInteractive"
      />
      <Script id="google-analytics" strategy="afterInteractive">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '${GA_MEASUREMENT_ID}');
        `}
      </Script>
      <Component {...pageProps} />
    </>
  )
}

React (Vite/CRA)

Create src/lib/analytics.ts:

// src/lib/analytics.ts
export const GA_MEASUREMENT_ID = import.meta.env.VITE_GA_MEASUREMENT_ID

declare global {
  interface Window {
    gtag: (...args: unknown[]) => void
    dataLayer: unknown[]
  }
}

export const initGA = () => {
  if (typeof window === 'undefined') return

  const script = document.createElement('script')
  script.src = `https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`
  script.async = true
  document.head.appendChild(script)

  window.dataLayer = window.dataLayer || []
  window.gtag = function gtag() {
    window.dataLayer.push(arguments)
  }
  window.gtag('js', new Date())
  window.gtag('config', GA_MEASUREMENT_ID)
}

export const pageview = (url: string) => {
  window.gtag('config', GA_MEASUREMENT_ID, {
    page_path: url,
  })
}

export const event = (action: string, params?: Record<string, unknown>) => {
  window.gtag('event', action, params)
}

Initialize in src/main.tsx:

import { initGA } from './lib/analytics'

// Initialize before render
if (import.meta.env.PROD) {
  initGA()
}

Vue 3 (Vite)

Create src/plugins/analytics.ts:

// src/plugins/analytics.ts
import type { App } from 'vue'
import type { Router } from 'vue-router'

const GA_MEASUREMENT_ID = import.meta.env.VITE_GA_MEASUREMENT_ID

declare global {
  interface Window {
    gtag: (...args: unknown[]) => void
    dataLayer: unknown[]
  }
}

export const analyticsPlugin = {
  install(app: App, { router }: { router: Router }) {
    // Load gtag script
    const script = document.createElement('script')
    script.src = `https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`
    script.async = true
    document.head.appendChild(script)

    window.dataLayer = window.dataLayer || []
    window.gtag = function gtag() {
      window.dataLayer.push(arguments)
    }
    window.gtag('js', new Date())
    window.gtag('config', GA_MEASUREMENT_ID)

    // Track route changes
    router.afterEach((to) => {
      window.gtag('config', GA_MEASUREMENT_ID, {
        page_path: to.fullPath,
      })
    })

    // Provide global methods
    app.config.globalProperties.$gtag = window.gtag
  }
}

Nuxt 3

Create plugins/analytics.client.ts:

// plugins/analytics.client.ts
export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig()
  const measurementId = config.public.gaMeasurementId

  if (!measurementId) return

  // Load gtag
  useHead({
    script: [
      {
        src: `https://www.googletagmanager.com/gtag/js?id=${measurementId}`,
        async: true,
      },
      {
        innerHTML: `
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '${measurementId}');
        `,
      },
    ],
  })

  // Track route changes
  const router = useRouter()
  router.afterEach((to) => {
    window.gtag('config', measurementId, {
      page_path: to.fullPath,
    })
  })
})

Add to nuxt.config.ts:

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      gaMeasurementId: process.env.NUXT_PUBLIC_GA_MEASUREMENT_ID,
    },
  },
})

Astro

Create src/components/Analytics.astro:

---
// src/components/Analytics.astro
interface Props {
  measurementId: string
}

const { measurementId } = Astro.props
---

<script
  is:inline
  define:vars={{ measurementId }}
  src={`https://www.googletagmanager.com/gtag/js?id=${measurementId}`}
></script>

<script is:inline define:vars={{ measurementId }}>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag('js', new Date());
  gtag('config', measurementId);
</script>

Add to layout:

---
import Analytics from '../components/Analytics.astro'
---
<html>
  <head>
    <Analytics measurementId="G-XXXXXXXXXX" />
  </head>
</html>

SvelteKit

Create src/lib/analytics.ts and src/routes/+layout.svelte:

// src/lib/analytics.ts
import { browser } from '$app/environment'

export const GA_MEASUREMENT_ID = import.meta.env.VITE_GA_MEASUREMENT_ID

export function initGA() {
  if (!browser) return

...

Prompt 示例

安装添加分析后，可以对 AI 说这些话来触发它

U

Help me get started with Add Analytics

A

Explains what Add Analytics does, walks through the setup, and runs a quick demo based on your current project

U

Use Add Analytics to add Google Analytics 4 tracking to any project

A

Invokes Add Analytics with the right parameters and returns the result directly in the conversation

U

What can I do with Add Analytics in my data & analytics workflow?

A

Lists the top use cases for Add Analytics, with example commands for each scenario

常见问题

如何安装添加分析？▾

将技能文件夹放到 ~/.claude/skills/add-analytics/ 目录（个人级，所有项目可用），或 .claude/skills/add-analytics/（项目级）。重启 AI 客户端后，用 /add-analytics 主动调用，或让 AI 根据上下文自动发现并使用。

添加分析支持哪些 AI 平台？▾

添加分析支持 Claude、Cursor、OpenClaw，可与这些 AI 平台无缝集成，扩展其能力。

添加分析是免费的吗？▾

添加分析可免费安装使用。请查阅仓库了解许可证信息。

添加分析有什么功能？▾

将 Google Analytics 4 跟踪添加到任何项目。检测框架、添加跟踪代码、设置事件并配置隐私设置。

添加分析属于哪个分类？▾

添加分析属于「Data & Analytics」分类，该分类的技能帮助 AI 智能体在此领域执行专业任务。

使用场景

Getting Started with Add Analytics→Automate Data & Analytics Workflows with Add Analytics→Team Collaboration with Add Analytics→

添加分析

安装

关于添加分析

Google Analytics 4 Setup Skill

Arguments

Step 1: Detect Project Type

Step 2: Validate Measurement ID

Step 3: Implementation by Framework

Next.js (App Router - app/ directory)

Next.js (Pages Router - pages/ directory)

React (Vite/CRA)

Vue 3 (Vite)

Nuxt 3

Astro

SvelteKit

Prompt 示例

常见问题

使用场景

同类技能推荐

Weather

Multi Search Engine

Tavily 搜索

Baidu web search

添加分析

安装

关于 添加分析

Google Analytics 4 Setup Skill

Arguments

Step 1: Detect Project Type

Step 2: Validate Measurement ID

Step 3: Implementation by Framework

Next.js (App Router - app/ directory)

Next.js (Pages Router - pages/ directory)

React (Vite/CRA)

Vue 3 (Vite)

Nuxt 3

Astro

SvelteKit

Prompt 示例

常见问题

使用场景

同类技能推荐

Weather

Multi Search Engine

Tavily 搜索

Baidu web search

关于添加分析