In today's data-driven marketing world, understanding the source of your website traffic is crucial for tailoring content and improving conversion rates. One effective way to achieve this is by using UTM parameters to track the origin of your visitors. In this article, we’ll explore how to capture UTM parameters in a HubSpot environment, pass them through a form submission, and utilize them in a follow-up email to personalize the user experience.
Step 1: Capture UTM Parameters on the Landing Page
To begin, we need to capture UTM parameters when a visitor lands on our page. We can achieve this by using hidden fields in a HubSpot form and JavaScript to populate these fields with UTM parameters from the URL.
1. Add Hidden Fields to Your Form:
- Go to your landing page form in HubSpot.
- Add hidden fields for each UTM parameter you want to track (e.g., `utm_source`, `utm_medium`, `utm_campaign`).
2. Use JavaScript to Populate Hidden Fields:
- Add the following JavaScript code to your landing page to extract UTM parameters from the URL and populate the hidden fields:
<script>
function getQueryParam(param) {
var urlParams = new URLSearchParams(window.location.search);
return urlParams.get(param);
}
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('input[name="utm_source"]').value = getQueryParam('utm_source');
document.querySelector('input[name="utm_medium"]').value = getQueryParam('utm_medium');
document.querySelector('input[name="utm_campaign"]').value = getQueryParam('utm_campaign');
// Add additional parameters as needed
});
</script>
Step 2: Ensure Form Submission Includes UTM Parameters
After setting up the form to capture UTM parameters, ensure these parameters are included in form submissions:
- In your HubSpot form settings, map the hidden fields to corresponding properties in your HubSpot CRM. This way, when the form is submitted, the UTM parameters are stored with the contact’s information.
Step 3: Pass UTM Parameters to the Email Button Link
Now, we need to pass these UTM parameters to the next step, which is typically a follow-up email that contains a link to another page.
1. Create a Workflow to Trigger the Email:
- Set up a workflow in HubSpot that triggers when the form is submitted.
- Add an action to send an email.
2. Customize the Email Template:
- In the email template editor, modify the button URL to include the UTM parameters dynamically using HubSpot's personalization tokens:
<a href="https://your-next-step-page.com/?utm_source=&utm_medium=&utm_campaign=" class="button">Next Step</a>
This ensures that when the recipient clicks the button, the UTM parameters are included in the URL.
Step 4: Utilize UTM Parameters on the Next Step Page
Finally, on the next step page, we can use the captured UTM parameters to tailor the content based on the source.
1. Capture UTM Parameters on the Next Step Page:
- Use similar JavaScript to capture UTM parameters on the next step page.
2. Conditional Content Based on UTM Parameters:
- Use HubSpot’s smart content feature to display different content based on the UTM parameters:
<p>Welcome to our site!</p>
Summary
By following these steps, you can effectively track and utilize UTM parameters in your HubSpot campaigns. This allows you to understand where your traffic is coming from and tailor your content to improve user experience and conversion rates. Here’s a quick recap:
1. Capture UTM Parameters on the Landing Page: Use JavaScript to populate hidden form fields with UTM parameters.
2. Include UTM Parameters in Form Submission: Ensure form submissions include the UTM parameters.
3. Pass UTM Parameters to the Email Button Link: Use HubSpot personalization tokens to dynamically include UTM parameters in email links.
4. Utilize UTM Parameters on the Next Step Page: Capture UTM parameters and customize content based on these parameters.
Implementing these steps will help you create a more personalized and effective marketing campaign, leveraging the power of UTM parameters in the HubSpot environment.
