Skip to main content
search
Guides

How to capture and transfer UTM parameters to MailerLite

By August 2, 2024August 18th, 2024No Comments7 min read

UTM’s

UTM parameters tag your URLs to help you track the source, medium, and campaign of your web traffic. They provide insights into how your marketing efforts perform across different channels. By integrating UTM parameters with email marketing platforms like MailerLite, you can understand your subscribers’ journey and optimize your campaigns for better results.

In this guide, I’ll show you how to capture the five default UTM parameters – utm_source, utm_medium, utm_campaign, utm_term, and utm_content – from your website’s URL and pass them to MailerLite forms. You will set up JavaScript code to dynamically update the hidden form fields with the appropriate UTM values.

Step-by-Step Guide

Capturing UTM parameters helps you track the effectiveness of your marketing campaigns. By knowing where your subscribers come from, you can tailor your marketing strategies more effectively and improve your overall conversion rate.

In this article, I’ll guide you through the process of capturing UTM parameters on your website and transferring them to MailerLite using JavaScript.

Step 1: Create custom UTM fields in the MailerLite’s “Subscribers” section

Step 2: Create an email opt-in form in MailerLite

  • Create a new form in the Mailerlite “Forms” section.
  • Enable the “Hidden segmentation field” checkbox
  • Set “Use custom field” as your “utm_source” parameter.
  • Set the default value to something. When left empty, the form will not generate a hidden field.
  • Confirm by clicking “Done Editing”

Now, if you check the provided HTML code, you’ll find one hidden entry on row #862.

If you only want to capture utm_source, leave it as it is.

If you want to capture all five UTM parameters, you need to add four more hidden fields in the provided HTML code:

Save this edited HTML, you’ll need it later.

Step 3: Install the MailerLite Universal Script

First, you must ensure that the MailerLite Universal script is included on your website. This script will enable MailerLite forms to be embedded and function correctly on your site.

Insert the following script into the <head> section of your WordPress theme’s header.php file or use a plugin like “Insert Headers and Footers” to include it.

<!-- MailerLite Universal -->
<script>
(function(w,d,e,u,f,l,n){w[f]=w[f]||function(){(w[f].q=w[f].q||[])
.push(arguments);},l=d.createElement(e),l.async=1,l.src=u,
n=d.getElementsByTagName(e)[0],n.parentNode.insertBefore(l,n);})
(window,document,'script','https://assets.mailerlite.com/js/universal.js','ml');
ml('account', '626382'); // Replace '626382' with your MailerLite account ID
</script>
<!-- End MailerLite Universal -->

Note: You can skip this step if you use the MailerLite official plugin for WordPress. The plugin adds this code automatically.

Step 5: Set up the JavaScript code to capture UTM parameters

Next, you’ll need to set up a custom JavaScript code to capture UTM parameters from the URL and populate the corresponding fields in the MailerLite form.

Insert the following script in the same place as the MailerLite script or at the end of the <body> section to ensure it runs after the page has fully loaded.

JS script to capture all five UTM parameters

<!– Custom Script to Capture UTM Parameters –>
<script>
function getParameterByName(name) {
name = name.replace(/[\[]/, “\\[“).replace(/[\]]/, “\\]”);
var regex = new RegExp(“[\\?&]” + name + “(=([^&#]*)|&|#|$)”),
results = regex.exec(location.search);
if (!results || !results[2]) return ”;
return decodeURIComponent(results[2].replace(/\+/g, ” “));
}

function setUtmParameters() {
var utm_source = getParameterByName(‘utm_source’);
var utm_medium = getParameterByName(‘utm_medium’);
var utm_campaign = getParameterByName(‘utm_campaign’);
var utm_term = getParameterByName(‘utm_term’);
var utm_content = getParameterByName(‘utm_content’);

var utmSourceField = document.querySelector(‘input[name=”fields[utm_source]”]’);
var utmMediumField = document.querySelector(‘input[name=”fields[utm_medium]”]’);
var utmCampaignField = document.querySelector(‘input[name=”fields[utm_campaign]”]’);
var utmTermField = document.querySelector(‘input[name=”fields[utm_term]”]’);
var utmContentField = document.querySelector(‘input[name=”fields[utm_content]”]’);

if (utm_source && utmSourceField) {
utmSourceField.value = utm_source;
}
if (utm_medium && utmMediumField) {
utmMediumField.value = utm_medium;
}
if (utm_campaign && utmCampaignField) {
utmCampaignField.value = utm_campaign;
}
if (utm_term && utmTermField) {
utmTermField.value = utm_term;
}
if (utm_content && utmContentField) {
utmContentField.value = utm_content;
}
}

function waitForElement(selector, callback) {
var interval = setInterval(function() {
if (document.querySelector(selector)) {
clearInterval(interval);
callback();
}
}, 100);
}

document.addEventListener(“DOMContentLoaded”, function() {
waitForElement(‘input[name=”fields[utm_source]”]’, setUtmParameters);
});
</script>

JS script to capture only utm_source parameter

<!– Custom Script to Capture UTM Source Parameter –>
<script>
function getParameterByName(name) {
name = name.replace(/[\[]/, “\\[“).replace(/[\]]/, “\\]”);
var regex = new RegExp(“[\\?&]” + name + “(=([^&#]*)|&|#|$)”),
results = regex.exec(location.search);
if (!results || !results[2]) return ”;
return decodeURIComponent(results[2].replace(/\+/g, ” “));
}

function setUtmSource() {
var utm_source = getParameterByName(‘utm_source’);
var utmSourceField = document.querySelector(‘input[name=”fields[utm_source]”]’);

if (utm_source && utmSourceField) {
utmSourceField.value = utm_source;
}
}

function waitForElement(selector, callback) {
var interval = setInterval(function() {
if (document.querySelector(selector)) {
clearInterval(interval);
callback();
}
}, 100);
}

document.addEventListener(“DOMContentLoaded”, function() {
waitForElement(‘input[name=”fields[utm_source]”]’, setUtmSource);
});
</script>

Explanation:

  • getParameterByName(name): This function retrieves the value of a specified query parameter from the URL.

  • setUtmParameters(): This function retrieves all five UTM parameters and assigns them to the respective hidden input fields in the MailerLite form.

  • waitForElement(selector, callback): This function checks if a specified element is present in the DOM. Once found, it executes the callback function to set the UTM parameters.

It will have a negligible impact on your website’s loading time.

Here’s why:

  1. Small Script Size: The script itself is very small and lightweight. It doesn’t take much time to load or execute.

  2. Asynchronous Loading: The MailerLite Universal script is loaded asynchronously (l.async = 1), which means it doesn’t block the rest of your page from loading.

  3. Efficient Execution: The custom script runs only after the DOM is fully loaded (DOMContentLoaded event). It uses an interval to check for the presence of the form fields, which is a minimal operation and stops as soon as the fields are found.

This script is designed to be efficient and should not noticeably slow down your website. However, always monitor your site performance using tools like Google PageSpeed Insights or GTmetrix to be sure overall performance remains optimal.

Step 6: Embed the MailerLite Form

With the scripts in place, you can now embed your MailerLite form on your WordPress page using the MailerLite shortcode or embed code.

If you're capturing only utm_source

Use the following shortcode to embed the form where you want it to appear:

<div class="ml-embedded" data-form="XXX"></div>

Note: Replace XXX with your actual form ID provided by MailerLite.

If you're capturing all five UTMs

Use your edited HTML code with 5 hidden fields.

Step 7: Test Your Setup

To ensure everything is working correctly, test the form by visiting your website with different UTM parameters in the URL. Here’s how to verify that the setup is functioning as intended:

 1. Open your website URL with UTM parameters, such as:

https://yourwebsite.com/utm-form-test/?utm_source=google&utm_medium=cpc&utm_campaign=summer_sale&utm_term=shoes&utm_content=ad1

2. Submit the form and check MailerLite to ensure the UTM parameters are correctly captured in your subscriber list.

If you notice any issues, ensure the JavaScript is correctly placed and that the form fields in MailerLite are set up to accept the UTM values.

Conclusion

By following this guide, you can capture UTM parameters from your website visitors and transfer them to MailerLite.

This approach gives you valuable insights into the performance of your marketing campaigns. It allows you to understand your audience’s journey better and optimize your marketing strategies for higher conversions. You can now track and analyze your campaigns’ success, gaining insights that will help you improve your marketing efforts.