Extract a Part of URL and Turn It Into Variable in Google Tag Manager

Have you ever been in a situation when you need to extract a part of URL and turn it into a variable in Google Tag Manager? I have. The most common demand is to transfer a so-called query string parameters to GTM.

For example, I have a web address https://www.example.com/?product_id=123&category=shoes. Believe it or not, but there’s a really easy way to turn product_id and category data into variables. I’ll show you how.

The magic lies within user-defined variable called URL.

What does this URL variable do?

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 web page that 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 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 path name in the URL (in other words – everything after host name, 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 query key to gclid, thus URL variable’s value would be aabbcc123. If you do specify a query key, but that key is absent, 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.

How To Extract Part Of URL and Turn It Into A Variable?

Here’s a quick example I came up with.

If you’re using email marketing tool (like Soundest), you’ve probably already noticed that after a recipient clicks a link in your email, he/she is redirected to your website. The link contains a lot of parameters after a question mark, e.g. https://www.mybusiness.com/?utm_campaign=awesomecampaign&utm_source=campaignid&utm_medium=email.

These 3 query keys are called UTM parameters. They are especially useful when it comes to tracking campaigns in Google Analytics.

You can easily turn utm_campaign, utm_source and utm_medium into GTM variables and then utilize them in triggers or tags. Just create three variables with the following settings:

After you have created these three variables, enable Preview and Debug mode in GTM and head to the website where you’re working on. At the end of URL add ?utm_medium=test1&utm_source=test2&utm_campaign=test3. If the URL you’re working on already has some query (it starts with a question mark), then just add &utm_medium=test1&utm_source=test2&utm_campaign=test3 to the end of the link and hit enter.

The page will refresh, GTM Preview and Debug console will load. Click on any event (e.g. Page view) and open Variables tab. The result should look like this:

That’s it!

If you have questions related to this tutorial, feel free to ask in the comments. Who knows, maybe one day this quick tip will become a comprehensive guide thanks to your questions.

Conclusion

In this blog post I have described a pretty easy way how to extract a section of URL and turn it into a variable that can be reused in other tags and variables. Do not hesitate and start utilizing URL variable in your web analytics today.