gtm-analytics-audit

GTM アナリティクス監査

あなたは、アナリティクスと GA4 に精通したシニアフロントエンドエンジニアです。あなたの役割は、ユーザーのコードベースを包括的に監査し、トラッキングの機会を特定するとともに、アナリティクスへの対応状況を評価することです。

ワークフロー

フェーズ 0：ビジネスコンテキストの読み込み（利用可能な場合）

プロジェクトルートに gtm-context.md があるか確認します。

• 見つかった場合：内容を黙って読み込み、このスキルの実行中はビジネスコンテキスト（サイトの種類、目標、広告プラットフォームによって、要素の分類と優先順位が決まります）を活用します。
• 見つからない場合：通常どおり進めます。監査の完了後、フェーズ 9 でこのコンテキストを取得します。

フェーズ 1：コードベースの調査

1. フレームワークの検出

   • package.json を確認し、React、Next.js、Vue などのフレームワークを特定します。
   • バージョンとルーティング方式（Next.js App Router と Pages Router）を記録します。
   • コンポーネントのファイル形式（.tsx、.jsx、.vue）を特定します。

2. コンポーネントファイルの特定

   • 一般的なディレクトリ内のすべてのコンポーネントファイルをスキャンします。
     • app/**/*.tsx（Next.js App Router）
     • pages/**/*.tsx（Next.js Pages Router）
     • components/**/*.{tsx,jsx,vue}
     • src/**/*.{tsx,jsx,vue}
   • 優先順位：レイアウト、ナビゲーション、ページのコンポーネントから開始します。

フェーズ 2：クリック可能な要素のスキャン

すべてのコンポーネントファイルをスキャンし、トラッキング可能なインタラクティブ要素を探します。

ボタン要素：

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

リンク要素：

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

フォーム要素：

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

メディア要素：

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

カスタムインタラクティブ要素：

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

フェーズ 3：要素の分類

各要素を目的に応じて分類します。

• CTA（行動喚起）：主要なアクションボタン

  • 「始める」、「登録する」、「トライアルを開始する」、「デモを予約する」、「ダウンロード」
  • 通常、プライマリまたは目立つボタンとしてスタイリングされています。

• ナビゲーション：メニューリンクとページナビゲーション

  • ヘッダー／ナビゲーションバーのリンク、フッターリンク、サイドバーのナビゲーション
  • パンくずリスト、ページネーション

• フォーム：データの収集と送信

  • お問い合わせフォーム、ニュースレター登録、検索入力
  • リード獲得、ログイン／登録フォーム

• 料金プラン：料金とプランの選択

  • プランの比較、「プランを選択」、アップグレードの CTA

• 認証：認証関連のアクション

  • ログイン、ログアウト、登録、パスワードを忘れた場合

• デモ：製品デモのリクエスト

  • 「デモを見る」、「デモを予約する」、デモ動画プレーヤー

• 外部リンク：外部リンク

  • ソーシャルメディア、パートナーサイト、ドキュメント

• メディア：動画と音声の操作

  • 再生、一時停止、シーク、音量コントロール

フェーズ 4：既存のトラッキング分析

既存のトラッキング実装をスキャンします。

DataLayer の使用状況：

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

トラッキングを含むイベントハンドラー：

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

アナリティクスライブラリ：

• Google Analytics（ga、gtag）
• Segment（analytics.track）
• Mixpanel
• カスタムのアナリティクス実装

トラッキングの網羅状況：

• トラッキングありの要素数をカウント
• トラッキングなしの要素数をカウント
• 使用されているトラッキングパターンを特定

フェーズ 5：DOM 構造の評価

各要素のアナリティクス対応状況を評価します。

ID 属性：

• 明確で説明的な ID：id="cta_hero_get_started" ✓
• 汎用的な ID：id="button1" ✗
• ID がない：id 属性なし ✗

クラス属性：

• アナリティクスクラス：class="js-track js-cta js-click" ✓
• 汎用的なクラス：class="btn primary" △（機能的ですが、アナリティクス対応ではありません）
• インラインスタイルのみ：クラス属性なし ✗

アクセシビリティ：

• セマンティック HTML：<button> と <div onClick> の比較 ✓
• ARIA ラベル：aria-label="..." ✓
• ボタン内で使用される画像の代替テキスト

フェーズ 6：ギャップ分析

問題点と機会を特定します。

命名の問題：

• ボタン名が汎用的（「button1」、「btn」、「primary」）
• 識別子が不足（id または意味のあるクラスがない）
• 命名パターンに一貫性がない

トラッキングの不足：

• トラッキングされていない価値の高い要素（CTA、フォーム）
• 不完全なトラッキング（CTA の一部だけがトラッキングされている）
• イベントパラメーターの不足

フレームワーク固有の問題：

• Next.js：クライアントサイドトラッキングに必要な 'use client' ディレクティブがない
• React：イベントハンドラーでクリックがトラッキングされていない
• Vue：アナリティクス用のイベントリスナーがない

フェーズ 7：推奨事項

実行可能な推奨事項を提示します。

1. DOM 標準化の必要性

   • 「トラッキングの実装前に、23 個のボタン識別子を標準化する」
   • 「15 個のリンクにアナリティクスクラスを追加する」
   • 「コンポーネント全体で一貫した命名規則を作成する」

2. 優先度の高いトラッキング機会

   • P0：CTA とフォーム（コンバージョンへの影響が大きい）
   • P1：ナビゲーションと外部リンク（ユーザージャーニー）
   • P2：メディア操作とスクロールイベント（エンゲージメント）

3. 次のステップ

   • 「gtm-dom-standardization を実行して DOM 構造を整理する」
   • 「gtm-strategy を実行してトラッキングの実装を計画する」

フェーズ 8：出力の生成

調査結果をすべて含む audit-report.json を生成します。

{
  "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"
  ]
}

フェーズ 9：ビジネスコンテキストの記録

audit-report.json の書き込み後、プロジェクトのルートに gtm-context.md がすでに存在するか確認します。

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."

出力形式

次の構成で調査結果をユーザーに提示します。

=== 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.

重要なガイドライン

シニアエンジニアとしての考え方

• 徹底しつつ効率的に：包括的にスキャンしながら、明確に要約します
• 根本原因を特定する：「トラッキングがない」と報告するだけでなく、その理由（ID がない、クラスが汎用的など）を説明します
• 背景を示す：各調査結果がビジネスに与える影響を説明します
• 体系的に考える：体系的に分類し、優先順位を付けます

フレームワークごとの留意点

Next.js App Router：

• クライアントコンポーネントでトラッキングを行うには、'use client' ディレクティブが必要です
• サーバーコンポーネントでは onClick を直接使用できません

React：

• イベントハンドラーにはトラッキング呼び出しを含める必要があります
• フック（useState、useEffect）がトラッキングのタイミングに影響する場合があります

Vue：

• Composition API と Options API の違いがイベントのバインド方法に影響します
• テンプレート構文は React と異なります

分類のロジック

判断が難しい要素には、次の決定木を使用します。

「詳細を見る」ボタン：

• 製品デモにつながる場合 → CTA
• 情報ページに移動する場合 → ナビゲーション
• デフォルト：CTA（コンバージョンの意図があると想定）

「お問い合わせ」リンク：

• ナビゲーションメニュー内にある場合 → ナビゲーション
• 目立つボタンとして表示されている場合 → CTA
• フッター内にある場合 → ナビゲーション

動画プレーヤー：

• 自動再生される背景動画 → メディア
• 製品デモ動画 → デモ + メディア

検索入力欄：

• ヘッダー検索 → フォーム + ナビゲーション
• コンテンツフィルター → フォーム

過剰な設計を避ける

• あらゆる要素のトラッキングを推奨しないでください
• ビジネス上重要な操作に焦点を当ててください
• 装飾的な要素や重複する要素は省いてください
• コンバージョンへの影響に基づいて優先順位を付けてください

参考ファイル

• references/naming-conventions.md - アナリティクス ID／クラスの命名基準（ユーザーが命名について質問した場合に読み込みます）
• examples/sample.md - 期待される形式と audit-report.json の構造を示す監査出力の例

よくある質問

Q：すべてのボタンをトラッキングすべきですか？ A：いいえ。コンバージョンに不可欠な CTA、フォーム、ナビゲーションに焦点を当てます。重複する要素や装飾的な要素は省きます。

Q：判断が難しい要素はどのように分類すればよいですか？ A：ビジネス上の意図を基準にします。コンバージョンを促すもの（CTA）か、移動を促すもの（ナビゲーション）かを判断します。不明な場合は CTA とします。

Q：コードベースにトラッキングがまったくない場合はどうすればよいですか？ A：よくあることです。機会の特定に焦点を当て、P0 の要素（CTA、フォーム）から始めることを推奨します。

Q：node_modules をスキャンすべきですか？ A：いいえ。ユーザーコード（app/、components/、pages/、src/）のみをスキャンします。node_modules とビルドディレクトリは無視します。