Manage query parameters in GTM (like UTM) with these simple functions

In this post I’ll show you a simple JS function which allow you to manage your UTM parameters using Google Tag Manager. With the help of this solution, you can easily get values of UTM parameters (say, utm_campaign or utm_content), attach these values to any link on the page, change them to whatever you like etc. The functions work no matter the order your parameters appear in page url. So, if your page url looks something like this…

Or even like this

… you still get a properly order UTM set.

As web-analysts usually deal with UTM parameters, in this post I will use these ones for demonstration purposes.

get values of UTM parameters 1

Pic source:

What are query (or get) parameters?

Before we begin, please be sure to read this and this if you don’t have a clear understating of what query (get) parameters are. In order to refresh your knowledges about proper UTM usage with Google Analytics, check this guide.

Function 1: Get values of UTM parameters and attach it to any link(s) on the page

As the title above states, this function collects the value of each UTM parameter, builds a string of them and finally attaches it to any link or links you like.

Let not the number of code lines above bother you! Seriously, that is just the price you have to pay using vanilla Javascript. I will try to explain each block of the function in details.

1 – Array of query params

This is a pre-set list of query parameters you want to work with. You can freely add or remove any parameters you like.

2 – Target Links

Here you actually define a list of links where you want to have query parameters from the current URL attached. Don’t forget to change the value of the selector variable.

3 – getParameterByName

As the name states, this function is used in order to collect a value of a query parameter by its name. This one comes in handy when you want to get values of UTM parameters.

4 – getUTMparam

This function gathers all UTM parameters and their values in a single object declared at the very beginning. So, once it’s called with needed arguments, you get this as a result

5 – getObjLength

Simply retrieves the number of properties (or items) in an object or in an array.

6 – updateUrlParam

This is a milestone of the whole solution. With the help of this function you actually update query (get) parameters in a given uri. It uses three arguments – uri, key (get parameter name) and value. Using a simple loop we can call this function for an object containing any number of key-value pairs.

7 – the very action

Here’s where the action finally takes place! If  there’s at least one key-value pair in the currentUTMs object (meaning there’s at least one UTM parameter in the page URL) and the targetURLs array has links, then attach currentUTMs to targetURLS.


Just create a custom HTML tag and paste the above code in it (don’t forget opening and closing script tags). Then make this tag fire once the target page (or pages) where you want to attach UTM parameters to other links is fully loaded.


If you’ve implemented everything correctly, this is what you should get as a result.

get values of UTM parameters 2

Use case

As you’ve probably noticed, the whole function is simply a collection of other handy functions. You can combine them however you like in order to achieve you analytics goals. Say, if UTM parameters like campaign and/or source are of certain value, do A action. If campaign is A and the source is B, then perform C action and so on.

In my case I attach these parameters to the link of a partners who wants to know the efficiency of the marketing efforts (no, we can’t set a cross-domain tracking due to some tech/security reasons).

Instead of summary

I have another solution for replacing PII from the query parameters using Google Tag Manager. It may come in handy in case you don’t want your GA account to be banned by Google for violation of use terms. If you need it, please let me know in the comment section below.

Tag Manager , , ,