[Guide] Capture UTM's in Webflow and pass them to a form

What is a UTM? 

The UTM code is the key to tracking your digital marketing campaign's performance. This simple little module can be attached seamlessly on any URL, generating Google Analytics data for all online platforms - including Facebook or Twitter ads! If this is done right you can track campaign success all the way to the bottom funnel/ closed wins. UTM's are very important to determine campaign ROI. So if you are not tracking campaign success with UTM's you should be! True ROI, very important.

How do UTM's Work?_‍

UTM's are a link that you would build that you then use in your campaigns. it would look something like this:

Now onto an example:

‍

‍

We are running a custom piece of code in the head of the project in Webflow to grab the UTM's. We want the UTM's to persist past the first page so we will use local storage in the browser to save them for later use. Here is an example of the code I am using to do this.

  

 function getUTM() {    
 let params = {};    
 const searchParams = new URLSearchParams(window.location.search);
 searchParams.forEach((value, key) => {
 params[key] = value;
 });
 console.log("storing UTMs")
 localStorage.setItem('params', JSON.stringify(params));
 }
 //adding this conditional check means the code wont overwrite the values once they are set.
      if (localStorage.getItem("params").length > 3) {
        console.log("do nothing");
      } else {
        console.log("run utms");
        getUTM();
      }

  

Now that this code is running we will see the green arrow above, the UTMs will be stored in the "params" value in your local storage. We can then retrieve them from there and place them into our contact form in hidden fields to use for bottom funnel campaign measurements. We run this on a document.ready because we want to ensure that if we are using something like a Marketo form it is fully loaded before we attempt to insert the utms.

      $(document).ready(function () {
        console.log("fetching utms");
        var param = JSON.parse(localStorage.getItem("params"));
        console.log(param);
        let utm_source__c =
          param["utm_source"] == undefined ? "" : param["utm_source"];
        let utm_medium__c =
          param["utm_medium"] == undefined ? "" : param["utm_medium"];
        let utm_campaign__c =
          param["utm_campaign"] == undefined ? "" : param["utm_campaign"];
        let utm_content__c =
          param["utm_content"] == undefined ? "" : param["utm_content"];
        let utm_term__c =
          param["utm_term"] == undefined ? "" : param["utm_term"];
        let GCLID__c = param["gclid"] == undefined ? "" : param["gclid"];
        let FBCLID__c = param["fbclid"] == undefined ? "" : param["fbclid"];

        console.log(GCLID__c);
        let gclidInput = document.getElementById("input");
        gclidInput.value = GCLID__c;
      });
      
      

Now you just have to match the inputs on your form with the inputs that this code would feed the UTM's to. We use ternery operators to place the UTM's if they are present or to do nothing. We don't want this to error out which is why we use them as well if the UTM codes are not present. As always if you need help setting up tracking or implementing bottom of funnel UTM's measurements feel free to reach out. We are always here to help!