Collecting UTMs and automatic form filling

Last updated: June 7, 2021 Written by: Avatar Teresa
share
Table of contents
share
Table of contents

What is UTM?

UTM parameters added to the URL address allow you to track the effectiveness of online campaigns and whence the user came to your landing page, for example via Google Analytics.

You can use UTM parameters in the link to your landing page – if you don’t know how to do it, check our UTM Builder.

How to collect standard UTM parameters?

All standard UTM parameters from your landing page’s URL address are automatically collected and added to your lead.

Example:

If the visitor enters your landing page with an exemplary URL: http://www.mylandingpage.com/hello/?utm_source=facebook.com&utm_medium=social&utm_campaign=winter_sale,

after submitting the form, the final lead will look like this:

email: (visitor’s mail)
utm_source: facebook.com
utm_medium: social
utm_campaign: winter_sale

How to collect non-standard UTM parameters?

If you use custom parameters that you want to pass to the lead, you will need hidden fields in the form and additional JavaScript code.

1. Log in to your Landingi account and go to the editor of your landing page.

2. Navigate to the Form Settings. In the Form fields tab, click Add element and add Hidden fields to it that match your custom UTM parameters – one for each parameter.

add form fields landingi

3. In Field settings, click Additional options and enter a custom parameter in the Name attribute field.

hidden form fields landingi

Example:

If your landing page URL with custom parameters is: https://www.landpage.co/utm/?ref=website&name=Gilbert, in the Name attribute field, add ‘ref’ and ‘name’ respectively.

4. Enter the Dashboard of your landing page, go to the JavaScript Codes tab and click on Add script. You can enter the JavaScript Codes tab directly from the editor.

dashboard javascript landingi

5. Paste the script indicated below in the Body bottom position on the Main page. Click Add to save the changes. More about adding your own scripts you will find in the manual Your own JavaScript.

<script>
  var urlParam = getUrlVars();
  for (var prop in urlParam) {
    if (urlParam.hasOwnProperty(prop)) {
      var input = document.querySelector('[name="' + prop + '"]');
      if (input) {
        if (input.type === 'checkbox' && urlParam[prop] === '1') {
          input.checked = true;
        } else {
          input.value = urlParam[prop];
        }
      }
    }
  } 
</script>

utm script landingi

The target lead will look like this:

landingi landing page utm

A hidden field with the ‘name’ attribute captures the name parameter, while a hidden field with the ‘ref’ attribute captures the ref parameter.

How to pass UTM parameters from one landing page to another and fill the form automatically?

You can send UTM parameters from one form on a landing page to another so that the data entered by the user on the first landing page will be auto-filled on the next one.

An example application below:

utm landingi

NOTE: Scripts will not work if you use the funnel function (action after form submission).

Step I – on the first landing page

1. Log in to the platform and navigate to the Dashboard of the landing page from which you want to send the parameters, and then go to the JavaScript Codes tab and click Add script.

2. Paste the code indicated below in the Body bottom position on the Conversion page and click Add to save the changes. More about adding your own scripts you will find in the manual Your own JavaScript.

<script>
	var out = [];
for (var key in conversion) {
	if (conversion.hasOwnProperty(key)) {
		out.push(key + '=' + conversion[key]);
	}
}
location.href = 'https://www.example.com' + '?' + out.join('&'); </script>

Replace example.com with the URL address of your next, target landing page, where your visitor should be redirected after submitting the form.

Step II – on the target landing page

1. Enter the Dashboard of the landing page where you want to send the UTM parameters, then go to the JavaScript Codes tab and click Add script.

2. Paste the code indicated below (for non-standard UTM parameters) in the Body bottom position on the Main page of your landing page and click Add to save the changes.

<script>
	var urlParam = getUrlVars();
for (var prop in urlParam) {
	if (urlParam.hasOwnProperty(prop)) {
		var input = document.querySelector('[name="' + prop + '"]');
		if (input) {
			if (input.type === 'checkbox' && urlParam[prop] === '1') {
				input.checked = true;
			} else {
				input.value = urlParam[prop];
			}
		}
	}
} </script>

From now on, the data entered in the form on the first landing page will be forwarded to the URL address of the next landing page and will be auto-filled in the form.

share

Was this manual helpful?