Streaming live at 10am (PST)

Pass UTM Parameters: External Site > Webflow Homepage > Same Website with Full Width Embedded Typeform

Hey all.

People come to our Homepage having UTM Parameters in their URL. We want to capture that and send it away from Homepage to our /landingpage - in which we have a full width Typeform embedded. In this we will then hopefully capture the utm_source through a hidden field.

I can’t get it done - Ive read through some threads where people capture the UTM Parameter - and pass them to a button link and attach it to id through the Element ID - but everytime I do this literally nothing happens. And I can’t see the “ID” written in the “inspect elements” on my site either.

Does anyone has experience with this?

Any tips here? Would love to talk about it

I found solutions for my problems.

The first step was to get the utm_source from users visiting out homepage. On our site we have several buttons linking out to our typeform (embed on the same domain but other landinpage). I went into their “Element Settings” and gave them IDs from “link1” to “link5” - I also added this code to the page settings in the custom code body section of our Homepage (to showcase the script is written with spaces in it which is normally not the case):

< script >
const linkIds = [
‘link1’, ‘link2’, ‘link3’, ‘link4’, ‘link5’
];
linkIds.forEach(id => {
const interval = setInterval(() => {
const link = document.querySelector(’#’ + id);
if (link) {
clearInterval(interval);
const href = link.getAttribute(‘href’);
const urlParams = new URLSearchParams(window.location.search);
const source = urlParams.get(‘utm_source’)
document
.title
.replace(/\s+/g, ‘_’)
.replace(/&/g, ‘’)
.toLowerCase()
const newHref = ${href}?utm_source=${source};
link.setAttribute(‘href’, newHref);
}
}, 20);
});
< /script >

What the code does: It takes the UTM Parameter, puts it into a “const” and later sets the button what we wan it to be in “const newHref=…” - You can adjust that to whatever you want. For us that worked out.

Now: When a person clicked on the Buttons/Links - the “utm_source” is attached to it and send to the landingpage (Typeform).

BUT Typeforms (embed) can not read these Hidden Fields (that you should have set up already in your Typeform backend) by nature when embed in your webflow landingpage.

That is why we have to change the custom html part everytime a user comes to the page with whatever “utm_source” he/she carries with him/her. Therefore we gave the Typeform iframe an specific “ID” (“id=myiframe”). Then the following script (in the same html embed) gets called (again this “script” is with spaces in between so its readable):

< script language=“javascript” >
var iframe = document.getElementById(‘myiframe’);
iframe.src = iframe.src + window.location.search;
< /script >

This code checks ourURL for the parameters and adds them to the HTML embed when loading the site thereby changing the typeform link beeing called dynamically adding whatever URL parameter you have in your URL. Which the “Hidden Field” by Typeform then captures whenever a person fills out our Typeform.

Let me know if somebody else got a similar problem - I could help, maybe :wink: