Add UTM Parameters To External URLs With Google Tag Manager?

Question

Is it possible to append UTM parameters to outbound clicks on links using Google Tag Manager?

I've found many tutorials explaining how to track outbound clicks as events, but I need to append UTM parameters on URLs of a specific domain.

Any suggestions?

Solution 1

Assuming that you want all outbound links to have the UTM parameters; I would suggest creating a Custom HTML Tag with the following JavaScript.

<script type="text/javascript">
    // Set the domain/URL to your website.
    var myDomain = "www.example.com";
    // Grab all links (anchor tags)
    var links = document.getElementsByTagName('a');
    // Loop through all links
    Array.prototype.forEach.call(links, function (link) {
        // If we find a link that does not go to my domain
        if ( link.href.indexOf(myDomain) < 0 ) {
           // Take the href and append the UTM parameters
           link.href += '?utm_source=CampaignSource&utm_medium=CampaignMedium&utm_term=CampaignTerm&utm_content=CampaignContent&utm_campaign=CampaignName';
        }
    });
</script>

It will loop through all links and append UTM parameters if the link goes to a destination outside of your domain. It is primitive and is only checking to see if your domain is in the URL so http://www.another-example.com/www.example.com would not have the UTM parameters added to it.

Here is an example in a codepen.

If you have any questions please let me know.

Solution 2

Following on from Adam Huffman's helpful answer above I tweaked this to append clientId using Tag Manager to force cross domain tracking to a 3rd party (Eventbrite)

</script>
  // working for outbound eventbrite links on 11/05/2016
<script type="text/javascript">
  // Set the domain/URL to your website.
  // var myDomain = "www.example.com";
  // Or set domain to detect to Eventbrite
  var myDomain = "www.eventbrite.co.uk";
  // Grab all links (anchor tags)
  var links = document.getElementsByTagName('a');
  // Loop through all links
  Array.prototype.forEach.call(links, function (link) {
  // If we find a link that does not go to my domain
  //        if ( link.href.indexOf(myDomain) > 0 ) {
  // Or 
  // if we find 1 or more links that go to Eventbrite specifically
     if ( link.href.indexOf(myDomain) >= 1 ) {
  // Take the href and append the required ?_eboga parameters
  // ?_eboga prepend appears to work if only single parameter 
  // tested using & as some URLs already have page/ticket type parameters being passed
  // then adding clientId recorded as a variable in Tag Manager
      link.href += '&_eboga=' +{{clientId}};
       }
   });
</script>

Sorry about the messy formatting, first time posting here and not a coder. but having searched for this a lot I know a lot of people struggle with Eventbrite cross domain tracking and I thought this might help to show an example of this with an alternative use.

Now Eventbrite are rolling out universal analytics cross domain tracking is possible if you adapt the method shown here for UTM campaign parameters and flip it on its head to append their custom value + clientId when outbound link = eventbrite

Solution 3

Appreciate this is a very old answer, but in the nice solution provided by Pierre, it would have been good to use the link.search argument so to make sure to append the parameter into the querystring part and not at the end of the URL.

Assuming the URL contains a fragment, by appending the parameter as suggested will result in a malformed URL because the querystring will be attached at the end.

WRONG
E.g. www://www.test.it/path?query=1#fragment&_eboga={{clientId}}

There is also a chance the parameter to be ignored because server side functions normally intercept the query part stripping the fragment first.

So a modified working version can be:

  var myDomain = "https://business.eshoppingadvisor.com/";
  var utm_source = "esa";
  var utm_medium = "referral";

// Grab all links (anchor tags)
  var links = document.getElementsByTagName('a');

// Loop through all links
  Array.prototype.forEach.call(links, function (link) {
    if ( link.href.indexOf(myDomain) >= 0 ) {

        link.search += (link.search.length > 0 ? "&" : "") + 'utm_source=' + utm_source + '&utm_medium=' + utm_medium;
     }
  });