gtm-analytics-audit

✓ 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: DOM Standardization Needs "Standardize 23 button identifiers before implementing tracking" "Add analytics classes to 15 links" "Create consistent naming convention across components" Priority Tracking Opportunities P0: CTAs and forms (high conversion impact) P1: Navigation and outbound links (user journey) P2: Media interactions and scroll events (engagement) 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.