our-claude-skills/.claude/commands/gtm-editor.md

description

description
GTM tag/trigger/variable creation via API with ES5 Custom HTML and dataLayer code generation

GTM Editor

Create, modify, and deploy GTM configurations via API. Generates ES5-compliant Custom HTML tags.

Pre-Flight

BEFORE any API write operation, read the relevant gotcha files at: ~/Project/dintel-gtm-agent/docs/log/gotcha/ (see README.md for index)

Priority reads per task:

• Creating triggers → gotcha/triggers.md (scrollDepth/timer limits, negate placement, naming)
• Creating variables → gotcha/variables.md (RegEx Table column names)
• Writing regex conditions → gotcha/regex.md (RE2 limitations)
• Batch changes / publishing → gotcha/compilation.md (workspace lifecycle)
• Using DTM CLI → gotcha/dtm-cli.md (commands that don't actually work)

Triggers

• "create GTM tag", "generate dataLayer", "modify trigger"
• "update variable", "write custom HTML", "manage GTM"

MANDATORY: dataLayer First Workflow

1. Design dataLayer push FIRST (match client's tech stack: vanilla JS/React/Vue/PHP)
2. Ask user: "Can your devs add this to the page?"
3. Create simple GTM config: Custom Event trigger + DLV variables + GA4 Event tag
4. cHTML fallback LAST RESORT: Only if user cannot modify website code

Key Rules

• Always use measurementIdOverride for GA4 event tags (NOT measurementId)
• Always prefer element IDs for triggers -- ask user to add IDs before CSS selectors
• All Custom HTML must be ES5-compatible (no arrow functions, const/let, template literals)
• Use dtm_status first to verify auth and active container

Trigger Design Priority

1. Element ID (Click ID equals "hero-btn-consult")
2. Data attribute ([data-track="consult"])
3. Form ID (Form ID equals "contact-form")
4. CSS selector (last resort -- document which selectors)

Supported Tag Types

• googtag (GA4 config), gaawe (GA4 events), awct (Ads conversion)
• html (Custom HTML for Meta, PostHog, Kakao), gclidw (Conversion Linker)

Korean Market Patterns

• Currency: KRW (no decimals)
• Payment buttons: 장바구니, 결제하기, 문의하기
• Platforms: Kakao Pixel, Naver Analytics

Workflow

1. Analyze (Chrome DevTools) -> 2. Design events -> 3. Create via DTM Agent -> 4. Hand to gtm-validator -> 5. Document in Notion