Triggers

Trigger = Event + Conditions

Event: What happened (page load, click, form submit)
Conditions: Additional filters (specific pages, elements, values)

Tag fires when:
Event occurs AND all conditions are true

1. Page View (gtm.js)
   ├── Fires immediately when GTM loads
   ├── Before page fully renders
   └── Use for: Config tags, early tracking

2. DOM Ready (gtm.dom)
   ├── Fires when DOM is fully parsed
   ├── Before images/external resources load
   └── Use for: Element-dependent tags

3. Window Loaded (gtm.load)
   ├── Fires when everything loads
   ├── Images, scripts, styles complete
   └── Use for: Performance tracking

Fire only on specific pages:
Trigger Type: Page View
Condition: Page Path contains /checkout

Fire on multiple pages:
Condition: Page Path matches RegEx ^/(cart|checkout|thank-you)

All Elements Click:
├── Any clickable element
├── Buttons, divs, spans, images
└── Most flexible option

Just Links Click:
├── Only <a> elements
├── Waits for link validation
└── Better for outbound tracking

Track button by ID:
Trigger: All Elements
Condition: Click ID equals "submit-form"

Track by CSS class:
Trigger: All Elements
Condition: Click Classes contains "add-to-cart"

Track outbound links:
Trigger: Just Links
Condition: Click URL does not contain yourdomain.com

Track tel: links:
Trigger: Just Links
Condition: Click URL starts with tel:

Fires when a form is submitted
Works with most form types
Can wait for AJAX validation

Configuration:
├── Wait for Tags: Check if using redirects
├── Check Validation: Wait for form validation
└── Enable for all forms or specific ones

For standard forms:
├── Use Form Submission trigger
├── Enable "Check Validation"
├── Wait for Tags if redirecting

For AJAX forms:
├── Form Submission may not work
├── Use Custom Event instead
├── Developer pushes event after success

// Developer pushes event to data layer
dataLayer.push({
  event: 'formSubmitSuccess',
  formName: 'Contact Form',
  formLocation: 'Homepage'
});

// GTM trigger fires on 'formSubmitSuccess'

Trigger Type: Custom Event
Event Name: formSubmitSuccess (exact match)

With conditions:
Event Name: formSubmitSuccess
Condition: formName equals "Contact Form"

Match multiple events with one trigger:
Event Name matches RegEx: ^(addToCart|removeFromCart|updateCart)$

This fires for:
├── addToCart
├── removeFromCart
└── updateCart

Track how far users scroll:
├── Vertical Scroll Depths: 25, 50, 75, 90
├── Horizontal Scroll Depths: (optional)
├── Units: Percentages or Pixels

Outputs {{Scroll Depth Threshold}} variable
Example: Fire GA4 event at 90% scroll

Fire when element appears in viewport:
├── Selection Method: ID, CSS Selector
├── When to fire: Once per page/element
├── Minimum visible: 50% (recommended)
├── Minimum on-screen: 1000ms (optional)

Use for:
├── Lazy-loaded content tracking
├── Ad impression tracking
├── Section engagement

Built-in YouTube tracking:
├── Start
├── Complete
├── Pause, Seek, Buffering
├── Progress: 10%, 25%, 50%, 75%

Requirements:
├── YouTube IFrame API support
├── Enable JavaScript API in embed URL

Fire after time elapsed:
├── Interval: 30000 (30 seconds)
├── Limit: 1 (fire once)
├── Enable on: specific pages only

Use for:
├── Engaged session tracking
├── Time-on-page events
├── Delayed popups/tags

For Single Page Applications (SPAs):
├── Fires when URL changes without page reload
├── Captures React/Vue/Angular navigation
├── Essential for SPA pageview tracking

Variables available:
├── New History Fragment
├── New History State
├── Old History Fragment
├── Old History State

Fire tag only when multiple triggers occur:
Trigger Group = Trigger A + Trigger B

Example:
Fire after user scrolls 50% AND spends 30 seconds

Setup: Triggers → New → Trigger Group