Skip to content
You Don't Know GA

getElementAttribute — GTM Variable Template for GTM

VARIABLES › GTM
getElementAttribute EXTENDED GTM
Direct (.tpl) Apply (.tpl)

Gets an attribute value from a DOM element via the dataLayer.

When to Use This

Section titled “When to Use This”

Examples

Section titled “Examples”
Get href attribute
INPUT
Element Path: gtm.element
Attribute: href
OUTPUT
/products/shoes
Get tag name
INPUT
Element Path: gtm.element
Attribute: tagName
OUTPUT
A

GTM Configuration

Section titled “GTM Configuration”

This is what you'll see when you open this variable in Google Tag Manager. Hover the icons for details.

Read-only Preview
getElementAttribute
Element Path
💾 The dataLayer path to the element. Use "gtm.element" for clicked element, or add ".parentElement" to traverse up.

Supported formats:
  ✓ Clicked element: "gtm.element"
  ✓ Parent: "gtm.element.parentElement"
  ✓ Grandparent: "gtm.element.parentElement.parentElement"
Attribute
💾 The attribute to retrieve from the element.
Custom Attribute Name
💾 Name of the custom attribute to retrieve.

Supported formats:
  ✓ Data attribute: "data-product-id", "data-gtm-click"
  ✓ Any attribute: "aria-label", "title"
Input Setup
Input Function (optional)
⚙️ Optional pre-processing function applied to the element path before retrieval.
Result Handling
Output Function (optional)
⚙️ Optional function to apply to the attribute value before returning it (e.g., val => val.toLowerCase(), val => val.split(' ')[0] for first class). Useful for chaining transformations.
Section titled “Related Variables”

Same category: GTM

→ document.title → estimateReadingTime → findClosestElement → gaEcommerceEventList → gaLeadGenerationEventList → getCookieValue → getDataLayerByEvent → getDataLayerCurrent → getDataLayerValue → getGaMeasurementIds → getLocalStorage → getPersistedDataLayerValue → getRootDomain! → gtmIsDebugMode → gtmIsPreviewMode → hasLocalStorageKey → isGrantedAdPersonalization → isGrantedAdStorage → isGrantedAdUserData → isGrantedAnalyticsStorage → isGrantedFunctionalityStorage → isGrantedPersonalizationStorage → isGrantedSecurityStorage → ⚡ COMMAND TABLE › Lazy (Advanced)

Under the Hood

Section titled “Under the Hood”
📜 View Implementation Code
/**
 * Gets an attribute value from a dataLayer element path.
 *
 * @param {string} data.src - The element path in dataLayer (e.g., "gtm.element" or "gtm.element.parentElement").
 * @param {string} data.attr - The attribute to retrieve (href, class, id, data-*, tagName, innerText, custom).
 * @param {string} [data.customAttr] - Custom attribute name when attr is "custom".
 * @param {Function|string} [data.out] - Optional output handler.
 *
 * Direct-mode specific parameters:
 * @param {Function} [data.pre] - Optional pre-processor function.
 *
 * @returns {string|undefined} The attribute value, or undefined if not found.
 *
 * @framework ggLowCodeGTMKit
 */
const copyFromDataLayer = require('copyFromDataLayer');


const attributePathCache = {};
const getAttributePath = function(attr) {
    if (attributePathCache[attr]) return attributePathCache[attr];
    let path;
    if (attr.indexOf('data-') === 0) {
        const camelCase = attr.substring(5).split('-').map(function(text, index) {
            if (index === 0) return text;
            return text.charAt(0).toUpperCase() + text.substring(1);
        }).join('');
        path = '.dataset.' + camelCase;
    } else if (attr === 'tagName') {
        path = '.tagName';
    } else if (attr === 'innerText') {
        path = '.innerText';
    } else {
        path = '.attributes.' + attr + '.value';
    }
    attributePathCache[attr] = path;
    return path;
};


const getElementAttribute = function(elementPath, attribute, customAttribute) {
    if (!elementPath || !attribute) {
        return undefined;
    }


    const actualAttr = attribute === 'custom' ? customAttribute : attribute;


    if (!actualAttr) {
        return undefined;
    }


    const fullPath = elementPath + getAttributePath(actualAttr);
    let value = copyFromDataLayer(fullPath);


    if (actualAttr === 'innerText' && typeof value === 'string') {
        value = value.trim().split('\n').join(' ').split('\t').join(' ');
    }


    return value;
};
const safeFunction = fn => typeof fn === 'function' ? fn : x => x;
const out = safeFunction(data.out);
// ===============================================================================
// getElementAttribute - Direct mode
// ===============================================================================
const applyCast = (castFn, value) => safeFunction(castFn)(value);
const elementPath = applyCast(data.pre, data.src);
return out(getElementAttribute(elementPath, data.attr, data.customAttr));
// ===============================================================================
// getElementAttribute(...) – Apply Mode
// ===============================================================================
/*
return function(elementPath, attribute) {
   attribute = data.rp1 ? attribute : data.attr;
   const customAttribute = data.rp1 ? data.customAttr : undefined;
   return out(getElementAttribute(elementPath, attribute, customAttribute));
};
*/




___WEB_PERMISSIONS___


[
  {
    "
🧪 View Test Scenarios (6 tests)
✅ '[example] Get href attribute'
✅ '[example] Get tag name'
✅ Test get data-* attribute converts to camelCase
✅ Test get innerText attribute cleans whitespace
✅ Test get attribute from parent element
✅ Test undefined element path returns undefined