如何检测用户是否已完成嵌入式Typeform？

Question

我在网页中嵌入了一个Typeform调查表，放在iframe中。我想通过JS知道用户是否已经完成了调查表（即点击了提交按钮）。但是，Typeform的JS似乎没有提供任何可以监听的事件。目前我只找到一种解决方案——定期调用以下测试来检测是否正在显示outro页面：

document.getElementById('my-typeform-iframe').getElementsByClassName('outro').length > 0

有更好的方法吗？

- Peter

Answer 1

好的，所以我之前的假设是错误的 - 原来Typeform嵌入式框架会在用户提交表单时触发一个事件。这个事件名为form-submit，可以通过以下方式进行处理：

    window.addEventListener('message', function(event){
      if(event.data == 'form-submit')
        // your business logic here
    }, false);

- Peter

---

似乎不再起作用了... event.data现在始终是相同的ID。 - Marco Ancona

现在必须使用 event.data.type === "form-submit"。 - Ragu

"form-submit"字符串属于event.data.type。 - Marc

Answer 2

现在，Typeform已经具备了“onSubmit”回调功能来实现这一点。

<script src="https://embed.typeform.com/embed.js"></script>
<script>
  window.addEventListener("DOMContentLoaded", function() {
    var el = document.getElementById("my-embedded-typeform");
    window.typeformEmbed.makeWidget(el, "https://admin.typeform.com/to/cVa5IG", {
    onSubmit: function() {
      alert("submited!");
    }
  });
});

这里是文档。

看起来没有简单的方法可以获取答案。正如@matthew所提到的，一个response_id被传递到回调函数中（我猜测），你可以使用它查询API，但需要实现重试循环，因为响应并不立即可用。

- apflieger

---

你如何获取表单的值？ - Sourav Chandra

我认为你无法在回调函数中立即获得它。以下是我的做法： 1.在onSubmit上向服务器发送xhr 2.服务器通过cookie或请求参数识别提交表单的用户 3.服务器使用包含用户ID或电子邮件的搜索查询对typeform进行API调用以获取其响应。 4.我仅在服务器上处理响应数据如果需要，您可以将其发送回客户端。 - apflieger

我对那些遵循@apflieger建议的人的经验是，通过Typeform的API提交后，响应并不会立即可用（已经向Typeform确认这是已知行为）。onSubmit回调接收到response_id，但是立即使用该response_id查询Typeform将在大约20秒钟内返回错误（这是我的经验）... - Matthew

是的，我循环了一些重试来获取响应。但我不知道有一个响应ID返回到了某个地方！ - apflieger

Answer 3

感谢Peter Answer，我查看了他们提供的事件并得到了一些好的结果。以下是我的发现：

  window.addEventListener('message', function(event){
  if(event.data.type == 'form-submit')
    // your business logic here
}, false);

事件数据有几种类型，包括：

• 表单主题
• TARP
• 表单已准备好
• 表单高度已更改
• 表单屏幕已更改
• 一个没有类型的 JSON 事件，其中包含表单答案
• 一个带有表单提交信息的 JSON 事件
• 表单提交
• 嵌入式自动关闭弹出窗口

- Abdurrahman Rajab