10 Advanced JavaScript Variables Every Marketer Should Use in Google Tag Manager (GTM)

Google Tag Manager (GTM) is an incredibly powerful tool for tracking user interactions, managing tags, and implementing advanced analytics on your website. However, many marketers underestimate the potential of Custom JavaScript Variables in GTM. These variables allow you to extract dynamic data directly from your website, customize tracking, and provide insights that go far beyond standard tracking capabilities.

Why Use Advanced JavaScript Variables in GTM?

Custom JavaScript Variables allow you to:

• Dynamically capture user interactions (like clicks, scrolls, and inputs).
• Extract information from your website (e.g., page data, query parameters, or cookies).
• Enhance tracking accuracy for tools like Google Analytics, Meta Pixel, or any other tags.

By using these variables, you can implement personalized marketing, track specific audience behaviors, and optimize your marketing strategy in ways that generic variables cannot.

Why Use Advanced JavaScript Variables in GTM?

Custom JavaScript Variables allow you to:

• Dynamically capture user interactions (like clicks, scrolls, and inputs).
• Extract information from your website (e.g., page data, query parameters, or cookies).
• Enhance tracking accuracy for tools like Google Analytics, Meta Pixel, or any other tags.

By using these variables, you can implement personalized marketing, track specific audience behaviors, and optimize your marketing strategy in ways that generic variables cannot.

1. Page Title Variable

This variable fetches the title of the current webpage. It’s useful for tagging or tracking specific pages without relying on URLs, which can be long or change frequently.

function() {
  return document.title || 'No title available';
}        

Use Case: Pass the page title into Google Analytics events to better identify which pages users interact with.

2. Page URL Variable

Get the full URL of the current page, including the protocol, domain, and query parameters.

function() {
  return window.location.href;
}        

Use Case: Useful for creating detailed reports in Google Analytics or sending the full URL to ad platforms like Meta Ads for better ad attribution.

3. Referrer URL Variable

This variable retrieves the URL of the page that referred the user to your website.

function() {
  return document.referrer || 'No referrer available';
}        

Use Case: Understand where your traffic is coming from and pass this data to analytics or advertising platforms for attribution tracking.

4. Query String Parameter Extractor

Extract specific query parameters (e.g., UTM tags) from the page URL.

function() {
  var queryParam = 'utm_source'; // Change to the desired parameter
  var params = new URLSearchParams(window.location.search);
  return params.get(queryParam) || 'Not available';
}        

Use Case: Dynamically track campaign sources, mediums, and content to better understand marketing campaign performance.

5. Hostname Variable

Retrieve the domain name of the current website.

function() {
  return window.location.hostname;
}        

Use Case: Essential for marketers working on multi-domain tracking, ensuring you can distinguish between multiple properties in Google Analytics or other tools.

6. Logged-In User Detection

Detect if the user is logged in by checking for a specific cookie (e.g., user_session).

function() {
  var cookieName = 'user_session';
  var cookies = document.cookie.split('; ');
  for (var i = 0; i < cookies.length; i++) {
    var cookiePair = cookies[i].split('=');
    if (cookiePair[0] === cookieName) {
      return true;
    }
  }
  return false;
}        

Use Case: Track behavior differences between logged-in and non-logged-in users and customize your marketing campaigns accordingly.

7. Extract Data Layer Values

Pull specific values from GTM’s Data Layer.

function() {
  var key = 'userType'; // Replace with your Data Layer key
  return window.dataLayer && window.dataLayer.length
    ? window.dataLayer.map(function(item) {
        return item[key] || null;
      }).filter(function(value) {
        return value !== null;
      })[0] || 'Not available'
    : 'No Data Layer';
}        

Use Case: Extract important details like user roles, product categories, or custom events that your development team has already implemented in the Data Layer.

8. Scroll Depth Percentage

Calculate the percentage of the page the user has scrolled through.

function() {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
  var docHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
  var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  return Math.round((scrollTop / (docHeight - viewportHeight)) * 100) || 0;
}        

Use Case: Track engagement levels on long-form content or single-page websites and send data to tools like Google Analytics for behavioral analysis.

9. Clicked Element Text

Capture the text of a button or link that the user clicked on.

function() {
  return document.documentElement.lang || navigator.language || 'No language available';
}        

Use Case: Track user interaction with CTAs (Call to Actions) or navigation links to identify high-performing elements.

10. Page Language Detection

Retrieve the language setting of the current page.

function() {
  return document.documentElement.lang || navigator.language || 'No language available';
}        

Use Case: Customize your marketing campaigns for users based on their language preference, particularly for global websites.

How to Implement These Variables in GTM

Follow these steps to create a Custom JavaScript Variable in GTM:

1. Open GTM: Go to your Google Tag Manager container.
2. Create a New Variable:Navigate to Variables → New.Click on Variable Configuration.Select Custom JavaScript.
3. Paste the Code: Copy and paste the JavaScript code for the variable you need.
4. Save the Variable: Give your variable a descriptive name (e.g., "Page Title Variable").
5. Test in Preview Mode: Use GTM’s Preview Mode to ensure the variable is working as intended.

Final Thoughts

By using these 10 advanced JavaScript variables, you can supercharge your GTM setup and unlock valuable insights into user behavior. Whether it’s tracking specific query parameters, detecting logged-in users, or calculating scroll depth, these variables provide endless possibilities for marketers looking to go beyond basic tagging.

Remember: While GTM makes it easy to implement these variables, always test them thoroughly in Preview Mode and QA environments before pushing them live. Proper implementation ensures that your tracking is accurate and delivers actionable insights for your campaigns.

Take your GTM game to the next level with these advanced JavaScript variables—because smarter data leads to better marketing decisions! ??