How to extract UTM parameters from the URL using Zapier

---

What is covered in this article? 

• Why is this important?
• Prerequisite
• Building the steps in Zapier

---

Why is this important?

If you are using Zapier to push data into SchoolMint Connect, you may also want to parse UTM parameters for your landing page for your campaign. 

This article explains how to extract the UTM parameters and store as attributions against a specific student in SchoolMint Connect. 

Read this article on how to retrieve this data.

Prerequisite

For this to work, you must have the following already in place:

• a page with that collects the data, which can be connected to SchoolMint Connect via Zapier, such as Google Forms, Unbounce, Gravity Forms, etc.
• a URL to that page that contains the UTM parameters
• A Zapier Trigger app that supports returning the Source URL, such as Google Forms.

When this form is submitted, the form response will contain the URL with the UTM parameters passed as a query string.

Building the steps in Zapier

To get the UTM params when a form is submitted:

• Create a ZAP with selecting a trigger app such as Google Forms.

• Before adding an action to SchoolMint Connect, you need to add an extra step by selecting the Code by Zapier app which is an in-built app by Zapier.

• Click '+' to add an extra step after the first trigger and before adding SchoolMint Connect, search for Code by Zapier.
• As the name indicates, this app allows you to add a snippet of code using JavaScript or Python to customize the ZAP.

• After selecting the Code by Zapier app, Choose the Run Javascript from the Event dropdown

• Once selected, two fields will be visible - Input Data and Code - on the following screen

• The Input Data field contains 2 text boxes indicating key-value pair.

• Add any text in the first text box, the key field i.e. URL

• In the second text box, the value field, you must enter the actual URL from which the UTM parameters will be extracted.
• Click in the second text box
• Zapier will display the output fields as variables from the previous steps.
• Select Option 1. Form Submission

• You will see the field variable Source URL. 
• This URL with UTM params will be seen only when submitting the form, but must contain those parameters. See the Prerequisites at the start of this article.
• Select the Source URL variable as a value in second text box.
• Move to the Code field
• Copy the code snippet below and add it to the CODE field

• let url = inputData.URL;
  let queryString = url.split("?").pop();
  let urlParams = new URLSearchParams(queryString);
  
  let utm_source = urlParams.get('utm_source');
  let utm_campaign = urlParams.get('utm_campaign');
  let utm_medium = urlParams.get('utm_medium');
  let utm_term = urlParams.get('utm_term');
  let utm_content = urlParams.get('utm_content');
  
  output = [{url, queryString, utm_source, utm_campaign, utm_medium, utm_term, utm_content}];

Note: This code uses in-built java script functionality provided by Zapier. It will store the Source URL in a javascript variable, split the URL so that we can get the UTM parameters separated by query string. Then it will get all the utm params and values and store them in each javascript variable as per the different utm parameters. The output variable will contain all utm params as variables which can then be used in next steps to map those in zapier.

• The Code should appear as shown below

• When testing the step, all the UTM params will be available as output variables as seen below

• When the user moves on to the next step in ZAP, the above variables will be available to be mapped further as seen below

• User can map these UTM variables to be used in SchoolMint Connect’s event Create New Student UTM Attribution Log

• Add your SchoolMint Connect account and continue towards the Action section.

• User will find the fields required to be filled to create new student UTM logs.

• Select the first field Student,

• Click on the text field, select the custom tab

• Note: You will find the required field under the event where you created new Inquiry, since the newly generated student id will be listed as a field variable.

• Locate and select the Student Id field (your ID number will be different than the one below) 

• After mapping the Student field, you will find all the 5 fields related to UTM parameters.

• For each of these, you must use the previous step, Code by Zapier, to set the values.

• Click the text box for each UTM field and select the Run Javascript option.

• You will find all the fields based on UTM params which were passed on form submission and extracted using Code by Zapier step.

• After mapping all the fields, you can test the step and publish the ZAP.

• This ZAP will be executed when a form is submitted. After the form is submitted, it will trigger the ZAP, create/update inquiry in SchoolMint Connect and add student UTM logs in SchoolMint Connect.

Read this article on how to retrieve this data from SchoolMint Connect.