Client-Side GTM
Client-side GTM is the browser half of the equation: the container snippet on your page, the dataLayer your developers maintain, the triggers and tags that fire when users interact with your site. It’s where most tracking work happens, and where most tracking problems originate.
This section covers everything from initial setup to production management — organized so you can find what you need whether you’re setting up a new implementation or debugging an existing one.
Getting GTM installed correctly and configured for your environment.
Container Installation Installing the GTM snippet correctly — static HTML, WordPress, Shopify, Next.js.
SPA Setup History Change triggers, custom page_view events, and dataLayer cleanup for single-page apps.
Google Consent Mode Implementing Consent Mode v2 with default denied state and CMP integration.
Container Loading Strategies Optimizing when and how GTM loads — lazy loading, consent-gated loading, performance impact.
Triggers
Section titled “Triggers”When tags fire — the full trigger type reference.
Trigger Types Overview Quick reference for every trigger type and the right one for each scenario.
Custom Event Triggers The most powerful trigger type — fire tags based on dataLayer.push() events.
Click Triggers All Clicks vs. Link Click — event delegation, CSS selectors, child element issues.
Element Visibility Trigger Fire tags when elements enter the viewport — product impressions, ad viewability, lazy content.
Variables
Section titled “Variables”Reading data — from the dataLayer, the DOM, the URL, and custom logic.
DataLayer Variables Extracting values from dataLayer pushes with dot notation — the primary data source.
JavaScript Variables Custom JavaScript variables for data transformation, conditional logic, and calculations.
Built-in Variables The complete reference — Click, Form, Scroll, Video, History, and Page variables.
Lookup Tables & Regex Tables Mapping values without code — page categorization, event classification, value transformation.
What fires — GA4, Google Ads, custom HTML, and tag execution control.
GA4 Configuration Tag Setting up the Google Tag correctly — Measurement ID, user properties, consent settings.
GA4 Event Tag Sending custom events to GA4 — event parameters, user properties, ecommerce data.
Custom HTML Tags Power user tag type — arbitrary JavaScript execution, third-party pixels, data enrichment.
Tag Sequencing Controlling execution order — setup tags, cleanup tags, dependency management.
Tracking implementations
Section titled “Tracking implementations”Complete patterns for common tracking requirements.
Ecommerce Tracking The full GA4 ecommerce lifecycle — view_item_list through purchase, with complete item arrays.
Form Tracking Built-in trigger, AJAX detection, multi-step forms, and form abandonment patterns.
Video Tracking YouTube (built-in), Vimeo (postMessage), HTML5 video, and Wistia tracking patterns.
File Download Tracking Click triggers for file extensions, authenticated downloads, and blob URL patterns.
Outbound Link Tracking Tracking external link clicks — enhanced measurement, custom triggers, domain exclusions.
Scroll Depth Tracking 25/50/75/90% milestones, page filtering, and combining with time on page.
Error Tracking JavaScript Error trigger, unhandled promise rejections, application errors, and 404 pages.
User ID Tracking Cross-device identification — what to use as user_id, where to set it, how to clear it.
Cross-Domain Tracking Maintaining sessions across domains — the _gl linker, configuration, and referral exclusions.
Advanced tracking
Section titled “Advanced tracking” Shadow DOM Tracking Tracking clicks inside web components — why GTM breaks, which events compose, and the workarounds.
Core Web Vitals Measuring LCP, INP, CLS via the web-vitals library and sending field data to GA4.
Comprehensive Link Tracking One trigger and one tag that classifies all link types — outbound, download, email, phone, social.
Form Builder Tracking Tested patterns for Gravity Forms, Contact Form 7, HubSpot, Typeform, Webflow, and Calendly.
Offline Tracking Service Worker queuing, IndexedDB persistence, and Measurement Protocol replay for PWAs.
Debugging
Section titled “Debugging”Diagnosing and fixing tracking problems.
Preview Mode GTM's primary debugging tool — event timeline, variables tab, trigger conditions, data layer inspection.
Tag Assistant Chrome extension and embedded debugger — tag health indicators, GA4 validation.
Console Debugging Browser console commands — inspect the dataLayer, monitor pushes, decode GA4 payloads.
DataLayer Debugging Stale data, merge behavior, type mismatches, variable name mismatches — the dataLayer-specific problems.
Common Errors Quick reference for the most frequent GTM problems with specific solutions.
Why Isn't My Tag Firing? Interactive diagnostic flowchart — work through 12 possible causes systematically.
iFrame Debugging Debug GTM inside iframes — Preview mode limitations, console context switching, postMessage.
Container management
Section titled “Container management”Keeping your GTM container organized, versioned, and maintainable.
Naming Conventions Tag, trigger, and variable naming standards — pick a convention on day one and enforce it.
Folder Organization Structuring folders by platform, function, or hybrid — with warning signs of poor organization.
Version Control Naming versions, writing descriptions, comparing diffs, and rolling back correctly.
Workspaces Parallel development environments — when to create them, how to resolve conflicts.
Environments Staging, dev, and QA environments — testing container changes before they go live.
Permissions Who gets Publish, who gets Edit, how agency access should work, and quarterly access reviews.
Multi-Container Strategy When multiple containers are justified and the performance cost you're accepting.
Container Cleanup Systematic process for removing dead tags, orphaned triggers, and unused variables.