Skip to content
ggLowCodeGTMKit

buildUrlFromParts — GTM Variable Template for URL

VARIABLES › URL
buildUrlFromParts CORE URL
Direct (.tpl) Apply (.tpl)

Builds a URL from individual components (protocol, host, path, 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

Build complete URL
INPUT
Parsed URL Object: {
protocol: 'https:',
hostname: 'example.com',
port: '8080',
pathname: '/path/to/page',
search: '?foo=bar',
hash: '#section'
}
keys: ['protocol', 'host', 'port', 'pathname', 'search', 'hash']
Parts to Include: [{part: 'protocol'}, {part: 'host'}, {part: 'port'}, {part: 'pathname'}, {part: 'search'}, {part: 'hash'}]
OUTPUT
https://example.com:8080/path/to/page?foo=bar#section
Build origin only
INPUT
Parsed URL Object: {
protocol: 'https:',
hostname: 'example.com',
pathname: '/path',
search: '?foo=bar'
}
keys: ['protocol', 'host']
Parts to Include: [{part: 'protocol'}, {part: 'host'}]
OUTPUT
https://example.com

GTM Configuration

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

buildUrlFromParts
Parsed URL Object
💾 A parsed URL object (from parseUrl or similar).

Expected properties:
  ✓ protocol: "https:"
  ✓ hostname: "example.com"
  ✓ port: "8080"
  ✓ pathname: "/path/to/page"
  ✓ search: "?foo=bar"
  ✓ hash: "#section"
  ✓ username: "user"
  ✓ password: "pass"
Parts to Include
💾 List of URL parts to include in the output. Order doesn't matter - parts are assembled in standard URL order.

*** Build complete URL***

*** Build origin only***
⊖
Input Setup
Input Function (optional)
⚙️ Optional pre-processing function applied to the parsed URL object before building.
Result Handling
Output Function (optional)
⚙️ Optional function to apply to the result before returning it.
Parsed URL Object object
💡 Type any text to see the result update live
🎯 Using special value — click input to type instead
Test with:
Falsy
Truthy
Parts to Include list
🔗 Result Handling — Chain Variables
Chain apply-mode variables to the output. Each variable receives the result of the previous one.
buildUrlFromParts()

Related Variables

Same category: URL

→ completeUrl → decodeUri → decodeUriComponent → encodeURIComponent → 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
/**
 * Builds a URL string from selected parts of a parsed URL object.
 *
 * @param {Object} data.src - The parsed URL object (from parseUrl).
 * @param {Array} data.kys - Array of objects with parts to include: protocol, username, password, host, port, pathname, search, hash.
 * @param {Function|string} [data.out] - Optional output handler.
 *
 * Direct-mode specific parameters:
 * @param {Function} [data.pre] - Optional pre-processor function.
 * 
 * @returns {string} A reconstructed URL with only the selected parts.
 *
 * @framework ggLowCodeGTMKit
 */
const getType = require('getType');

const createFlatArrayFromValues = function(list, property) {
    const result = [];
    if (!list) return result;
    for (let i = 0; i < list.length; i++) {
        const val = list[i][property];
        if (getType(val) === 'array') {
            for (let j = 0; j < val.length; j++) {
                result.push(val[j]);
            }
        } else if (val) {
            result.push(val);
        }
    }
    return result;
};

const buildUrlFromParts = function(parts, partsToInclude) {
    if (!parts || typeof parts !== 'object') {
        return '';
    }
    
    if (!partsToInclude || partsToInclude.length === 0) {
        return '';
    }
    
    const includeMap = {};
    for (let i = 0; i < partsToInclude.length; i++) {
        includeMap[partsToInclude[i]] = true;
    }
    
    let url = '';
    
    if (includeMap.protocol && parts.protocol) {
        url += parts.protocol + '//';
    }
    
    if (includeMap.username && parts.username) {
        url += parts.username;
        if (includeMap.password && parts.password) {
            url += ':' + parts.password;
        }
        url += '@';
    }
    
    if (includeMap.host && parts.hostname) {
        url += parts.hostname;
        if (includeMap.port && parts.port) {
            url += ':' + parts.port;
        }
    }
    
    if (includeMap.pathname && parts.pathname) {
        url += parts.pathname;
    }
    
    if (includeMap.search && parts.search) {
        url += parts.search;
    }
    
    if (includeMap.hash && parts.hash) {
        url += parts.hash;
    }
    
    return url;
};
const safeFunction = fn => typeof fn === 'function' ? fn : x => x;
const out = safeFunction(data.out);
// ===============================================================================
// buildUrlFromParts - Direct mode
// ===============================================================================
const applyCast = (castFn, value) => safeFunction(castFn)(value);
const parts = applyCast(data.pre, data.src);
const keys = createFlatArrayFromValues(data.kys, "part");
return out(buildUrlFromParts(parts, keys));
// ===============================================================================
// buildUrlFromParts(...) – Apply Mode
// ===============================================================================
/*
return function(parts, partsToInclude) {
   partsToInclude = createFlatArrayFromValues(dat
🧪 View Test Scenarios (7 tests)
✅ '[example] Build complete URL'
✅ '[example] Build origin only'
✅ Test build path only (pathname + search + hash)
✅ Test clean URL (no search, no hash)
✅ Test with credentials
✅ Test empty parts returns empty string
✅ Test no keys returns empty string