One of the doubts that often arise when starting to work with Google Tag Manager is, when you activate the integrated variables, to differentiate between page path and page url.
If you are still unclear about the difference between these two variables, this is the article for you.
What is page path in Google Tag Manager?
Google Tag Manager's page path variable will return much less information than page url, as it will only return what comes after the domain name, but before any other query parameter, for example:
- The question mark "?", which is used as a query parameter.
- The hashmark symbol "#", which is used as a url fragment to, for example, define anchors within a page.
- The colon ":", which is used to define the web access port.
That is to say that the page path variable only returns the subdirectory (page) of the website.
That way if, for example, you want to use other elements, such as the query parameters of a campaign (utms) in one of the Google Tag Manager triggers, the page path variable won't work for you.
What is page url in Google Tag Manager?
The page url variable is more complete, as it will return the whole url with all its components: Protocol, hostname, access port, path, filename extension, query and snippet.
In principle, and if you do nothing, it will return the full url, but you can isolate one or all of its components. Let's see how.
Custom URL variables
One of the advantages of Google Tag Manager is that you can customise its components if you don't find them "standard" in the tool. With variables it couldn't be otherwise.
In today's case, if you need to customise the page url variable so that instead of returning the whole url (this is the default option), it returns some of its components, you should go to "Variables " and in the lower part "User defined variables" select "New" and when you click on variable configuration, choose " URL" in the list of variables that will be displayed on the right side.
Once the url variable configuration is displayed you can choose which component you want to return. The default option is full url, but in the dropdown you will find other components to configure.
To understand how this variable works, let's take as an example the URL https://carlosmdh.en/tutorials/differences-between-page-path-and-page-url-en-google-tag-manager:8080?fbclid:3h5h67696923df#page.
- Full URL. It will return the full url, but without the hash mark snippet. For example https://carlosmdh.en/tutorials/differences-between-page-path-and-page-url-in-google-tag-manager/?fbclid:3h5h67696923df#page
- Protocol. Returns the protocol of the URL. In my case, https.
- Host name. Returns the host (domain) name without the port. In my case carlosmd6.sg-host.com. If the host was preceded by the www subdomain you could omit it by checking the box that pops up when you select this component.
- Port. Returns the access port, in the example 8080. If no port is defined in the URL it will return 80 for http or 443 for https.
- Path. It will return the path name in the URL, i.e. what follows the host name, except the port, the query and the fragment. In this component you can remove the last element that does not correspond to the directory, for example, the page named home.html or home.php or any other, including the values to exclude in the field that is displayed when you choose this option. In the example you would get /tutorials/differences-between-page-path-and-page-url-in-google-tag-manager/
- Query. Returns, if including the value "?" the full string of the query parameter. In the case of defining the query key, in my example it is fbclid, it will return the value 3h5h67696923df. In case this query key is not found, the value returned will be "undefined".
- Fragment. Returns the value of the URL fragment without the leading #. In the example it would be page.
Don't go yet
To summarise, page path will return only the url fragment after the hostname, but before the query components, URL fragment, port and file extension, such as /tutorials/differences-between-page-path-and-page-url-in-google-tag-manager/.
If you need to extract any or all of the components of the URL, you will need to create a custom variable with page URL. e.g. page URL will return https://carlosmdh.en/tutorials/differences-between-page-path-and-page-url-in-google-tag-manager/?fbclid:3h5h676923df
Perhaps the best way to understand this is with the following image.
I invite you to leave your impressions and/or doubts in the contact form and to suggest new topics that you would like me to cover in these tutorials. I will be happy to answer you by email and write in this blog.
