Variables

Variables use double curly braces: {{Variable Name}}

In tags:
Event Value: {{Transaction Value}}

In triggers:
Condition: {{Page Path}} contains /checkout

Store fixed values:
├── GA4 Measurement ID: G-XXXXXXXXXX
├── Google Ads ID: AW-XXXXXXXXX
├── Meta Pixel ID: 1234567890

Benefits:
├── Change once, update everywhere
├── Consistent values across tags
├── Easy to manage tracking IDs

// Access JavaScript values on the page
Variable Type: JavaScript Variable
Global Variable Name: document.title

// For nested objects:
Global Variable Name: dataLayer[0].user.email

// Write custom logic
function() {
  // Get value from cookie
  var cookies = document.cookie.split(';');
  for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].trim();
    if (cookie.indexOf('user_id=') === 0) {
      return cookie.substring(8);
    }
  }
  return undefined;
}

Read values from page elements:
Element Selector: #product-price
Attribute Name: data-price (or leave blank for text)

Use for:
├── Product prices from data attributes
├── Form field values
├── Hidden input values

Read cookie values:
Cookie Name: _ga

Common uses:
├── GA Client ID
├── User ID from auth cookie
├── Session tokens

Parse URL components:
Component Type: Query
Query Key: utm_source

URL: example.com?utm_source=google&utm_medium=cpc
Result: google

Component options:
├── Full URL
├── Protocol (https)
├── Host (example.com)
├── Port
├── Path (/page)
├── Query (?key=value)
├── Fragment (#section)

Reads values pushed to the data layer:

dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: 'T12345',
    value: 99.99,
    currency: 'USD'
  }
});

Variable: ecommerce.value → Returns 99.99

Variable Type: Data Layer Variable
Data Layer Variable Name: ecommerce.value
Data Layer Version: Version 2

Naming conventions:
├── DLV - ecommerce.value
├── DLV - user.email
├── DLV - product.name

For deeply nested data:
dataLayer.push({
  ecommerce: {
    items: [{
      item_name: 'Product A',
      price: 49.99
    }]
  }
});

Access first item price:
Variable Name: ecommerce.items.0.price
Result: 49.99

Convert one value to another:

Input Variable: {{Page Path}}
Output:

| Input | Output |
|-------|--------|
| / | Homepage |
| /products | Product Listing |
| /cart | Shopping Cart |
| /checkout | Checkout |

Default Value: Other Page

Pattern matching for flexible lookups:

Input Variable: {{Page Path}}

| Pattern | Output |
|---------|--------|
| ^/products/.+ | Product Detail |
| ^/blog/.+ | Blog Post |
| ^/category/.+ | Category Page |

Default Value: Other

1. Page Type Classification
   Path → page_type parameter

2. Content Grouping
   URL patterns → content groups

3. Environment Detection
   Hostname → environment (dev/staging/prod)

4. Region Mapping
   Country code → region name

Use prefixes to identify variable types:

DLV - Data Layer Variable
├── DLV - ecommerce.value
├── DLV - user.id

JS - JavaScript Variable
├── JS - Document Title
├── JS - User Agent

CJS - Custom JavaScript
├── CJS - Get Cookie Value
├── CJS - Format Currency

LT - Lookup Table
├── LT - Page Type
├── LT - Content Group

CONST - Constant
├── CONST - GA4 ID
├── CONST - GAds ID

Always set default values:
├── Prevents undefined errors
├── Provides fallback data
├── Makes debugging easier

Example:
DLV - user.email
Default: (not set)

In Preview Mode:
1. Click on any event
2. Go to Variables tab
3. See all variable values at that moment
4. Verify values are correct

Console testing:
console.log(google_tag_manager["GTM-XXXXXX"].dataLayer.get("variableName"));