• Courses
    • Courses
    • Course bundles
  • Blog
  • Services
  • Resources
    • Youtube channel
    • E-books and Guides
    • GTM Recipes
    • View All Resources
    • GTM Community
    • GA4 community
  • About
    • About
    • Contact
  • Login
  • Courses
    • Courses
    • Course bundles
  • Blog
  • Services
  • Resources
    • Youtube channel
    • E-books and Guides
    • GTM Recipes
    • View All Resources
    • GTM Community
    • GA4 community
  • About
    • About
    • Contact
  • Login

October 17, 2022

What is URL variable in Google Tag Manager?

Updated: October 17th, 2022

Have you ever been in a situation where you need to extract a part of the URL and turn it into a variable in Google Tag Manager? I have. The most common demand is to transfer 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 very easy way to turn product_id and category data into variables. I’ll show you how.

The magic lies within a user-defined variable called URL. In the Google Tag Manager interface, go to Variables > User-defined Variables > New and choose URL.

 

Video tutorial

Do you prefer video content to text? If yes, then take a look at the video below. But keep in mind that the blog post is more in-depth.

P.S. this tutorial was recorded some time ago (when GTM preview mode looked different). But if you get used to that difference, the remaining parts of the video are still valid.

 

What does the 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 picking 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 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 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 the 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.
  • Filename extension – if a URL looks like this https://www.yourwebsite.com/download/filename.pdf, the Filename extension will return the value “pdf”. This might be useful if you want to get the filename extension of a clicked link.
  • 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 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.

URL variable in action

Here’s a quick example I came up with.

If you’re using an email marketing tool, 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. Container Loaded) and open the Variables tab. The result should look like this:

That’s it!

If you want to take a look at some use cases where this variable is useful, take a look at these guides:

  • Extract part of the URL
  • Transfer UTM parameters from one domain to another

 

Want to extract part of the URL path?

Even though the URL Variable in Google Tag Manager is awesome, it still lacks some features. For example, you cannot extract the part of the URL path.

Let me illustrate: the URL of the page is www.example.com/category/shoes/nike-lorem-ipsum. What if you wanted to use the value of the category (in this case, it’s “shoes”) in your tags?

While this is currently not possible with the URL variable, you can do this with a Custom JavaScript variable.

 

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 the URL variable in your web analytics today.

Julius Fedorovicius
In Google Tag Manager Tips
22 COMMENTS
rohini
  • Aug 2 2017
  • Reply

Hi..
I found your article really interested. I am currently facing an issue with the utm_campaign. If i follow your article then i wont be able to see the campaign data in acquisition-> campaign report. Could you please help me finding solution for my problem. In my url: utm_campaign= [email protected] is coming, so i need to pick only utm_campaign as "test_cq". could you please suggest.

    Julius Fedorovicius
    • Aug 3 2017
    • Reply

    Hey, there are several issues which need to be addressed here:

    1. I'm pretty sure there should be a "&" sign between utm_campaign=test_cq_ AND [email protected]
      As soon as the link's query parameters are equal to [email protected], GA will automatically fetch utm_campaign and no additional configuration will be needed. You should contact developers who generated such link to fix the issue.
    2. The fraction of the link you provided contains an email address. When a visitor lands on your page of which URL contains an email address, that URL is stored in Google's servers. This violates Google Analytics Terms of Use. You cannot store personally identifiable information in Google Analytics severs
Kristi
  • Nov 12 2017
  • Reply

Can this be used to pass the utm parameters string from page to page? Wordpress is currently stripping out the utm parameters after I click away from the landing page.

    Julius Fed
    • Nov 13 2017
    • Reply

    Hey, why would you like to keep UTM parameters on every page? Once the visitor lands on a page, Google Analytics fetches all UTM parameters and sets it for the entire session.

    You do not need to keep those parameters on every page.

      Kristi
      • Nov 13 2017
      • Reply

      Julius,

      I am wanting to send the information to my CRM via my lead form page after they come i. I'm using infusionsoft.

      PPC > Landing Page > Lead Form Page > Infusionsoft.

      Thanks.

        Kristi
        • Nov 13 2017
        • Reply

        Thank you for your answer! I've been able to make it work with the help of itracker360's plugin.

          Julius Fed
          • Nov 13 2017

          I'm glad you found a solution. Actually, you gave me an idea for the next blog post :)

          Vasco
          • Apr 13 2022

          Hello! Whats the blog post that solves this?

      adam rowe
      • Dec 28 2017
      • Reply

      once the UTM parameters are set, how can you access them?

        Julius Fed
        • Dec 29 2017
        • Reply

        Hey, Once the UTM parameters are set in the URL, you should create 3 URL variables in GTM with the following settings:

        Component type: Query
        Query key: utm_medium

        Component type: Query
        Query key: utm_source

        Component type: Query
        Query key: utm_campaign

        Once these variables are created, you can use them in tags, triggers and other variables.

          adam rowe
          • Dec 29 2017

          Right, but this is in reference to what I think Kristi above was trying to do: this is all great for the initial page visit, but what if someone for example doesn't fill out a form until they've been around the site for a minute or two? It would be nice to pass the original utm_variables on with the form, since it's a no-no to keep PII in GA.

          Julius Fed
          • Dec 29 2017

          Then you might find this blog post useful https://www.analyticsmania.com/post/transfer-utm-parameters-google-tag-manager/

          Julius Fed
          • Dec 29 2017

          Or you can save those UTM values in cookies with help of GTM. Here's a guide how to set and read cookies - https://www.analyticsmania.com/post/cookies-with-google-tag-manager/

Chris Lamothe
  • Jan 10 2018
  • Reply

What about getting a piece of a url, for example example.com/cart/add/xxxxxxx/ if I just wanted to get xxxxxxx and turn that into a variable such as productID or similar.

    Julius Fed
    • Jan 10 2018
    • Reply

    Hey Chris, you should use Custom JavaScript variable then and enter this code:

    function () {
    var urlPart = document.location.pathname.split('/')[3];
    return urlPart; }

    It splits Page Path with / . As a result, you get an array containing 5 items:
    - "" (empty string)
    - "cart"
    - "add"
    - "xxxxxx"
    - "" (empty string)

    Then you need to choose the 4th item in the array. In JavaScript, counting starts from 0, that's why I used [3] in the script. Hope this helps.

Yuval
  • Jul 11 2020
  • Reply

Is there a way use Tag Manager to keep URL parameters (namely Google Ads IDs) across a site?
That's in order to capture those parameters in different ways. For example, add these IDs to a form submission.
Thanks!

    Julius Fedorovicius
    • Jul 13 2020
    • Reply

    Store them in cookies https://www.analyticsmania.com/post/cookies-with-google-tag-manager/

Virgnia Kamala
  • Oct 8 2021
  • Reply

Hi Julius,
Just want to say a heartfelt thank you! All your articles help me so much to solve the most difficult problems!! Please continue your amazing work - Could you please do a module on Enhanced ecommerce, I love your standard ecommerce article, but I am really looking forward to your enhanced ecommerce

Virgnia Kamala
  • Oct 8 2021
  • Reply

Hi Julius,
Does this work only with PAGE URL? Because I just implemented the variable.
my click url and form url shows #get-started. But page URL doesnt.

So my variable's output is "".

Could you please help?

    Julius
    • Oct 8 2021
    • Reply

    Hi, select another input in more settings of the url variable

    Julius Fedorovicius
    • Oct 11 2021
    • Reply

    I already have a very in-depth enhanced ecommerce module here https://www.analyticsmania.com/courses/intermediate-google-tag-manager-course/ (if you enroll, you get two versions of the course, one with GA4 and one with UA). That UA version contains the enhanced ecommerce module.

MohammadAli
  • Nov 23 2021
  • Reply

Hi Julius,
How can I define a variable in currnet page or previous page in URL as a query string parameters? CAn you help me? Is such a case possible at all?

Leave a comment Cancel reply

Your email address will not be published. Required fields are marked *

 

Hi, I'm Julius Fedorovicius and I'm here to help you learn Google Tag Manager and Google Analytics. Join thousands of other digital marketers and digital analysts in this exciting journey. Read more
Analytics Mania
  • Google Tag Manager Courses
  • Google Tag Manager Recipes
  • Google Tag Manager Resources
  • Google Tag Manager Community
  • Login to courses
Follow Analytics Mania
  • Subscribe to newsletter
Recent Posts
  • Introduction to Google Tag Manager Server-side Tagging
  • 3 Ways to Pull Data from Data Layer with Google Tag Manager
  • Cannot See the Google Tag Manager Option in Google Ads Conversion?
Analytics Mania - Google Tag Manager and Google Analytics Blog | Privacy Policy
Manage Cookie Settings