Jake
(Jake Borland)
July 15, 2019, 6:15am
1
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:
Jake
(Jake Borland)
July 15, 2019, 9:50am
3
@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:
Example - use doc.referrer
<script>
document.getElementById('key').value = document.referrer;
</script>
Result:
Remove type=“hidden”
For testing change type="hidden"
to type=""
(Easier to debug).
Jake
(Jake Borland)
July 15, 2019, 12:53pm
5
@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!
gushon
(מיכאל שוורץ)
August 5, 2020, 6:05am
6
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
Added her (Try and update if it works like it should ):
Minimal JS knowledge requires (Two copy-paste and Less than one minute).
Demo: utm without cockle
Step 1/4:
Google/youtube What are UTM (Very useful for Marketing).
Step 2/4:
Create a UTM link. Useful tool:
In this example the UTM is:
?utm_source=facebook&utm_medium=post&utm_campaign=webflow
“Full” link:
www.my-site.com?utm_source=facebook&utm_medium=post&utm_campaign=webflow
Step 3/4
Copy-Paste Before body (Per page -or- entire website).
The code structure:
Get URL parameters -
G…