Answered

Using hidden fields to track UTM information from cookies

  • 22 November 2021
  • 11 replies
  • 955 views

This is our Website: www.packmatic.io

Our Webflow form is embedded as a full-page form via www.packmatic.io/request.

 

We used this approach to track UTM in webflow forms and to store it in cookies: 

https://discourse.webflow.com/t/how-to-get-utm-parameters-and-send-them-inside-webflow-form/131924

 

Can we somehow store the information from cookies into the hidden fields in typeform? Since our form is on a separate page, the url doesn’t contain the UTM information anymore at the time of filling in the form, since visitors come from the homepage and are redirected.

 

Thanks

Paul

icon

Best answer by mathio 22 November 2021, 21:14

View original

11 replies

Userlevel 7
Badge +5

Hi @Paul SC Happy Monday! Thanks for stopping by the community. I think this would be possible, though I’m not entirely sure of the solution since this takes place outside of Typeform. @mathio or @picsoung do either of you happen to know? 

Userlevel 7
Badge +5

Hello @Paul SC 

yes it is possible to pass custom values as hidden fields. You will need to use Embed SDK for this:

<div id="myform" style="width:100%;height:100%"></div>
<script src="//embed.typeform.com/next/embed.js"></script>
<link rel="stylesheet" href="//embed.typeform.com/next/css/widget.css" />
<script>
// line below uses cookie lib: https://www.npmjs.com/package/cookie
const cookies = cookie.parse(document.cookie)
window.tf.createWidget('<form-id>', {
container: document.querySelector('#myform'),
hidden: {
name: cookies.myCookie
}
})
</script>

 

Userlevel 2
Badge +1

Hello @Paul SC 

yes it is possible to pass custom values as hidden fields. You will need to use Embed SDK for this:

<div id="myform" style="width:100%;height:100%"></div>
<script src="//embed.typeform.com/next/embed.js"></script>
<link rel="stylesheet" href="//embed.typeform.com/next/css/widget.css" />
<script>
// line below uses cookie lib: https://www.npmjs.com/package/cookie
const cookies = cookie.parse(document.cookie)
window.tf.createWidget('<form-id>', {
container: document.querySelector('#myform'),
hidden: {
name: cookies.myCookie
}
})
</script>

 

Hi Mathio,
Do you care to elaborate a bit on this. I tried to parse this code and replacing the <form-id> into my site, but resulting in the form not showing. The there anything I need to load unto my site to make the Embed SDK version work? 

Userlevel 7
Badge +5

Hello @Søren Kjelstrup 

You need to parse the cookies yourself (or use a 3rd party library for that). The example above does not include the cookie-parsing part.

If you share your full code I can have a look. What kind of error or exception are you getting?

Userlevel 2
Badge +1

Hi Mathio,
I think I am still a bit from my goal, but I managed to split the three values I am looking for into an array now, but still not where I want to be. But regardless: This is my code to find the cookies, not I need to figure out how to couple this with hidden field(s) on my embeded typeform:

<script>
function getCookieValueByName(name) {
var match = document.cookie.match(new RegExp("(^| )" + name + "=([^;]+)"));
return match ? match[2] : "";
}

let cookies = getCookieValueByName("__utmzz");
let cookieList = cookies.split("|");
for (let i = 0; i < cookieList.length; i++) {
let a = cookieList[i];
console.log(a);
}

</script>

 

Userlevel 7
Badge +5

Once you have your cookie value extracted, you can pass it to your embed:

window.tf.createWidget('<form-id>', {
container: document.querySelector('#myform'),
hidden: {
nameOfYourHiddenField: variableWithYourValueFromCookie
}
})

To setup hidden fields in your form please see this documentation.

Userlevel 2
Badge +1

Hi Mathio,
I managed to make it work for the Embed SDK version with a div:

<div data-tf-widget="<form-id>"></div>

How would you go about adding it via the button version (for mobile), since the above does not work on mobile.

<script>
const { open, close, toggle, refresh } = window.tf.createPopup('<form-id>')
document.querySelector('#button').onclick = toggle
</script>

 

Userlevel 7
Badge +5

You can pass the hidden object regardless of your embed type. A code like this should work too:

<button id="button">click</button>
<script>
// parse the cookie value same as you did before
const variableWithYourValueFromCookie = '...'

// create the popup
const { toggle } = window.tf.createPopup('<form-id>', {
hidden: {
nameOfYourHiddenField: variableWithYourValueFromCookie
}
})

// attach to the button click
document.querySelector('#button').onclick = toggle
</script>

 

Userlevel 2
Badge +1

Thanks i milion.
Since I am parsing the variables through Google Tag Manager, I cannot run object destructuring nor const declaration I had to re-write it a bit. Testing now it works, but maybe you cal tell me if you thinks it a “sustainable” option:

  var toggle = window.tf.createPopup('<my-form>', {
    hidden: {
      medium: {{JS - GA Medium}},
      content: {{JS - GA Content}},
      campaign: {{JS - GA Campaign}},
      source: {{JS - GA Source}}, 
      keyword: {{JS - GA Keyword}},
      referrer: {{Referrer}}
    }
  }).toggle


  document.querySelector('#typeformButton').onclick = toggle;

 

Userlevel 2
Badge +1

Since I have you Mathio, I was wondering if there’s a way to use the onSubmit option to fire a dataLayer with a variable from the from? 

This could greatly increase my tracking capabilities, but since I need to distinguish between private and pro, I need to be able to include a lead_type variable. 

Userlevel 7
Badge +5

@Søren Kjelstrup I think you can remove the .toggle in the first createPopup call.

To fire a dataLayer on submit you could push custom event with the responseId:

var toggle = window.tf.createPopup('<my-form>', {
hidden: {
medium: {{JS - GA Medium}},
content: {{JS - GA Content}},
campaign: {{JS - GA Campaign}},
source: {{JS - GA Source}},
keyword: {{JS - GA Keyword}},
referrer: {{Referrer}}
},
onSubmit: (data) => {
dataLayer.push({
event: 'custom-form-submit-event',
responseId: data.responseId
});
}
})

document.querySelector('#typeformButton').onclick = toggle;

You dont have access to form data in onSubmit callback. If you need those, you would need an integration similar to what I described in this article: https://medium.com/typeforms-engineering-blog/integrate-typeform-with-next-js-b27a5306bfbb

Reply