gtm
Google Tag Manager
Overview
This skill provides comprehensive expertise for Google Tag Manager (GTM), covering container setup, tag configuration, triggers, variables, data layer implementation, debugging, custom templates, and API automation. Whether you are implementing a new GTM setup, optimising an existing configuration, or troubleshooting issues, this skill has you covered.
When to Use This Skill
Invoke this skill when:
- Setting up a new GTM container
- Configuring tags (GA4, Google Ads, Facebook Pixel, etc.)
- Creating triggers (page views, clicks, form submissions, etc.)
- Defining variables (data layer, custom JavaScript, constants, etc.)
- Implementing the data layer for e-commerce or custom events
- Debugging GTM issues using Preview mode or Tag Assistant
- Building custom templates with sandboxed JavaScript
- Automating GTM operations via the REST API
- Optimising container performance and organisation
- Ensuring privacy compliance and consent management
Quick Start
Container Setup
- Create a GTM account at tagmanager.google.com
- Create a container (Web, iOS, Android, or Server)
- Install the container snippet on your website
- Configure tags, triggers, and variables
- Test in Preview mode
- Publish
See setup.md for detailed installation instructions.
Basic Tag Configuration
// Example: GA4 Configuration Tag
Tag Type: Google Analytics: GA4 Configuration
Measurement ID: G-XXXXXXXXXX
Trigger: All Pages
See tags.md for comprehensive tag documentation.
Data Layer Push
// Push custom event to data layer
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'custom_event',
'category': 'engagement',
'action': 'button_click',
'label': 'CTA Button'
});
See datalayer.md for data layer patterns.
Core Concepts
Tags, Triggers, and Variables
Tags are snippets of code that execute on your site (e.g., GA4, Google Ads, Facebook Pixel).
Triggers define when tags fire (e.g., page views, clicks, form submissions).
Variables capture dynamic values for use in tags and triggers (e.g., page URL, click text, data layer values).
How They Work Together
User Action --> Trigger Fires --> Tag Executes --> Data Sent
^ |
| v
+--- Variables provide values -------+
Topic Reference Guide
Container Setup and Installation
For container creation, snippet installation, and initial configuration:
- Reference: setup.md
- Topics: Container types, snippet placement, noscript fallback, verification
Tag Configuration
For configuring analytics, advertising, and custom tags:
- Reference: tags.md
- Topics: GA4 tags, Google Ads conversions, Facebook Pixel, custom HTML, tag sequencing
Trigger Types
For setting up firing conditions:
- Reference: triggers.md
- Topics: Page views, clicks, form submissions, custom events, trigger groups, blocking triggers
Variable Configuration
For capturing and formatting data:
- Reference: variables.md
- Topics: Built-in variables, data layer variables, custom JavaScript, URL variables, lookup tables
Data Layer Implementation
For implementing the data layer:
- Reference: datalayer.md
- Topics: Data layer structure, e-commerce tracking, SPA tracking, best practices
Debugging and Testing
For troubleshooting GTM implementations:
- Reference: debugging.md
- Topics: Preview mode, Tag Assistant, debug console, common issues, testing workflows
Best Practices
For naming conventions, performance, and security:
- Reference: best-practices.md
- Topics: Naming conventions, container organisation, performance optimisation, security, deployment strategies
Custom Templates
For building custom tag and variable templates:
- Reference: custom-templates.md
- Topics: Sandboxed JavaScript, template APIs, permissions, testing, publishing to Gallery
API Automation
For programmatic GTM management:
- Reference: api.md
- Topics: Authentication, REST API operations, bulk operations, backup/restore, CI/CD integration
Common Workflows
Implement GA4 Page View Tracking
- Create GA4 Configuration tag with Measurement ID
- Set trigger to "All Pages"
- Test in Preview mode
- Verify in GA4 DebugView
- Publish
Track Form Submissions
- Create Form Submission trigger
- Create GA4 Event tag with event name
form_submit - Add form ID/name as event parameter
- Test submission in Preview mode
- Publish
Implement E-commerce Tracking
- Implement data layer with e-commerce events
- Create data layer variables for product data
- Create GA4 Event tags for each e-commerce event
- Map data layer variables to event parameters
- Test complete purchase flow
- Publish
Debug Tag Not Firing
- Enable Preview mode
- Perform the action that should fire the tag
- Check "Tags Not Fired" section
- Review trigger conditions in Variables tab
- Check data layer for required values
- Fix conditions and retest
See debugging.md for detailed debugging workflows.
Technical Constraints
JavaScript (ES5 Requirement)
GTM Custom JavaScript Variables and Custom HTML Tags require ES5 syntax:
// Use var instead of const/let
var myVar = 'value';
// Use function instead of arrow functions
var myFunc = function(x) { return x * 2; };
// Use string concatenation instead of template literals
var message = 'Hello, ' + name;
Exception: Custom Templates support some ES6 features in their sandboxed environment.
Regular Expressions (RE2 Format)
GTM uses RE2 regex syntax, which differs from standard JavaScript regex:
Supported: Character classes, quantifiers, anchors, groups, alternation Not Supported: Lookahead, lookbehind, backreferences, possessive quantifiers
# Match product pages
^/products/[^/]+$
# Case-insensitive matching
(?i)^/checkout
Naming Conventions
Tags
Format: [Platform] - [Type] - [Description]
Examples:
GA4 - Event - Form SubmitGoogle Ads - Conversion - PurchaseFB - Pixel - Page View
Triggers
Format: [Event Type] - [Description]
Examples:
Click - CTA ButtonPage View - HomepageForm Submit - Contact Form
Variables
Format: [Type] - [Description]
Examples:
DL - User ID(Data Layer)CJS - Format Price(Custom JavaScript)Constant - GA4 Measurement ID
Performance Tips
- Use native tag templates instead of Custom HTML when possible
- Minimise Custom JavaScript execution time
- Remove unused tags, triggers, and variables regularly
- Use tag sequencing wisely to avoid unnecessary delays
- Defer non-critical tags to improve page load
Security Best Practices
- Vet all Custom HTML tags for malicious code
- Never push PII to the data layer - hash sensitive identifiers
- Implement consent mode for privacy compliance
- Limit container admin access to trusted users
- Review third-party templates before using
Quick Reference
Built-in Variables to Enable
- Page URL, Page Path, Page Hostname
- Click Element, Click Classes, Click ID, Click URL, Click Text
- Form Element, Form ID, Form Classes
- Scroll Depth Threshold, Scroll Direction
Common Trigger Types
- Page View (All Pages, Some Pages)
- Click (All Elements, Just Links)
- Form Submission
- Custom Event
- History Change (for SPAs)
- Timer
- Scroll Depth
Essential Data Layer Events
// Page view
window.dataLayer.push({ 'event': 'page_view' });
// User login
window.dataLayer.push({ 'event': 'login', 'method': 'Google' });
// Purchase
window.dataLayer.push({
'event': 'purchase',
'ecommerce': {
'transaction_id': 'T12345',
'value': 99.99,
'currency': 'AUD',
'items': [...]
}
});
Reference Files
| Topic | Reference File |
|---|---|
| Container setup | setup.md |
| Tag configuration | tags.md |
| Trigger configuration | triggers.md |
| Variable configuration | variables.md |
| Data layer | datalayer.md |
| Debugging | debugging.md |
| Best practices | best-practices.md |
| Custom templates | custom-templates.md |
| API automation | api.md |
External Resources
More from henkisdabro/wookstar-claude-code-plugins
tampermonkey
Write and debug Tampermonkey userscripts for browser automation, page modification, and web enhancement. Use whenever the user mentions userscripts, Tampermonkey, Greasemonkey, Violentmonkey, or wants to write a script that runs on a website - even if they don't say 'userscript' explicitly. Also trigger for: injecting JavaScript or CSS into web pages, modifying website behaviour, hiding page elements, form auto-fill, scraping page data, intercepting requests, detecting URL changes in SPAs, adding keyboard shortcuts to websites, tab audio control, or TypeScript userscripts. Covers all header tags (@match, @grant, @require, @run-in), GM_* synchronous APIs, GM.* promise-based APIs (recommended for new scripts), batch storage (GM.getValues/setValues v5.3+), binary data support (v5.4+), TypeScript setup via @types/tampermonkey, security sandboxing, and cross-browser compatibility (Chrome, Firefox, Edge). Do NOT use for Selenium/Puppeteer automation, browser extensions (WebExtensions/MV3), or server-side scripts.
95google-tagmanager
Comprehensive Google Tag Manager guide covering container setup, tags, triggers, variables, data layer, debugging, custom templates, and API automation. Use when working with GTM implementation, configuration, optimisation, troubleshooting, or any GTM-related tasks.
81google-apps-script
Comprehensive guide for Google Apps Script development covering all built-in services (SpreadsheetApp, DocumentApp, GmailApp, DriveApp, CalendarApp, FormApp, SlidesApp), triggers, authorization, error handling, and performance optimization. Use when automating Google Sheets operations, creating Google Docs, managing Gmail/email, working with Google Drive files, automating Calendar events, implementing triggers (time-based, event-based), building custom functions, creating add-ons, handling OAuth scopes, optimizing Apps Script performance, working with UrlFetchApp for API calls, using PropertiesService for persistent storage, or implementing CacheService for temporary data. Covers batch operations, error recovery, and JavaScript ES6+ runtime.
74shopify-theme-dev
Complete theme development guide including file structure, JSON templates, sections, snippets, settings schema, and Online Store 2.0 architecture. Use when creating Shopify themes, organizing theme files, building sections and blocks, working with .json template files, configuring settings_schema.json, creating snippets, or implementing theme customization features.
23shopify-developer
Complete Shopify development reference for Liquid templating, theme development (OS 2.0), GraphQL Admin API, Storefront API, custom app development, Shopify Functions, Hydrogen, performance optimisation, and debugging. Use when working with .liquid files, creating theme sections and blocks, writing GraphQL queries or mutations for Shopify, building Shopify apps with CLI and Polaris, implementing cart operations via Ajax API, optimising Core Web Vitals for Shopify stores, debugging Liquid or API errors, configuring settings_schema.json, accessing Shopify objects (product, collection, cart, customer), using Liquid filters, creating app extensions, working with webhooks, migrating from Scripts to Functions, or building headless storefronts with Hydrogen and React Router 7. Covers API version 2026-01.
17google-analytics
Comprehensive Google Analytics 4 guide covering property setup, events, custom events, recommended events, custom dimensions, user tracking, audiences, reporting, BigQuery integration, gtag.js implementation, GTM integration, Measurement Protocol, DebugView, privacy compliance, and data management. Use when working with GA4 implementation, tracking, analysis, or any GA4-related tasks.
14