extractHashParams — GTM Variable Template for URL

VARIABLES › URL

extractHashParams CORE URL

Direct (.tpl) Apply (.tpl)

Extracts key-value parameters from a URL hash fragment.

---

When to Use This

URL Processing

Parse, build, decode, and manipulate URLs and query parameters.

Extraction

Pull specific values, segments, or patterns from complex data structures.

---

Examples

Extract hash parameters

INPUT

URL: https://example.com/page#param1=value1¶m2=value2¶m3=test

OUTPUT

{param1: "value1", param2: "value2", param3: "test"}

No hash returns empty object

INPUT

URL: https://example.com/page?query=value

OUTPUT

{}

---

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

extractHashParams

URL

💾 The URL to parse fragment parameters from.

Input Setup

Input Function (optional)

⚙️ Optional pre-processing function applied to the input before internal logic (e.g., convert object to string, normalize case). Internal transformations such as case handling will still apply afterward.

Result Handling

Output Function (optional)

⚙️ Optional function to apply to the result before returning it (e.g., str => str + ' €', val => val !== undefined for boolean conversion). Useful for chaining transformations on the output.

---

Related Variables

Same category: URL

→ buildUrlFromParts → completeUrl → decodeUri → decodeUriComponent → encodeURIComponent → encodeUri → extractHash → extractHost → extractHostname → extractOrigin → extractPasword → extractPathname → extractPort → extractProtocol → extractSearch → extractSearchParams → extractSegmentByIndex → extractUserName → hasFragment → hasParameterWithValue → hasQueryString → parseUrlComponents → stringToPath

---

Under the Hood

📜 View Implementation Code

/**
 * Parses the fragment(hash) params of a URL and returns an object of key-value pairs.
 *
 * @param {string} data.src - The URL to parse fragment parameters from.
 * @param {Function|string} [data.out] - Optional output handler: function to transform result or string with format.
 *
 * Direct-mode specific parameters:
 * @param {Function} [data.pre] - Optional pre-processor function to transform src before parsing.
 * 
 * @returns {Object<string, string>} An object with decoded key-value pairs from the fragment.
 *
 * @framework ggLowCodeGTMKit
 */

const parseUrl = require('parseUrl');
const decodeUriComponent = require('decodeUriComponent');

const extractHashParams = function(url) {
    if (typeof url !== 'string') return {};
    const parsed = parseUrl(url);
    if (parsed === undefined) return undefined;
    if (!parsed || !parsed.hash) return {};
    const raw = parsed.hash.charAt(0) === '#' ? parsed.hash.slice(1) : parsed.hash;
    if (!raw) return {};
    const pairs = raw.split('&');
    const result = {};
    for (let i = 0; i < pairs.length; i++) {
        const pair = pairs[i];
        if (!pair) continue;
        const eqIndex = pair.indexOf('=');
        const key = eqIndex >= 0 ? pair.slice(0, eqIndex) : pair;
        const value = eqIndex >= 0 ? pair.slice(eqIndex + 1) : '';
        if (key) {
            result[decodeUriComponent(key)] = decodeUriComponent(value);
        }
    }
    return result;
};

const safeFunction = fn => typeof fn === 'function' ? fn : x => x;
const out = safeFunction(data.out);

// ===============================================================================
// extractHashParams - Direct mode
// ===============================================================================
const applyCast = (castFn, value) => safeFunction(castFn)(value);
const value = applyCast(data.pre, data.src);
return out(extractHashParams(value));

// ===============================================================================
// extractHashParams() – Apply Mode: runtime parameter
// ===============================================================================
/*
return function(value) {
   return out(extractHashParams(value));
};
*/

🧪 View Test Scenarios (5 tests)

✅ '[example] Extract hash parameters'
✅ URL with encoded hash parameters - decodes properly
✅ '[example] No hash returns empty object'
✅ Invalid URL - returns undefined
✅ URL with empty hash - returns empty object