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.

Skip Appending UTMs on Some Links

The no-utm class is used to exclude specific links or elements from having UTM parameters appended to them by the handl-utm-grabber plugin. This can be useful in scenarios where you do not want tracking parameters to be added to certain URLs, such as internal links, mailto links, or other special cases.

Usage

To prevent UTM parameters from being appended to a link or element, simply add the no-utm class to the HTML element.

Example

<a href="https://example.com" class="no-utm">Example Link</a>

In this example, the link to https://example.com will not have any UTM parameters appended to it by the handl-utm-grabber plugin.

Detailed Explanation

The handl-utm-grabber plugin scans the page for links and elements to append UTM parameters for tracking purposes. By adding the no-utm class, you instruct the plugin to skip these elements during its processing.

Common Use Cases

  1. Internal Links: Prevent UTM parameters from being added to internal navigation links.
    <a href="/about-us" class="no-utm">About Us</a>
  2. Mailto Links: Avoid appending UTM parameters to email links.
    <a href="mailto:info@example.com" class="no-utm">Contact Us</a>
  3. Telephone Links: Exclude UTM parameters from phone number links.
    <a href="tel:+1234567890" class="no-utm">Call Us</a>
  4. Special Cases: Any other links or elements where tracking is not desired.
    <a href="https://example.com/special-case" class="no-utm">Special Case</a>

By using the no-utm class, you can have finer control over which links and elements are tracked with UTM parameters, ensuring that only the desired URLs are included in your tracking strategy.