Files
Andrew Yim c287ca3340 feat: update GTM skills triad with field-tested improvements
gtm-audit (60):
- Added Mode D rule: check elements for IDs before designing CSS triggers

gtm-editor (61):
- Added "Tagging Workflow: dataLayer First" section — always suggest
  dataLayer push code for developers before creating GTM triggers
- Added multi-language snippets (JS, React, Vue, PHP)
- Added "Trigger Design: IDs First" section — prefer element IDs,
  ask user to add IDs before falling back to CSS selectors
- Added ID naming convention: [section]-[element]-[action]
- Added decision tree for trigger selection

gtm-validator (62):
- Flag CSS-based triggers as fragility risk during QA
- Recommend adding IDs instead of finding alternative CSS selectors

Based on field testing with ourdigital.org GTM-N9TPJW container.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-17 21:55:50 +09:00

142 lines
5.6 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
name: gtm-audit
description: >
Automated GTM audit and analysis. Scans websites for tracking coverage, compares
against GTM container config, identifies gaps, and reports to Notion. Uses Chrome
DevTools MCP for browser inspection and DTM Agent MCP for container operations.
Triggers on "GTM audit", "audit website", "scan page", "check tracking",
"tracking coverage", "gap analysis", "site audit", "tag firing check".
NOT for creating/modifying tags (use gtm-editor) or validating/QA (use gtm-validator).
---
# GTM Audit Skill
Analyze GTM implementations by scanning websites and comparing against container configuration.
## Available Tools
### Browser Inspection (Chrome DevTools MCP)
- `navigate_page` — Load target URL
- `evaluate_script` — Capture dataLayer, detect GTM containers, check JS globals
- `list_network_requests` — Capture tag firing network requests
- `take_screenshot` — Document page state
- `click` / `hover` — Simulate user interactions
- `list_console_messages` — Check for JS errors
### GTM Container (DTM Agent MCP)
- `dtm_status` — Check auth and active container
- `dtm_list_tags` / `dtm_list_triggers` / `dtm_list_variables` — Get container config
- `dtm_audit_scan` — Scan page with collected data (returns structured PageData)
- `dtm_audit_gap` — Run gap analysis (returns GapReport with OK/MISSING/ORPHAN)
### Reporting (Notion MCP)
- Write findings to GTM Audit Log: `collection://2cf581e5-8a1e-815a-a7f8-000b88b93585`
## 4 Audit Modes
### Mode A: Page Scan (`/gtm-audit scan <url>`)
Quick single-page diagnostics. No GTM container needed.
1. `navigate_page` to URL, wait for load
2. `evaluate_script`: capture dataLayer
```javascript
JSON.stringify(window.dataLayer || [])
```
3. `evaluate_script`: detect GTM containers
```javascript
(function(){var s=document.querySelectorAll('script[src*="googletagmanager.com/gtm.js"]');var ids=[];s.forEach(function(el){var m=el.src.match(/id=(GTM-[A-Z0-9]+)/);if(m)ids.push(m[1]);});return JSON.stringify(ids);})()
```
4. `evaluate_script`: detect tracking pixels
```javascript
(function(){var f=[];if(window.fbq)f.push('Meta Pixel');if(window.gtag)f.push('GA4');if(window.clarity)f.push('Clarity');if(window.kakaoPixel)f.push('Kakao');if(window.wcs)f.push('Naver');if(window.ttq)f.push('TikTok');return JSON.stringify(f);})()
```
5. `list_network_requests` — filter for tag domains
6. Call `dtm_audit_scan` with collected html, network_requests, datalayer_json
7. Report findings
### Mode B: Site Audit (`/gtm-audit site <url>`)
Full website coverage audit with auto-discovery.
1. Navigate to root URL
2. `evaluate_script`: extract all internal links
3. Classify pages by type (home, product, service, form, blog, about)
4. For each page type: run Mode A scan
5. Build coverage matrix (page type × event × platform)
6. Run Mode C gap analysis against container
7. Write comprehensive report to Notion
### Mode C: Gap Analysis (`/gtm-audit gap <url>`) — MOST IMPORTANT
Compare GTM container config against actual tag firing.
1. `dtm_status` — verify auth and active container
2. `dtm_list_tags` + `dtm_list_triggers` — get expected configuration
3. `navigate_page` to URL
4. `evaluate_script` — capture dataLayer
5. `list_network_requests` — capture actual tag firings
6. Call `dtm_audit_gap` with network_requests
7. Analyze gaps: MISSING (in GTM, not firing), ORPHAN (firing, not in GTM)
8. Write to Notion GTM Audit Log
### Mode D: Tag Design (`/gtm-audit design <url>`)
AI-powered analysis of what SHOULD be tracked on a page.
1. `navigate_page` to URL
2. `take_screenshot` — visual reference
3. `evaluate_script` — inspect DOM: forms, buttons, links, product elements
4. `evaluate_script` — capture existing dataLayer schema
5. `dtm_list_tags` — check existing configuration
6. Design recommendations: which events, triggers, variables are needed
7. Output as structured blueprint (hand off to gtm-editor for implementation)
## Detection Patterns
### Cloudflare Zaraz Proxy
URLs with `/1tbv/` path proxy GA4/Ads through the site's domain:
```
https://site.com/1tbv/ag/g/c?tid=G-XXXXX → GA4
https://site.com/1tbv/ag/g/c?tid=AW-XXXXX → Google Ads
```
### Server-Side GTM (sGTM)
Custom subdomains: `stms.*`, `sgtm.*`, `ss.*`, `tag.*`
```
https://stms.site.com/g/collect?tid=G-XXXXX → GA4 via sGTM
```
### GA4 Multiple Endpoints
One GA4 page_view fires to multiple endpoints — this is normal:
- `google-analytics.com/g/collect`
- `analytics.google.com/g/s/collect`
- `stats.g.doubleclick.net/g/collect`
- `www.google.com/ccm/collect` (Consent Mode)
- Zaraz proxy endpoints
## Notion Report Fields
| Field | Value |
|-------|-------|
| Site | domain name |
| URL | full URL |
| Container IDs | GTM-XXXXX |
| Audit Status | Pass / Warning / Fail |
| GTM Status | Installed / Not Found / Multiple Containers |
| Tags Fired | [GA4, Google Ads, Meta Pixel, Kakao, Naver, ...] |
| Journey Type | full / pageview / scroll / form / checkout / datalayer |
| Critical Issues | count |
| Issues Count | count |
| Summary | AI-generated findings |
## Rules
- Always check `dtm_status` before gap analysis
- Wait for page to fully load before capturing network requests
- Use `evaluate_script` to check consent mode before interpreting missing tags
- Orphan count may be high due to GA4 multi-endpoint — note this in reports
- **In Mode D (tag design), check elements for `id` attributes** — if missing, recommend adding IDs before designing CSS-based triggers. Suggest naming: `[section]-[element]-[action]`
- Hand off tag creation work to `gtm-editor` skill
- Hand off QA/validation work to `gtm-validator` skill