UTM collection and automatic form filling

Last Updated: 21.01.2020

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 Landingi platform and go to the edition of the chosen landing page. Enter the form’s settings and add hidden fields to it that match your custom UTM parameters – one for each parameter. In Field settings, after clicking on Additional options, enter a custom parameter in the Name attribute field.

Example:

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

UTM_EN2

2. Enter the Dashboard of your landing page, go to the JavaScript codes tab and click on Add script. Place the script below on the Body bottom position on the main page of your landing page and 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>

The target lead will look like this:

UTM_EN3

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_EN1

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 go to the Landing pages tab. Enter the Dashboard of the landing page from which you want to send the parameters, and then go to the JavaScript codes tab and click on Add script.

2. Place the code below on the head position on the conversion page and 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 on Add script.

2. Paste the code below (for non-standard UTM parameters) on the Body bottom position of the main page of your landing page and 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.

Was this article helpful?

You might also check:

custom Javascript form's option UTM

Can’t find what you need?

Let us help you!
Send us a message
We are using cookies for analytical purpose. Learn more.