encodeURIComponent — GTM Variable Template for URL

VARIABLES › URL

encodeURIComponent EXTENDED URL

Direct (.tpl) Apply (.tpl)

Encodes a URI component, escaping special characters.

---

---

Examples

Encode spaces▶ Try

INPUT

URI Component To Encode: hello world

OUTPUT

hello%20world

Encode special characters▶ Try

INPUT

URI Component To Encode: [email protected]

OUTPUT

user%40example.com

---

GTM Configuration

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

encodeURIComponent

Read-Only Try Live

URI Component To Encode

💾 The URI component to encode (e.g., a query parameter or path segment).

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 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.

URI Component To Encode 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.

encodeUriComponentFunction()

+ Chain another variable

---

Related Variables

Same category: URL

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

---

Under the Hood

📜 View Implementation Code

/**
 * Encodes a URI component by converting special characters into percent-encoded equivalents.
 * 
 * @param {string} data.src - The URI component to encode (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 encoding.
 * 
 * @returns {string} The encoded URI component with special characters converted to percent-encoded equivalents.
 *
 * @framework ggLowCodeGTMKit
 */
const encodeUriComponent = require('encodeUriComponent');

const encodeUriComponentFunction = function(uriComponent) {
    return encodeUriComponent(uriComponent);
};

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

// ===============================================================================
// encodeUriComponentFunction - Direct mode
// ===============================================================================
const applyCast = (castFn, value) => safeFunction(castFn)(value);
const value = applyCast(data.pre, data.src);
return out(encodeUriComponentFunction(value));
// ===============================================================================
// encodeUriComponentFunction() – Apply Mode
// ===============================================================================
/*
return function(value) {
   return out(encodeUriComponentFunction(value));
};
*/

🧪 View Test Scenarios (6 tests)

✅ '[example] Encode spaces'
✅ '[example] Encode special characters'
✅ String with query parameter characters - encodes ampersand and equals
✅ String with only safe characters - returns unchanged
✅ Empty string - returns empty string
✅ Non string input - returns it stringified