101. Let's Start

UTM Simple/ Tracker; Register to UTMSimple Where is the Tracking Code? What can I Track with UTMSimple? How can I track UTMs in my optin form? Can I track custom parameter such as affid? How can I upgrade my plan? Is there an onReady method?

How can I register to UTMSimple?

Where is the tracking code?

Your tracking code is under My Account.

image-1632933249778.png

After you type your domain, you will see the code below

image-1632933197186.png

What can I track with UTMSimple?

You can track many things in UTMSimple. Here we give the list of most common parameters our clients track.

UTM Parameters (Last Touch)

utm_campaign – utm_campaign variable.
utm_source – utm_source variable.
utm_term – utm_term variable.
utm_medium – utm_medium variable.
utm_content – utm_content variable.
gclid – gclid variable.
fbclid – fbclid variable.
msclkid – fbclid variable.
wbraid - web-to-app measurements
gbraid - app-to-app measurements
_fbc – fbclick ID from Facebook (important for serverside conversion)
_fbp – fbp ID from Facebook (important for serverside conversion)
_ga – GA client id from Google

UTM Parameters (First Touch)

first_utm_campaign – first touch utm_campaign variable.
first_utm_source – first touch utm_source variable.
first_utm_term – first touch utm_term variable.
first_utm_medium – first touch utm_medium variable.
first_utm_content – first touch utm_content variable.

Other UTMSimple Supported Parameters

handl_original_ref - original referral - first touch!
handl_landing_page - landing page - first touch!
handl_ip - ip of the user
handl_ref - last touch referral
handl_ref_domain - last touch referral (domain only)
handl_url - last touch url
handl_url_base - last touch url (domain only)

organic_source_str - organic source (Google, Bing, Instagram etc)
gaclientid - Google Analytics clientid
user_agent - user (browser) agent
traffic_source - Paid, Organic, Direct, Referral, Social

handlID - Unique ID generated by HandL UTM Grabber

Also using handl_custom_params variable you can collect many more parameters included below.

ad_id - Facebook Ad Id
adset_id - Facebook Ads Id
ad_name - Facebook Ads Name
adset_name - Facebook Adset Name
placement - Facebook Placement
//you can add many more using custom paramaters.

campaignid - Google Ads ValueTrack Campaign Id
adgroupid - Google Ads ValueTrack Ads Group Id
keyword - Google Ads ValueTrack Keyword
placement - Google Ads ValueTrack Placement
//you can add many more using custom paramaters.

Which UTMSimple Plan is best for me?

We have three plans, Basic, Plus and Unlimited. The primary difference between them about the traffic your website gets monthly.

If you have a traffic up to 5k monthly, then you should pick Basic plan If you have a traffic up to 25k monthly, then you should pick Plus plan If you have a traffic more than 25k monthly, then you should pick Unlimited plan

No idea, what your monthly traffic is, go to your Google Analytics. Select Audience > Overview. Make sure you select a one full month (e.g. previous month). And the PageViews is the number you need (see below).

How can I track UTMs in my optin form?

Though this is a very broad question, let's try to answer here. UTMSimple is the simplest and greatest tool that allows tracking UTMs and other trackable data...

As soon as UTMSimple is activated, script will detect all the UTM related fields in your optin form and autofill them approproately wihout you doing anyting (hence it is THE simplest :) )

For example; if your form field names contain utm_campaign in either id, name or class. It will be filled with value of utm_campaign parameter automatically.

Example HTML Code:

<h1>Class</h1>
<input class="utm_campaign" />
<input class="utm_source" />
<input class="utm_term" />
<input class="utm_content" />
<input class="utm_medium" />
<input class="handl_custom1" />
<input class="gaclientid" />
<input class="handl_ip" />

<h1>Id</h1>
<input id="utm_campaign" />
<input id="utm_source" />
<input id="utm_term" />
<input id="utm_content" />
<input id="utm_medium" />

<h1>Name</h1>
<input name="utm_campaign" />
<input name="utm_source" />
<input name="utm_term" />
<input name="utm_content" />
<input name="utm_medium" />

Once HTML is rendered with UTM Simple

Can I track custom parameter such as affid?

You can track any custom parameters you like such as affid,user_id, id with UTMSimple.

Setting this up is very easy...

Your JavaScript tracker code will look like this..

<!-- Global site UTM Simple Tracking Start-->
<script>
handl_custom_params=[];var handl_js=document.createElement("script");handl_js.setAttribute("src","https://track.utmsimple.com/utm.js?license=<yourkey>"),document.head.appendChild(handl_js),handl_js.onload=function(){/*This is the UTM Simple ready event, you can put any code you'd like to trigger after the script fully loaded here*/};
</script>
<!-- Global site UTM Simple Tracking End-->

As you can notice, there is a parameter called handl_custom_params=[];

This is an array that means it can take multiple values.

Simply add all the custom parameters you'd like to track in there...

handl_custom_params=['affid','user_id','id'];

That's it!

How can I upgrade my plan?

Login to your account at utmsimple.com

Select My Account > Plan > Billing and click the plan name you want to upgrade to. It is that simple :) 

Is there an onReady method?

UTMSimple has a handl_js.onload method that you can use to make sure UTMSimple is loaded. This trigger makes sure that all the cookies are captured and ready to be consumed.

<!-- Global site UTM Simple Tracking Start-->
<script>
var handl_custom_params = [];
var handl_js = document.createElement("script");
handl_js.setAttribute("src", "https://track.utmsimple.com/utm.js?license=<license code goes here>"), document.head.appendChild(handl_js), 
handl_js.onload = function() {
    /*This is the UTM Simple ready event, you can put any code you'd like to trigger after the script fully loaded here*/ 
    console.log("I\'m ready")
    console.log("prnting all the cookies")
    console.log(HandL.getAll())
}; 
</script> 
<!--Global site UTM Simple Tracking End -->

How do I know If I'm tracking?

After you embed the code into your site. Go to your favorite browser, and open the "Inspect Editor".

And then, go to Network and click "JS". Refresh the page again and all the resources will be loaded in the pane.

Find utm.js and check the status column. If it says 2xx or 3xx, then you are good to go :)

if you are seeing 4xx or 5xx, please contact with as via chat so we can troubleshoot your account.

How to pass/append UTMs to the URL?

To append UTMs to your links, simply add utm-out class to the links, and UTM Simple will append all the UTM parameters to your link.

For example:

<h2>Link</h2>
<p><a class="utm-out" href="https://www.google.com/?utm_source=googlelink">Google Link</a></p>

How to pass/append UTMs to the iframe?

To append UTMs to your links, simply add utm-src class to the iframe, and UTM Simple will append all the UTM parameters to your iframe URL.

For example:

<h2>iframe</h2>
<p><iframe class="utm-src" src="https://www.domain.com/?utm_source=googleiframe"></iframe></p>

What If I can't change the field name

We normally reocmmend you to match our naming convention when you include your hidden fields in your form. How can I track UTMs in my optin form?

But we know sometimes this is not feasible. You can't just change the name, id or class of the fields. So, if you want to use different naming convention. You can use the following code:

<script>
handl_custom_params=[];
var handl_js=document.createElement("script");
handl_js.setAttribute("src","https://track.utmsimple.com/utm.js?license=<licensekey>"),
document.head.appendChild(handl_js),
handl_js.onload=function(){
	setTimeout(function(){
		all_params = HandL.getAll()
		mapping = {
			utm_source: ["Question133","Question134"],
			utm_medium: ["Question135","Question136"],
		}
        Object.keys(all_params).map(function(x,y){
        	field_names = mapping[x]
        	if (!Array.isArray(field_names)){
        		field_names = [field_names]
        	}
        	
        	field_names.forEach(function(field_name,y2){
				if (jQuery('#'+field_name).length > 0){
					jQuery('#'+field_name).val(all_params[x]).attr('value',all_params[x]).parent().parent().hide()	
				}	
        	})
        	
        })
	}, 500);
};
</script>

See the mapping field, this is where you map your new field name. In the example above, the id Question133 and Question134 will be filled by utm_source and Question135 and Question136 will be autofilled by utm_medium.

If you have a different requirement or need help, please have a chat with us.

How to change the cookie time?

If you want to change/overwrite this, please folow the the steps below:

Before you initialize your UTMSimple snippet, define handl_cookie_duration global variable to define your own cookie time.

<script>
    handl_js_license = "<your license key>"
    handl_custom_params = []
    handl_cookie_duration = 365
    var handl_js = document.createElement('script');
    handl_js.setAttribute('src','https://js.utmgrabber.com/utm.js?license='+handl_js_license);
    document.head.appendChild(handl_js);
</script>

In this example, cookies will expire after 365 days later.

What are the some other events?

1. Event: UTMSimpleLoaded

The UTMSimpleLoaded event is fired as soon as the UTM Simple script loads. You can utilize it as follows:

document.querySelector("body").addEventListener("UTMSimpleLoaded", (event) => {
    // Trigger your script here...
});
2. Event: UTMSimpleFBInitCompleted

The UTMSimpleFBInitCompleted event is fired as soon as the Facebook script is initialized:

document.querySelector("body").addEventListener("UTMSimpleFBInitCompleted", (event) => {
    // Trigger your script here...
});
3. Event: UTMSimpleFBEventCompleted

The UTMSimpleFBEventCompleted event is fired as soon as any Facebook event (e.g., Purchase, Lead) is triggered:

document.querySelector("body").addEventListener("UTMSimpleFBEventCompleted", (event) => {
    // Trigger your script here...
});
4. Event: UTMSimpleFB${EventName}Completed

The UTMSimpleFB${EventName}Completed event is fired as soon as a specific Facebook event is triggered. For example, to trigger a script right after a purchase event, use the following:

document.querySelector("body").addEventListener("UTMSimpleFBPurchaseCompleted", (event) => {
    // Trigger your script here...
});

Various Known Issues

Various Known Issues

Craft CMS creates dialog when page refreshed or navigated

After implementing our plugin, you might be seing this type of messages popping up "Changes you made may not be saved". This is a known problem with the forms used in Craft CMS.

To fix the problem:

Simply add the following code after page load.

Formie.forms.forEach(function(f) {
	f.removeEventListener('beforeunload')
})

Track Facebook within UTMSimple and trigger Events

You can track Facebook easily and accurately within UTMSimple without using Facebook's own pixel tracking. Details are available here: Facebook Conversion Tracking.

Usage is straightforward. You only need to know your pixel ID and add it to your tracking code as follows: create a variable named fb_pixel_id and assign your pixel ID to it. The code will look like this:

<!-- Global site UTM Simple Tracking Start -->
<script>
    fb_pixel_id = "<YOUR FB PIXEL ID>";
    handl_custom_params = [];
    var handl_js = document.createElement("script");
    handl_js.setAttribute("src", "https://track.utmsimple.com/utm.js?license=<LICENSE KEY>");
    document.head.appendChild(handl_js);
    handl_js.onload = function() {
        /* This is the UTM Simple ready event. You can put any code you'd like to trigger after the script fully loads here. */
    };
</script>
<!-- Global site UTM Simple Tracking End -->

After that, our script will initialize the Facebook pixel and collect all the data for Facebook.

If you want to trigger certain events for Facebook (such as Lead, Add To Cart, Purchase, etc.), you can use the following code:

HandL.sendFBEvent('InitiateCheckout');
HandL.sendFBEvent('Lead', {value: 1, currency: 'USD'});
HandL.sendFBEvent('Purchase', {value: '##total_amount##', currency: 'USD'}, {eventID: '<event_id>'});

By following these steps, you'll effectively track Facebook events using UTMSimple.

I need an invoice

You can download your invoices from utmsimple.com.

Simply log in to your account at utmsimple.com.

Navigate to My Account > Billings and click the download icon to retrieve the invoices.

If you need your VAT number on the invoice, please update your information at My Account > My Account, then proceed with downloading the invoice again.

How to Update Your Billing Information

To ensure uninterrupted service, please follow these steps to update your billing information on our site.

Step-by-Step Guide

1. Log In to Your Account

2. Navigate to the My Account Section

3. Access Your Subscription

4. Select Your Subscription

5. Update Billing Information

6. Enter New Card Information

7. Save Your Changes

8. Confirmation

For any issues or further assistance, please contact our customer support team.