parseUrlComponents — GTM Variable Template for URL

VARIABLES › URL

parseUrlComponents CORE URL

Direct (.tpl) Apply (.tpl)

Parses a URL into its individual components (protocol, host, pathname, search, hash).

---

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

Parse complete URL

INPUT

URL String: https://example.com:8080/path/to/page?query=test&foo=bar#section

OUTPUT

https:

Parse simple URL

INPUT

URL String: http://test.com/page

OUTPUT

http:

---

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

parseUrlComponents

URL String

💾 The full URL to parse (e.g., "https://example.com/page?x=1#top").

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.

---

Related Variables

Same category: URL

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

---

Under the Hood

📜 View Implementation Code

/**
* Parses a full URL string into its component parts (protocol, host, port, path, query, fragment, etc.).
* 
* @param {string} data.src - The full URL to parse (e.g., "https://example.com/page?x=1#top").
* @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} An object containing the parsed components of the URL.
*
* @framework ggLowCodeGTMKit
*/

const parseUrl = require('parseUrl');

const parseUrlComponents = function(url) {
   return parseUrl(url);
};

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

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

🧪 View Test Scenarios (5 tests)

✅ '[example] Parse complete URL'
✅ '[example] Parse simple URL'
✅ URL with query string only - should parse query parameters
✅ URL with fragment only - should parse fragment
✅ Invalid URL - should return undefined