Using hidden fields to track UTM information from cookies

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? 

<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? 

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?

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>

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.

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>

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>

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;

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. 

@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