Capture UTM Parameters using Javascript

Hi everyone,

So I found a post on this forum explaining how to capture the URL page with hidden fields inside the form block when you have 2 forms or more on a page.

The issue I’m having (and I’m no developer at all) is that I’m trying to capture the UTM parameters. I can capture the URL and hidden fields using the CMS to pre-populate info but it’s just not working for UTMS. Below is what I have so far.

Inside my HTML Embed (in form)

Inside my /body:

You can see in the attached screen shot the values which come out which look like this: “utm_campaign”: “[object HTMLInputElement]”,

Any help/guidance is really really appreciated as I’ve spent hours on this already and starting to go mad.!

Please Add live URL + The original post/guide.

In your code, you did not declare the var utm_source for example.

Anyway in your example:

  • utm_campaign => empty(no value)
  • utm_medium empty
  • utm_source empty

Watch this:

@Siton_Systems - thanks for your reply. Here is one of the live links: https://www.speak.ae/learn/kids-summer-camp

This is the original post: How to use Hidden Fields to Include your Current URL, Referring Page URL, and form names using one line of JavaScript

The issue I have is not with google analytics but with getting two forms on one page (one form is desktop visible on desktop and another on Table/mobile) to capture the UTM parameters of both forms. I have tried with creating unique IDs for each hidden field but not luck either.

First follow/Learn the tutorial “as is” (Create demo page)
https://dontpop.webflow.io/htmlstuff

Next change to your “case” (Looks like your code and the reference code are diff).

The tutorial is long - so its hard for me to answer.

Where this block of code in your example?

<script> 
	{
	  document.getElementById('hiddenKey02').value = location.pathname;
	  document.getElementById('hiddenKey03').value = document.referrer;
	  document.getElementById('hiddenKey12').value = location.pathname;
	  document.getElementById('hiddenKey13').value = document.referrer;
	 } 
	</script>

By the way its better to use semantic names (Instead of hiddenKey01 ==> utm_medium_key and so on).

Example

Not my tutorial but all the idea her is to “send” some value (“hello world” or document.referrer; as value to feild.

The most basic example:

<form>
  <input id="key" value=""> 
</form>

Script

<script>
document.getElementById('key').value = "hello world";
</script>

Output:
image

Example - use doc.referrer

<script>
document.getElementById('key').value = document.referrer;
</script>

Result:
image

Remove type=“hidden”

For testing change type="hidden" to type="" (Easier to debug).

@Siton_Systems - thank you so much for your detailed explanation. I will give that a go tomorrow and update on how it went. Thanks again!

Hi @Siton_Systems Thanks for the expanation. This looks super easy and friendly.
would you mind bringing it all together?
a snippet to collect the UTM parameters into separate fields of a form?

Thanks :slight_smile:

Added her (Try and update if it works like it should :slight_smile: ):