如何通过javascript将隐藏字段数据从url传递到嵌入式typeform？

Question

我需要帮助才能从 url 以 typeform 形式传递隐藏参数。我的网址是这样的。

usa.domasd.com/?utm_source=Social%20Media&utm_medium=Linkedin&utm_campaign=Mayank%27s%20profile

我需要从 url 中获取 utm 值，即我需要 utm_source、utm_medium 等值。它需要在 typeform 隐藏值中传递。现在 typeform 实际上嵌入在页面中。这是我的 javascript 代码的样子

<script>
function parseURLParams(url) {
    var queryStart = url.indexOf("?") + 1,
        queryEnd   = url.indexOf("#") + 1 || url.length + 1,
        query = url.slice(queryStart, queryEnd - 1),
        pairs = query.replace(/\+/g, " ").split("&"),
        parms = {}, i, n, v, nv;

    if (query === url || query === "") return;

    for (i = 0; i < pairs.length; i++) {
        nv = pairs[i].split("=", 2);
        n = decodeURIComponent(nv[0]);
        v = decodeURIComponent(nv[1]);

        if (!parms.hasOwnProperty(n)) parms[n] = [];
        parms[n].push(nv.length === 2 ? v : null);
    }
    return parms;
}
var secondUrl = window.location.href; // this one is for getting the url
console.log(secondUrl);
urlParams = parseURLParams(secondUrl);
console.log(urlParams['utm_source']);

document.getElementById("utm_source").value = urlParams['utm_source'];
document.getElementsByName("utm_medium").value = urlParams['utm_medium'];
document.getElementByName('utm_campaign').value = urlParams['utm_campaign'];
document.getElementByName('utm_term').value = urlParams['utm_term'];
document.getElementByName('utm_content').value = urlParams['utm_content'];
</script>

我也尝试通过打字稿文档代码传递值，但它不起作用。关于如何解决它和传递数据的任何建议。我正在使用概念和超级平台来制作网站。请在此处查看 typeform 代码

<a class="typeform-share button" id="TypeForm1" href="https://form.typeform.com/to/XzRHXdmJ?utm_source=%40utmsource&utm_medium=&utm_campaign=&utm_term=&utm_content=&typeform-medium=embed-snippet" data-mode="popup" style="display:inline-block;text-decoration:none;background-color:#0445AF;color:white;cursor:pointer;font-family:Helvetica,Arial,sans-serif;font-size:20px;line-height:50px;text-align:center;margin:0;height:50px;padding:0px 33px;border-radius:25px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:bold;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;"
  data-size="100" target="_blank">Launch me </a>
<script>
  (function() {
    var qs, js, q, s, d = document,
      gi = d.getElementById,
      ce = d.createElement,
      gt = d.getElementsByTagName,
      id = "typef_orm_share",
      b = "https://embed.typeform.com/";
    if (!gi.call(d, id)) {
      js = ce.call(d, "script");
      js.id = id;
      js.src = b + "embed.js";
      q = gt.call(d, "script")[0];
      q.parentNode.insertBefore(js, q)
    }
  })()
</script>

Answer 1

Typeform Embed SDK 提供了一种开箱即用的解决方案，可以将 URL 查询参数从父窗口传递到嵌入的 typeform。

这是transferableUrlParameters 参数。

选项 1：纯 HTML

<div
      id="wrapper"
      data-tf-widget="REPLACE_BY_YOUR_FORM_ID"
      data-tf-medium="demo-test"
      data-tf-transitive-search-params="foo,bar"
      data-tf-hidden="foo=foo value,bar=bar value"
      data-tf-opacity="50"
    ></div>
    <script src="://embed.typeform.com/embed-next.js"></script>
  

选项 2：使用 Javascript

将嵌入 SDK 添加到您的网站

<script src="://embed.typeform.com/embed-next.js"></script>

然后将你的 typeform 添加到页面。

var url = "https://picsoung.typeform.com/to/QXS2h1" // NOTE: Replace with your typeform URL

const embedElement = document.getElementById("wrapper") 

window.tf.createWidget("moe6aa", {
        container: embedElement,
        transitiveSearchParams: ["foo", "bar"],
        medium: "demo-test",
        hidden: { foo: "foo value", bar: "bar value" },
      });

方案三：修改typeform给出的sn-p

在share面板下typeform给出的代码sn-p中添加data-transferable-url-parameters="utm_source, utm_medium”。