Google Analytics: Dynamically Appending UTM Query Strings To Outgoing Links

Adding UTM query string parameters to outgoing URLs can provide valuable insights when tracking marketing campaigns and referral traffic sources. However, relying on content authors to manually add these parameters is error-prone and often incomplete. A better approach is to dynamically append UTM parameters to external links using JavaScript after loading the page.

jQuery: Append UTM Campaign Querystrings

Here’s a JavaScript function that appends UTM parameters to all outgoing links on a page using jQuery:

<script>
window.addEventListener('load', function() {
  var domain = window.location.hostname; // Get current domain
  var pageTitle = document.title; // Get current page title

  // Find all external links
  $('a').filter(function() {
    return this.hostname && this.hostname !== window.location.hostname;
  }).each(function() {
    var href = $(this).attr('href');
    
    // Append UTM parameters to existing query string or create a new one
    var utmParams="?utm_campaign=referral&utm_source=" + domain + '&utm_content=" + encodeURIComponent(pageTitle);
    var separator = href.indexOf("?') !== -1 ? '&' : '?';
    $(this).attr('href', href + separator + utmParams.slice(1));
  });
});
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

This code attaches an event listener to the load event, which fires after the page and its resources have finished loading. The function then finds all <a> tags pointing to external domains using the hostname property. For each external link, it appends a UTM query string containing the referral campaign, the current domain as the source, and the current page title as the content.

To use this, you’ll need to include jQuery on your page by adding the <script> tag for jQuery after the custom script.

JavaScript: Append UTM Campaign Querystrings

While the above example uses jQuery for convenience, you can achieve the same functionality using vanilla JavaScript:

<script>
window.addEventListener('load', function() {
  var domain = window.location.hostname;
  var pageTitle = document.title;

  var links = document.getElementsByTagName('a');
  for (var i = 0; i < links.length; i++) {
    var link = links[i];
    if (link.hostname && link.hostname !== window.location.hostname) {
      var href = link.href;
      var utmParams="?utm_campaign=referral&utm_source=" + domain + '&utm_content=" + encodeURIComponent(pageTitle);
      var separator = href.indexOf("?') !== -1 ? '&' : '?';
      link.href = href + separator + utmParams.slice(1);
    }
  }
});
</script>

This code attaches an event listener to the load event, which fires when the page has finished loading. It then iterates over all <a> tags, checking if each link points to an external domain, and appends the UTM query string if so.

Using plain JavaScript can avoid potential versioning issues or conflicts with third-party libraries like jQuery.

Customizing UTM Parameters

The examples above include a fixed utm_campaign value of referral, but you can easily modify the UTM parameter values to suit your needs. For instance, you could include additional parameters like utm_medium, utm_term, or custom campaign names based on page content or user behavior.

With this dynamic approach, you can ensure consistent and accurate UTM tracking for outgoing links across your website, without relying on manual input from content authors or impacting page load times.

In this article, we’ve also shared how to append UTM Querystrings to WordPress redirects:

Append UTM Querystrings To WordPress Redirects