How to Append UTM?

Appending UTM Globally

1.Click UTM, check the "Append UTM" box in the HandL Options tab and save changes

NOTE: This may not work for some of the themes that are not using native wp_content filter. Or may not work for some of the Content builder plugin. If this method does not work, you can always append UTMs individually to your loinks an buttons using class variables utm-out. Please see Appending UTMs to the buttons using class name attributes for more.

Appending UTMs to the buttons using class name attributes (Selectively)

If you have a button or link that you would like to append all the collected UTMs to. Use the class variable utm-out as it is shown below.

This technique is extremely useful if you are sending out traffic (ouf of your domain). Or you want to specifically append UTMs to some links.

<a href="https://www.someoutgoinglink.com/" class="utm-out">

HandL UTM Grabber automatically scan all the links and buttons having utm-out class and append all the UTMs automatically so your final URL will be like this.

<a href="https://www.someoutgoinglink.com/?utm_source=google&utm_medium=cpc&utm_campaign=spring_sale&utm_term=term&utm_content=content" class="utm-out">

utm-out also works if it is at the parent level. For example

<div class="parent-div utm-out">
	<a href="https://www.someoutgoinglink.com/">
</div>

This will also populate all the UTMs like this

<div class="parent-div utm-out">
	<a href="https://www.someoutgoinglink.com/?utm_source=google&utm_medium=cpc&utm_campaign=spring_sale&utm_term=term&utm_content=content">
</div>

Appending UTMs to the Iframe src

You can append all the UTMs to your target website URL within iframe. This is actually very helpful, if you are using iframe for your optin forms and you would like to pass the UTM values captured to prefill your form.

It works very simple.

Your iframe code normally look like this

<iframe src="https://yourwebsite.com/optin-form" frameborder="0" width="1000" height="700" scrolling="no"></iframe>

simply add the utm-src class to your iframe like this

<iframe src="https://yourwebsite.com/optin-form" class="utm-src" frameborder="0" width="1000" height="700" scrolling="no"></iframe>

And you are good to passing all the UTMs to your iframe URL :)

Appending UTMs using Shortcode

If none of the other propsed solutions here How to Append UTM? worked, you can always pull the UTM parameters using the shortcode.

For example

<a href="https://www.domain.com?utm_campaign=[utm_campaign]"></a>

<div class="some-cool-div" data-url="https://www.domain.com?utm_campaign=[utm_campaign]"></div>

Append UTMs upon DOM change

Here is an example of snippet you can use to append UTMs upon a DOM change. This requires advance coding skills.

setTimeout(function(){ 

var target = document.querySelector('#storepoint-results')
var observer = new MutationObserver(function(mutations) {
	console.log(jQuery(target).find('.storepoint-onlinestore').length)
  if ( jQuery(target).find('.storepoint-onlinestore').length > 0 ){
  	var a = jQuery(target).find('.storepoint-onlinestore')
  	var target_url = a.attr('href')
  	var merged = jQuery.extend( {}, handl_utm, getSearchParams(target_url) )
  	var src = target_url.split("?")[0];
  	if ( !jQuery.isEmptyObject(merged) ){
    	var final_target = src + "?" + jQuery.param(merged)
    }
    a.attr('href', final_target)
  }
});
var config = { attributes: true, childList: true, characterData: true };
observer.observe(target, config);

 }, 500);

Selecting specific parameters for append utm

In some rare instances, you might want to specify certain parameters to append and exclude the rest. Make your selections below, and only the chosen parameters will be appended to the links. This also applies to the utm-out, utm-out-js and utm-src feature. If no selection is made below, all parameters will be appended by default.

Simply click Append UTM tab:

Select the fields you'd like to append.

Save the form.

Only the selected paramters will be appended to your links.