Tag – Capture UTM parameters and save them into separate cookies

🤷 What does it do?

This custom HTML tag captures UTM parameters from the current URL and stores each one as a separate cookie. This allows the UTM parameter values to persist beyond the user’s current visit, providing a way to attribute user behavior to specific marketing efforts even if the user doesn’t convert immediately.

🧑‍💻 Usecase

Storing UTM parameters as cookies is useful when you want to track the effectiveness of various marketing campaigns over an extended period. For example, if a user clicks a link in an email campaign, this tag will store the associated UTM parameters as cookies. If that user then comes back later and makes a purchase, you can read the UTM cookies to attribute that conversion to the original email campaign.

📝 Instructions

To create this custom HTML tag in GTM, you can use the following code. Note that this uses the JavaScript document.cookie property to create cookies:

<script>
(function() {
  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_')) {
      document.cookie = param[0] + '=' + decodeURIComponent(param[1]) + '; path=/';
    }
  }
})();
</script>

This script first gets the query string of the current URL, 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 creates a cookie with the same name and the decoded value of the parameter.

Remember to configure the trigger for this tag to fire on all pages or on the specific pages where you want to capture UTM parameters.

The cookies created in the given code snippet will expire when the browsing session ends. This is because a lifespan isn’t explicitly set, which makes them “session cookies”. Session cookies are deleted when the user closes their browser.

If you want the cookies to persist for a certain period (for example, 30 days), you can set an expiration date by adding ; max-age=<seconds> or ; expires=<date> to the cookie string.

Here’s how you can modify the script to make the cookies last for 30 days:

<script>
(function() {
  var queryParams = location.search.substring(1).split('&');
  var maxAge = 30 * 24 * 60 * 60;  // 30 days in seconds

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

    if (param[0].startsWith('utm_')) {
      document.cookie = param[0] + '=' + decodeURIComponent(param[1]) + '; max-age=' + maxAge + '; path=/';
    }
  }
})();
</script>

If we take this example URL:

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

The cookies set by the provided script, given the example URL, would look something like this in a table. Given that we set the max-age to 30 days, this attribute can be included in our table:

In this table, the “Max-Age” column represents the lifespan of the cookie from the time it is set. This is expressed in both days and seconds (since max-age is technically defined in seconds). Each of these cookies will expire 30 days after being set, unless the user deletes them or the browser discards them for some reason.

Remember, different browsers may have different behaviors for cookies, and users can manually delete cookies or block them entirely. In addition, regulations like GDPR and CCPA have requirements for consent and usage of cookies, so make sure you’re in compliance when using cookies on your site.

👨‍💻 Accessing and Using the UTM Cookies in Hidden Form Fields

Once these UTM cookies have been set, you can retrieve their values and use them in your application. One common use case would be to include these values in hidden form fields. This way, when the user submits a form (for example, to sign up for a newsletter or make a purchase), the form data can include the UTM parameter values. This can help in attributing conversions to specific marketing channels or campaigns.

<script>
(function() {
  var utmParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_content', 'utm_term'];
  
  utmParams.forEach(function(param) {
    var value = getCookie(param);
    if (value) {
      document.getElementById(param).value = value;
    }
  });

  function getCookie(name) {
    var cookieArr = document.cookie.split(";");
    
    for(var i = 0; i < cookieArr.length; i++) {
      var cookiePair = cookieArr[i].split("=");
      
      if(name == cookiePair[0].trim()) {
        return decodeURIComponent(cookiePair[1]);
      }
    }
    return null;
  }
})();
</script>

In this script, we first declare an array utmParams with the names of the UTM parameters we’re interested in. Then we use a loop to iterate over these parameters. For each parameter, we call the getCookie function, passing in the parameter name. The getCookie function retrieves the cookie with the given name and returns its value.

If a value is found, the script then sets the value of the corresponding hidden form field to the cookie value using document.getElementById(param).value = value;.

The hidden fields in the form could simply look something like this:

<form id="myForm">
  <input type="hidden" id="utm_source" name="utm_source">
  <input type="hidden" id="utm_medium" name="utm_medium">
  <input type="hidden" id="utm_campaign" name="utm_campaign">
  <input type="hidden" id="utm_content" name="utm_content">
  <input type="hidden" id="utm_term" name="utm_term">
  <!-- Other form fields here -->
  <input type="submit" value="Submit">
</form>

Now, when the user submits the form, the form data will include the values of the UTM parameters, which can then be used in your backend system or database to attribute the form submission to specific marketing channels or campaigns.

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.