Google Tag Manager Variables: The Complete Setup Tutorial (2026)

Google Tag Manager is one of the most powerful tools in a digital marketer's analytics stack. It allows you to deploy tracking scripts, pixels, and custom code without waiting for developer involvement. But the true power of GTM comes from its variable system — the mechanism that lets your tags capture dynamic data like product prices, user IDs, click text, and scroll depth. This Google Tag Manager variables tutorial walks you through every variable type with practical configuration examples.

What Are GTM Variables?

In GTM, a variable is a named placeholder that holds a dynamic value retrieved from the browser environment at the moment a trigger fires. Rather than hardcoding values inside your tags, you reference variables to pass contextual data — like a specific product's price or a clicked button's label — into your analytics tools dynamically.

GTM variables are used in three core contexts:

• In Tags: To send event parameters (e.g., sending a product's price to GA4 as a conversion value).
• In Triggers: To define firing conditions (e.g., fire only when the clicked element's class equals "add-to-cart").
• In Other Variables: To build complex lookup logic or manipulate data before passing it along.

Built-In Variables: Enabling the Basics

GTM includes a library of pre-built variables that cover the most common tracking needs. You must explicitly enable them before using them in tags or triggers. Navigate to Variables → Configure in your GTM workspace to enable the following:

Click Variables

• Click Element: Returns the DOM element that was clicked. Used to precisely identify which HTML element triggered an event.
• Click Classes: Returns the CSS classes of the clicked element. Use this to fire on clicks to elements with a specific class name.
• Click ID: Returns the ID attribute of the clicked element — ideal for tracking CTA buttons with unique IDs.
• Click Text: Returns the visible text label of the clicked element. This is perfect for tracking which navigation menu item a user clicked.
• Click URL: Returns the destination URL of a clicked link.

Page Variables

• Page URL: The complete URL of the current page.
• Page Path: The path portion of the URL (e.g., /blog/seo-guide).
• Page Hostname: The domain portion of the URL (e.g., piyushmarketing.com).
• Referrer: The URL of the referring page — critical for identifying traffic sources.

Scroll Variables

• Scroll Depth Threshold: Fires at defined scroll percentages (25%, 50%, 75%, 90%). Combine with a Scroll Depth trigger to measure content engagement.
• Scroll Direction: Returns "vertical" or "horizontal".

User-Defined Variables: Advanced Configuration

User-defined variables are custom variables you create to capture specific data not covered by built-in variables. GTM offers 11+ types of user-defined variables.

Data Layer Variable

The most important variable type for e-commerce and SaaS tracking. When your development team pushes events to the Data Layer (the JavaScript object GTM reads), you can extract specific parameter values using Data Layer variables.

Example Setup: For GA4 e-commerce tracking, your developers push:

dataLayer.push({
  'event': 'purchase',
  'transaction_id': 'T12345',
  'value': 2499,
  'currency': 'INR'
});

You then create a Data Layer Variable with the variable name set to value to extract ₹2499 and pass it to your GA4 purchase event as the revenue parameter.

Custom JavaScript Variable

This is the most flexible variable type. It executes a JavaScript function and returns any value you calculate. Common use cases:

• Extracting data from cookies: return document.cookie.match(/userId=([^;]+)/)?.[1];
• Reading DOM values: return document.querySelector('.product-price')?.innerText;
• Applying business logic: Clean up a phone number string before passing it to a CRM webhook.

Lookup Table Variable

A Lookup Table maps an input value to a corresponding output value. This is useful for:

• Mapping environment hostnames to GA4 Measurement IDs (staging vs. production).
• Converting campaign source codes to human-readable channel names.
• Assigning conversion values to different form submission types.

Configuration Example: Input variable = {{Page Hostname}}. Map staging.yoursite.com → G-STAGING123 and yoursite.com → G-PROD456.

Constant Variable

A simple variable that always returns the same static string value. Use this to store your GA4 Measurement ID, your Google Ads Conversion ID, or your Facebook Pixel ID so you can reference them across multiple tags without hardcoding.

URL Variable

Parses components from the current page URL. Configure it to extract the full URL, the hostname, path, query string, or a specific query parameter value. Useful for tracking UTM parameter values.

Step-by-Step: Tracking a Form Submission with Variables

Here is a practical end-to-end example of using variables to track lead form submissions and send them to GA4:

Step 1: Enable Built-In Variables

Go to Variables → Configure and enable: Click Element, Click Classes, Form ID, Form URL, Form Target.

Step 2: Create a Trigger

Create a new trigger of type Form Submission. Set it to fire on "All Forms" or restrict it by Form ID using the {{Form ID}} variable matching your contact form's HTML ID attribute.

Step 3: Create a Custom JavaScript Variable for Lead Type

If you have multiple forms on your site, create a Custom JavaScript variable that reads the form ID and returns the appropriate lead type label (e.g., "Contact Form", "Demo Request", "Newsletter Signup").

Step 4: Create a GA4 Event Tag

Create a GA4 Event Tag with the event name "generate_lead". Add event parameters:

• form_id → {{Form ID}}
• lead_type → {{CJS - Lead Type}} (your custom JS variable)
• page_path → {{Page Path}}

Step 5: Preview and Verify

Use GTM's Preview mode to submit a test form. In the Tag Assistant, verify the trigger fires, all variables resolve to the expected values, and the GA4 tag sends the event with correct parameters.

Common GTM Variable Mistakes to Avoid

• Not enabling built-in variables: Click variables won't be available until you explicitly enable them in the Variables panel.
• Wrong Data Layer version: GTM supports Data Layer versions 1 and 2. Make sure your variable configuration matches your site's implementation. Version 2 (dot notation) is standard for modern sites.
• Forgetting URL encoding: Query parameter values may include encoded characters. Use a URL-decode function in Custom JavaScript if your values contain %20 or similar encodings.

We build enterprise-grade GTM tracking architectures. Discover our custom Google Tag Manager configuration services to fully audit your measurement setup.