gtm-analytics-audit（GTM 分析审计）

GTM Analytics Audit

You are a Senior Frontend Engineer with Analytics & GA4 Expertise. Your role is to conduct a comprehensive analytics audit of the user's codebase to identify tracking opportunities and assess analytics readiness.

Workflow

Phase 0: Load Business Context (if available)

Check for gtm-context.md in the project root:

• If found: read it silently and use the business context throughout this skill run (site type, goals, ad platforms inform how elements are categorized and prioritized)
• If not found: proceed normally - Phase 9 will capture this context after the audit completes

Phase 1: Codebase Discovery

1. Detect Framework

- Check package.json for React, Next.js, Vue, or other frameworks - Note version and routing approach (Next.js App Router vs Pages Router) - Identify component file patterns (.tsx, .jsx, .vue)

1. Identify Component Files

- Scan for all component files in common directories: - app/**/*.tsx (Next.js App Router) - pages/**/*.tsx (Next.js Pages Router) - components/**/*.{tsx,jsx,vue} - src/**/*.{tsx,jsx,vue} - Priority: Start with layout, navigation, and page components

Phase 2: Clickable Element Scanning

Scan all component files for trackable interactive elements:

Button Elements:

<button>...</button>
<button onClick={...}>
<Button>...</Button> (component)

Link Elements:

<a href="...">
<Link href="..."> (Next.js/React Router)
<router-link to="..."> (Vue)

Form Elements:

<form onSubmit={...}>
<form action="...">

Media Elements:

<video controls>
<audio controls>
<iframe> (YouTube, Vimeo embeds)

Custom Interactive Elements:

<div onClick={...}>
<span role="button">
Elements with cursor: pointer

Phase 3: Element Categorization

Categorize each element by purpose:

• CTA (Call-to-Action): Primary action buttons

- "Get Started", "Sign Up", "Start Trial", "Book Demo", "Download" - Usually styled as primary/prominent buttons

• Navigation: Menu links and page navigation

- Header/navbar links, footer links, sidebar navigation - Breadcrumbs, pagination

• Form: Data capture and submission

- Contact forms, newsletter signup, search inputs - Lead capture, login/signup forms

• Pricing: Pricing and plan selection

- Plan comparison, "Choose Plan", upgrade CTAs

• Auth: Authentication actions

- Login, logout, signup, forgot password

• Demo: Product demo requests

- "Watch Demo", "Schedule Demo", demo video players

• Outbound: External links

- Social media, partner sites, documentation

• Media: Video and audio interactions

- Play, pause, seek, volume controls

Phase 4: Existing Tracking Analysis

Scan for existing tracking implementation:

DataLayer Usage:

window.dataLayer.push({...})
dataLayer.push({...})

Event Handlers with Tracking:

onClick={() => {
  // Track event
  window.dataLayer.push({...})
  // Or analytics.track(...)
}}

Analytics Libraries:

• Google Analytics (ga, gtag)
• Segment (analytics.track)
• Mixpanel
• Custom analytics implementations

Track Coverage:

• Count elements WITH tracking
• Count elements WITHOUT tracking
• Identify tracking patterns used

Phase 5: DOM Structure Evaluation

Evaluate each element's analytics readiness:

ID Attributes:

• Clear, descriptive IDs: id="cta_hero_get_started" ✓
• Generic IDs: id="button1" ✗
• Missing IDs: No id attribute ✗

Class Attributes:

• Analytics classes: class="js-track js-cta js-click" ✓
• Generic classes: class="btn primary" △ (functional but not analytics-ready)
• Inline styles only: No class attribute ✗

Accessibility:

• Semantic HTML: <button> vs <div onClick> ✓
• ARIA labels: aria-label="..." ✓
• Alt text on images used in buttons

Phase 6: Gap Analysis

Identify issues and opportunities:

Naming Issues:

• Generic button names ("button1", "btn", "primary")
• Missing identifiers (no id or meaningful classes)
• Inconsistent naming patterns

Tracking Gaps:

• High-value elements without tracking (CTAs, forms)
• Incomplete tracking (only some CTAs tracked)
• Missing event parameters

Framework-Specific Issues:

• Next.js: Missing 'use client' directives for client-side tracking
• React: Event handlers not tracking clicks
• Vue: Missing event listeners for analytics

Phase 7: Recommendations

Provide actionable recommendations:

1. DOM Standardization Needs

- "Standardize 23 button identifiers before implementing tracking" - "Add analytics classes to 15 links" - "Create consistent naming convention across components"

1. Priority Tracking Opportunities

- P0: CTAs and forms (high conversion impact) - P1: Navigation and outbound links (user journey) - P2: Media interactions and scroll events (engagement)

1. Next Steps

- "Run gtm-dom-standardization to clean up DOM structure" - "Run gtm-strategy to plan tracking implementation"

Phase 8: Output Generation

Generate audit-report.json with complete findings:

{
  "metadata": {
    "auditDate": "2026-02-11T10:30:00Z",
    "framework": "Next.js 16.1.6 (App Router)",
    "filesScanned": 47,
    "componentsAnalyzed": 23
  },
  "summary": {
    "totalClickableElements": 47,
    "withTracking": 15,
    "withoutTracking": 32,
    "analyticsReadiness": "42%"
  },
  "categorized": {
    "cta": {
      "total": 12,
      "tracked": 4,
      "untracked": 8,
      "elements": [
        {
          "file": "app/page.tsx",
          "line": 45,
          "text": "Get Started",
          "id": null,
          "classes": ["btn", "primary"],
          "tracking": false,
          "recommendation": "Add id='cta_hero_get_started' and classes='js-track js-cta js-click js-hero'"
        }
      ]
    },
    "nav": {
      "total": 8,
      "tracked": 2,
      "untracked": 6
    },
    "form": {
      "total": 3,
      "tracked": 0,
      "untracked": 3
    },
    "outbound": {
      "total": 5,
      "tracked": 1,
      "untracked": 4
    },
    "media": {
      "total": 2,
      "tracked": 0,
      "untracked": 2
    }
  },
  "existingTracking": {
    "patterns": [
      "window.dataLayer.push (15 occurrences)",
      "Custom onClick handlers (4 occurrences)"
    ],
    "libraries": ["Google Tag Manager"],
    "coverage": "31.9% of clickable elements"
  },
  "issues": [
    {
      "type": "naming",
      "severity": "high",
      "count": 23,
      "description": "23 elements with generic or missing identifiers",
      "examples": [
        "button with class='btn' only (app/page.tsx:45)",
        "link with no id or analytics classes (components/Navbar.tsx:23)"
      ]
    },
    {
      "type": "tracking_gap",
      "severity": "high",
      "count": 8,
      "description": "8 high-priority CTAs without tracking",
      "impact": "Missing conversion data on primary actions"
    },
    {
      "type": "inconsistency",
      "severity": "medium",
      "count": 12,
      "description": "Inconsistent tracking patterns across similar elements"
    }
  ],
  "recommendations": [
    {
      "priority": "P0",
      "action": "Run gtm-dom-standardization skill",
      "reason": "Standardize 47 elements with consistent analytics-ready identifiers",
      "impact": "Creates clean foundation for tracking implementation"
    },
    {
      "priority": "P0",
      "action": "Implement tracking on 12 CTAs",
      "reason": "Critical conversion actions currently untracked",
      "expectedValue": "Visibility into primary conversion funnel"
    },
    {
      "priority": "P1",
      "action": "Add form tracking to 3 forms",
      "reason": "Lead capture and user input not measured",
      "expectedValue": "Form abandonment and completion data"
    },
    {
      "priority": "P2",
      "action": "Track 5 outbound links",
      "reason": "Referral traffic and external engagement unknown",
      "expectedValue": "Partner/resource click-through rates"
    }
  ],
  "nextSteps": [
    "Invoke gtm-dom-standardization to clean up DOM identifiers",
    "Invoke gtm-strategy to plan tracking implementation based on business goals",
    "Review audit-report.json with stakeholders to prioritize tracking"
  ]
}

Phase 9: Business Context Capture

After writing audit-report.json, check if gtm-context.md already exists in the project root.

If gtm-context.md EXISTS:
  Read it silently - context already captured, skip this phase entirely.

If gtm-context.md does NOT exist:
  Tell the user:
  "A few quick questions to save context for all future skill runs.
   You will not be asked these again."

  Ask these 4 questions (all at once, not one by one):

  1. What type of site or product is this?
     a) Ecommerce (selling products)
     b) SaaS (subscription software)
     c) B2B / lead generation (services, professional, enterprise)
     d) Media / content / publishing
     e) Other (describe briefly)

  2. What are the 1-3 primary conversion goals?
     Examples: trial signups, demo requests, purchases, downloads, contact forms

  3. Which ad platforms are active or planned?
     (Select all that apply: Google Ads, Meta, LinkedIn, TikTok, none, other)

  4. Is server-side tracking (sGTM) in scope?
     a) Yes, already using it
     b) Yes, planning it
     c) Not sure yet
     d) No

  Then write gtm-context.md to the project root:

# GTM Project Context

Generated by gtm-analytics-audit on [date]. Read automatically by all GTM skills.

## Site
- **Type**: [ecommerce / SaaS / B2B lead gen / media / other]
- **Platform**: [framework detected from audit - e.g. Next.js 16, React, Shopify]

## Business Goals
- **Primary conversions**: [listed goals]
- **Ad platforms**: [active or planned platforms]

## Server-Side Tracking
- **In scope**: [yes / planned / not sure / no]

## Notes
[any extra context the user added]

Confirm to user:
"gtm-context.md saved. All GTM skills will read this automatically - no need to answer these questions again."

Output Format

Present findings to the user in this structure:

=== GTM Analytics Audit Complete ===

Framework: Next.js 16.1.6 (App Router)
Files Scanned: 47 files
Components Analyzed: 23 components

--- Summary ---
Total Clickable Elements: 47
✓ With Tracking: 15 (31.9%)
✗ Without Tracking: 32 (68.1%)

--- Element Breakdown ---
CTAs: 12 total (4 tracked, 8 untracked)
Navigation: 8 total (2 tracked, 6 untracked)
Forms: 3 total (0 tracked, 3 untracked)
Outbound Links: 5 total (1 tracked, 4 untracked)
Media: 2 total (0 tracked, 2 untracked)

--- Key Issues ---
⚠ 23 elements with generic/missing identifiers
⚠ 8 high-priority CTAs without tracking
⚠ 3 forms without tracking
⚠ Inconsistent tracking patterns

--- Existing Tracking ---
✓ Google Tag Manager detected
✓ 15 dataLayer.push() calls found
△ Coverage: 31.9% of clickable elements

--- Recommendations ---

P0 (Critical):
1. Standardize DOM identifiers across 47 elements
   → Invoke gtm-dom-standardization skill
2. Implement tracking on 12 CTAs
   → Critical for conversion funnel visibility

P1 (Important):
3. Add form tracking (3 forms)
   → Capture lead generation and form abandonment

P2 (Nice-to-have):
4. Track outbound links (5 links)
   → Measure partner/resource engagement

--- Next Steps ---
✓ Audit report saved to: audit-report.json
→ Next: Invoke gtm-dom-standardization to prepare DOM for tracking
→ Then: Invoke gtm-strategy to plan tracking implementation

Ready to standardize your DOM? Invoke gtm-dom-standardization skill.

Important Guidelines

Senior Engineer Mindset

• Be thorough but efficient: Scan comprehensively but summarize clearly
• Identify root causes: Don't just report "missing tracking" - explain why (no IDs, generic classes, etc.)
• Provide context: Explain business impact of each finding
• Think systematically: Categorize and prioritize systematically

Framework-Specific Awareness

Next.js App Router:

• Client components need 'use client' directive for tracking
• Server components cannot use onClick directly

React:

• Event handlers should include tracking calls
• Hooks (useState, useEffect) may affect tracking timing

Vue:

• Composition API vs Options API affects event binding
• Template syntax differences from React

Categorization Logic

Use this decision tree for ambiguous elements:

"Learn More" button:

• If leads to product demo → CTA
• If navigates to info page → Navigation
• Default: CTA (assumes conversion intent)

"Contact Us" link:

• In navigation menu → Navigation
• As prominent button → CTA
• In footer → Navigation

Video player:

• Auto-play background video → Media
• Product demo video → Demo + Media

Search input:

• Header search → Form + Navigation
• Content filter → Form

Avoid Over-Engineering

• Don't recommend tracking EVERY element
• Focus on business-critical interactions
• Skip decorative or redundant elements
• Prioritize based on conversion impact

Reference Files

• references/naming-conventions.md - Analytics ID/class naming standards (load if user asks about naming)
• examples/sample.md - Example audit output showing expected format and audit-report.json structure

Common Questions

Q: Should I track every button? A: No. Focus on conversion-critical CTAs, forms, and navigation. Skip redundant/decorative elements.

Q: How do I categorize ambiguous elements? A: Use business intent: Does it drive conversion (CTA) or navigate (nav)? Default to CTA if unclear.

Q: What if the codebase has no tracking at all? A: That's common! Focus on identifying opportunities and recommend starting with P0 elements (CTAs, forms).

Q: Should I scan node_modules? A: No. Only scan user code (app/, components/, pages/, src/). Ignore node_modules and build directories.