completeUrl — GTM Variable Template for URL

VARIABLES › URL

completeUrl CORE URL

Direct (.tpl) Apply (.tpl)

Completes partial URLs with the current page context.

---

When to Use This

URL Processing

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

---

Examples

Absolute URL unchanged

INPUT

URL to Complete: https://google.com/search

OUTPUT

https://google.com/search

Protocol-relative URL completed

INPUT

URL to Complete: //cdn.example.com/image.jpg

OUTPUT

https://cdn.example.com/image.jpg

---

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

completeUrl

URL to Complete

💾 The URL to complete. Can be relative or absolute.

Supported formats:
  ✓ Absolute: "https://example.com/page" (unchanged)
  ✓ Protocol-relative: "//cdn.example.com/img.jpg"
  ✓ Root-relative: "/about/contact.html"
  ✓ Parent-relative: "../other-page.html"
  ✓ Current-relative: "./page.html" or "page.html"
  ✓ Hash link: "#section"
  ✓ Query link: "?param=value"

Input Setup

Input Function (optional)

⚙️ Optional pre-processing function applied to the URL before completing (e.g., trim whitespace, decode URI).

Result Handling

Output Function (optional)

⚙️ Optional function to apply to the completed URL before returning it (e.g., url => url.toLowerCase(), url => url.split('?')[0] to remove query string). Useful for chaining transformations.

---

Related Variables

Same category: URL

→ buildUrlFromParts → 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

/**
 * Completes a relative URL to an absolute URL based on the current page.
 * 
 * @param {string} data.src - The URL to complete (can be relative or absolute).
 * @param {Function|string} [data.out] - Optional output handler.
 *
 * Direct-mode specific parameters:
 * @param {Function} [data.pre] - Optional pre-processor function.
 * 
 * @returns {string|undefined} The completed absolute URL, or the original if already absolute.
 *
 * @framework ggLowCodeGTMKit
 */
const getUrl = require('getUrl');

const completeUrl = function(url) {
    if (!url || typeof url !== 'string') {
        return undefined;
    }
    
    const protocol = getUrl('protocol');
    const domain = getUrl('host');
    const path = getUrl('path');
    const query = getUrl('query');
    const fullQuery = query ? '?' + query : '';
    
    if (url.indexOf('://') > 0 && url.indexOf('://') < 10) {
        return url;
    }
   
    if (url.indexOf('//') === 0) {
        return protocol + ':' + url;
    }
    
    if (url.indexOf('#') === 0) {
        return protocol + '://' + domain + path + fullQuery + url;
    }
    
    if (url.indexOf('?') === 0) {
        return protocol + '://' + domain + path + url;
    }
    
    if (url.indexOf('/') === 0) {
        return protocol + '://' + domain + url;
    }
    
    if (url.indexOf('../') === 0) {
        const parts = url.split('../');
        const pathParts = path.split('/');
        
        if (pathParts[pathParts.length - 1] !== '') {
            pathParts.pop();
        }
        
        for (let i = 0; i < parts.length - 1; i++) {
            pathParts.pop();
        }
        
        return protocol + '://' + domain + pathParts.join('/') + '/' + parts[parts.length - 1];
    }
    
    let relativePath = url;
    if (url.indexOf('./') === 0) {
        relativePath = url.substring(2);
    }
    
    const pathParts = path.split('/');
    pathParts.pop();
    const basePath = pathParts.join('/');
    
    return protocol + '://' + domain + basePath + '/' + relativePath;
};
const safeFunction = fn => typeof fn === 'function' ? fn : x => x;
const out = safeFunction(data.out);
// ===============================================================================
// completeUrl - Direct mode
// ===============================================================================
const applyCast = (castFn, value) => safeFunction(castFn)(value);
const url = applyCast(data.pre, data.src);
return out(completeUrl(url));
// ===============================================================================
// completeUrl() – Apply Mode
// ===============================================================================
/*
return function(url) {
   return out(completeUrl(url));
};
*/


___WEB_PERMISSIONS___

[
  {
    "instance": {
      "key": {
        "publicId": "get_url",
        "versionId": "1"
      },
      "param": [
        {
          "key": "urlParts",
          "value": {
            "type": 1,
            "string": "any"
          }
 

🧪 View Test Scenarios (7 tests)

✅ '[example] Absolute URL unchanged'
✅ '[example] Protocol-relative URL completed'
✅ Test hash link completes with current page
✅ Test root-relative URL
✅ Test parent-relative URL with point and slash
✅ Test current-relative URL without point and slash
✅ Test invalid input returns undefined