Page Path vs Page URL in Google Tag Manager

Updated: October 20th, 2022

If you’re just starting with web tracking and have no prior technical knowledge of the web, you might be confused about which Page variables (in Google Tag Manager) to use and when. Questions like “what is the difference between Page Path and Page URL?” might be quite common.

That’s why I’ve decided to publish a quick guide comparing Page Path vs Page URL so that you would have a better understanding of it.

If you want to learn more about Page variables and Pageview Triggers in GTM, read this guide.

Page Path vs Page URL in GTM

Page Path returns way less info compared to the Page URL.

Page Path returns only what comes after the hostname (domain) but before:

• the question mark “?” (a.k.a. query parameters)
• hashmark “#” (a.k.a. URL fragment)
• colon “:” (a.k.a. port).

It just returns the subdirectory (page) on which you currently are.

If you want to also use query parameters (e.g. utm_parameters) in your triggers, then the Page Path variable is a wrong choice. You should instead use the Page URL because it returns:

• protocol (e.g. https://)
• hostname (e.g. www.example.com)
• page path (e.g. /pages/contact-us/)
• query parameters (e.g. ?utm_medium=referral&utm_source=othersite.com)

To sum up, the difference between the Page URL and Page Path is that Page URL returns almost the entire URL while Page Path just returns the value that comes after the hostname (but before the query parameter).

Here’s an image that should give you a better understanding.

If, on the other hand, you want to isolate and access only other parts of the URL (but without getting the full URL, you will have to rely on custom page variables. Continue reading, and I’ll show you how.

 

Custom Page/URL variables

Another amazing thing about GTM is its customization possibilities. If the built-in functionality is not enough for you (it probably won’t), you can do some awesome user-defined stuff.

In Google Tag Manager’s interface, go to Variables and scroll down till you see the User-defined variables section. Click new and choose the URL variable.

The URL Variable can be used to access components of the current page URL. This is a very versatile Variable type, and is especially useful for traversing query parameters and hash fragments in your URLs. Note: There are Built-In Google Tag Manager Variables for some situations (i.e. Page URL, Page Hostname, Page Path).

Let’s say the address of the web page I am currently on is https://www.example.com/welcome:8080?gclid=aabbcc123#home. Now I will describe every component type that is available in the URL variable:

• Full URL – returns the full URL without the hash fragment, e.g. https://www.example.com/welcome?gclid=aabbcc123.
• Protocol – returns the protocol of the URL, e.g. https.
• Host Name – returns the hostname of the URL without the port number, e.g. www.example.com. You can choose to Strip ‘www.’ to strip the ‘www’ subdomain from the hostname.
• Port – returns the port number used in the URL. In my example, the variable will return 8080 value. Or 80 for HTTP / 443 for HTTPS, if the URL had no port number.
• Path – returns only the pathname in the URL (in other words – everything after the hostname, except port, fragment, and query). In my example, I would get /welcome/ value. You can also specify Default Pages to strip pages with names like ‘index.html’ or ‘index.php’ from the return string.
• Query – returns the entire query parameter string (without leading ‘?’) if you don’t specify a query key. In my case, I could specify the query key to gclid. Thus, the URL variable’s value would be aabbcc123. If you do specify a query key, but that key is absent, the variable’s value would be undefined.
• Fragment – returns the value of the URL’s fragment without the leading ‘#’. In my case value would be home.

You can expand the More Settings tab to find a source selector. In this selector, you can choose the Variable whose return value the URL Variable will access (for example, Click URL). But by default, the URL variable returns parts of the Page address.

 

Page Path vs Page Url: Final words

To sum up, Page Path returns the part of the URL that comes after the hostname (domain) and before the query parameters, URL fragment, or port. An example of this could be /pages/contact-us/.

Page URL returns more information about the web page address (including the protocol, hostname, page path, port, query parameters). An example could be https://www.example.com/pages/contact-us/?ref=internal-banner.