decodeUriComponent — GTM Variable Template for URL

VARIABLES › URL

decodeUriComponent EXTENDED URL

Direct (.tpl) Apply (.tpl) Add to GTM

Decodes a URI component by replacing percent-encoded characters.

---

When to Use This

---

Examples

Decode spaces▶ Try

INPUT

URI Component To Decode: hello%20world

OUTPUT

hello world

Decode special characters▶ Try

INPUT

URI Component To Decode: user%40example.com

OUTPUT

[email protected]

---

Live Sandbox

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

decodeUriComponent

Read-Only Try Live

URI Component To Decode

💾 The URI component to decode, which may contain percent-encoded characters.

Supported formats:
  ✓ String

Input Setup

Input Function (optional)

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

Result Handling

Output Function (optional)

⚙️ Optional function to apply to the result before returning it (e.g., str => str.toLowerCase(), val => val + ' decoded' for string modifications). Useful for chaining transformations on the output.

URI Component To Decode string

💡 Type any text to see the result update live

🎯 Using special value — click input to type instead

Test with:

Falsy undefined null "" empty 0 false NaN

Truthy true 42 "hello" {} empty [] empty {a:1} [1,2,3]

🔗 Result Handling — Chain Variables

Chain apply-mode variables to the output. Each variable receives the result of the previous one.

decodeUriComponentFunction()

+ Chain another variable

---

Related Variables

Same category: URL

→ assignParamsToString → buildUrlFromParts → completeUrl → decodeUri → encodeURIComponent → encodeUri → extractHash → extractHashParams → extractHost → extractHostname → extractOrigin → extractPasword → extractPathname → extractPort → extractProtocol → extractSearch → extractSearchParams → extractSegmentByIndex → extractUserName → hasFragment → hasParameterWithValue → hasQueryString → omitParamsFromString → parseUrlComponents → pickParamsFromString → stringToPath → ⚡ URL › Transformer

---

Under the Hood

📜 View Implementation Code

/**
 * Decodes a URI component by reversing percent-encoding for special characters.
 *
 * @param {string} data.src - The URI component to decode (e.g., a query parameter or path segment).
 * @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 decoding.
 *
 * @returns {string} The decoded URI component with percent-encoded characters converted back to their original form.
 *
 * @framework ggLowCodeGTMKit
 */
const decodeUriComponent = require('decodeUriComponent');

const decodeUriComponentFunction = function(uriComponent) {
      if (uriComponent == null) {
        return '';
    }
    const stringValue = typeof uriComponent === 'string' ? uriComponent : uriComponent.toString();
    return decodeUriComponent(stringValue);
};
const safeFunction = fn => typeof fn === 'function' ? fn : x => x;
const out = safeFunction(data.out);
// ===============================================================================
// decodeUriComponent - Direct mode
// ===============================================================================
const applyCast = (castFn, value) => safeFunction(castFn)(value);
const value = applyCast(data.pre, data.src);
return out(decodeUriComponentFunction(value));
// ===============================================================================
// decodeUriComponent() – Apply Mode
// ===============================================================================
/*
return function(value) {
   return out(decodeUriComponentFunction(value));
};
*/

🧪 View Test Scenarios (6 tests)

✅ '[example] Decode spaces'
✅ '[example] Decode special characters'
✅ Encoded query parameters - decodes ampersand and equals
✅ String without encoding - returns unchanged
✅ Empty string - returns empty string
✅ Non string input - return it stringified