gtm-implementation

) => { // Track window . dataLayer ?. push ( { ... } ) // Original handler originalHandler ( e ) } } 3. Framework-Specific Patterns Next.js App Router : Add 'use client' directive to files with onClick Use useRouter from 'next/navigation' React : Use functional components with hooks Maintain existing state management Vue : Use @click syntax Maintain reactivity 4. Avoid Redundant Tracking If element already has dataLayer.push, UPDATE it (don't duplicate) Check for existing tracking code before adding new GTM API Best Practices 1. Naming Conventions Variables: "DLV - {Parameter Name}" (DLV = Data Layer Variable) Triggers: "CE - {Event Name}" (CE = Custom Event) Tags: "GA4 - {Event Name}" 2. Error Handling try { await tagmanager . accounts . containers . workspaces . variables . create ( { ... } ) } catch ( error ) { if ( error . code === 409 ) { // Variable already exists - update instead } else if ( error . code === 403 ) { // Permission denied } else { throw error } } 3. Batch Operations Create all variables first Then create triggers (which may reference variables) Finally create tags (which reference both) 4. Always Resolve Workspace Dynamically Never use a hardcoded or cached workspaceId. Before any operation, call: const workspaces = await tagmanager . accounts . containers . workspaces . list ( { parent : accounts/ ${ accountId } /containers/ ${ containerId } } ) const workspaceId = workspaces . data . workspace [ 0 ] . workspaceId GTM deletes and recreates workspaces on each publish, so stored IDs become stale. Parameter Extraction Intelligence Be smart about extracting parameters: From ID attributes : // id="cta_hero_get_started" const [ category , location , ... action ] = id . split ( '_' ) // category: "cta", location: "hero", action: ["get", "started"] From class names : // className="btn btn-primary" const isPrimary = className . includes ( 'primary' ) const type = isPrimary ? 'primary' : 'secondary' From content : // Get Started const text = element . innerText // "Get Started" From href/destination : // const destination = href // "/pricing" // onClick={() => router.push('/signup')} // Parse from handler → destination: "/signup" Scripts scripts/gtm-api-client.js Core GTM API wrapper for creating variables/triggers/tags (extracted from gtm-setup-auto.js logic) scripts/create-variables.js Variable creation logic with duplicate detection scripts/create-triggers.js Trigger creation logic for custom events scripts/create-tags.js GA4 event tag creation with parameter mapping scripts/implement-datalayer.js Analyzes tracking plan and implements dataLayer.push() in code using Edit tool References references/datalayer-patterns.md Framework-specific dataLayer implementation patterns: Next.js App Router ('use client' directive) Next.js Pages Router React (hooks, class components) Vue (composition API, options API) Vanilla JavaScript references/gtm-ui-guide.md Manual GTM UI instructions as fallback if API fails references/event-taxonomies.md Common event naming patterns (object_action vs action_object) Assets assets/templates/saas.json Pre-built GTM config for SaaS product tracking: trial_start, feature_usage, upgrade_click account_created, plan_selected assets/templates/ecommerce.json Pre-built GTM config for e-commerce tracking: product_view, add_to_cart, checkout_start purchase_complete, product_search Supporting Files template.md - Framework-specific dataLayer push code patterns and GTM API payload templates examples/sample.md - Example implementation output showing before/after code changes and console output assets/templates/lead-generation.json Pre-built GTM config for lead-gen tracking: form_start, form_submit, content_download demo_request, newsletter_signup Execution Checklist Tracking plan loaded or events specified GTM API credentials validated Framework detected Target elements identified DataLayer events implemented in code Variables created via GTM API Triggers created via GTM API Tags created via GTM API Container version created Implementation summary generated Testing instructions provided Common Questions Q: What if I don't have a tracking plan? A: Run gtm-strategy skill first to create one, OR specify events manually and we'll implement them. Q: Can I implement tracking without using the GTM API? A: Yes. We'll implement dataLayer events in code and provide manual GTM UI instructions. Q: Will this overwrite existing GTM configuration? A: No. We check for existing variables/triggers/tags and update them. New configs are added, not replaced. Q: Can I implement tracking for only specific events? A: Yes. Specify which events to implement (e.g., "only implement cta_click tracking"). Q: What if my framework isn't supported? A: The dataLayer.push pattern works in any JavaScript environment. We'll provide vanilla JS implementation. Q: My workspace ID changed after publishing in GTM. Will the skill break? A: No. The skill always lists available workspaces via the API and uses the first one found, regardless of its ID. You never need to update gtm-config.json after publishing.