Capture UTM parameters

🤷 What does it do?

This custom JavaScript variable extracts UTM parameters from the current URL. UTM parameters are tags that you add to a URL, often used in marketing to track the effectiveness of campaigns and traffic sources. The most common UTM parameters are utm_source, utm_medium, utm_campaign, utm_term, and utm_content.

🧑‍💻 Usecase

This custom JavaScript variable is typically used for tracking purposes, allowing you to understand where your traffic is coming from. For example, if you are running an email campaign and include UTM parameters in the links in your email, you could use this custom JavaScript variable to capture those UTM parameters when users click on those links and land on your website. This can give you insight into how well your email campaign is driving traffic to your website.

📝 Instructions

To implement this custom JavaScript variable in GTM, you can use the following code:

function() {
  var utmParameters = {};
  var queryParams = location.search.substring(1).split('&');

  for (var i = 0; i < queryParams.length; i++) {
    var param = queryParams[i].split('=');

    if (param[0].startsWith('utm_')) {
      utmParameters[param[0]] = decodeURIComponent(param[1]);
    }
  }
  
  return utmParameters;
}

This JavaScript function works by first getting the query string of the current URL using location.search. It removes the initial ‘?’ character, splits the query string into individual parameters, and iterates over these parameters. For each parameter, it checks if the parameter name starts with ‘utm_’ and if so, it decodes the parameter value and adds it to the utmParameters object. The function then returns the utmParameters object, which will include all UTM parameters found in the URL.

Remember to test this variable to ensure it works correctly. It’s also worth noting that UTM parameters should be used in accordance with best practices to ensure meaningful and useful data collection.

For example, if the URL of the page is:

https://www.example.com/?utm_source=google&utm_medium=cpc&utm_campaign=spring_sale&utm_content=ad_version_1&utm_term=running+shoes

The output of the function would be:

{
  "utm_source": "google",
  "utm_medium": "cpc",
  "utm_campaign": "spring_sale",
  "utm_content": "ad_version_1",
  "utm_term": "running shoes"
}

Each property in the object represents a UTM parameter in the URL, with the property name being the UTM parameter name and the property value being the decoded value of the UTM parameter.

If the URL doesn’t have any UTM parameters, the function would return an empty object {}.

Remember that this is a JavaScript object, so you can access individual properties using dot notation. For example, if you have a variable in GTM that uses this function and is named js.utm_parameters, you could use {{js.utm_parameters.utm_source}} in GTM to get the value of utm_source.

Isn’t this the macro you were looking for? Check-out all the macro’s which I’ve shared on my site or request one.