本指南将介绍如何使用事件监听器，将网站访问者与表单的互动作为自定义 JavaScript 的触发条件（Trigger），以了解他们的行为。它支持以下功能：
表单事件
每当表单有活动时，Omnisend 表单会在 window 上触发一个名为 'omnisendForms' 的事件。
请查看下方对象中的 event payload 示例：
const event = new CustomEvent("omnisendForms", {
detail: {
eventName: 'submit',
brandID: 'F12345',
form: {
id: 'F12345',
name: 'F12345',
displayType: 'popup',
versionID: 'F12345',
versionName: 'F12345',
},
formValues: {
emailField: '[email protected]',
phoneNumberCountryCodeField: 'US',
phoneNumberField: '11111111',
firstName: 'Name',
lastName: 'LastName',
//... any other form value
}
}
});
window.dispatchEvent(event);表单事件类型
事件对象中的类型字段可以是以下七种不同的事件中的任何一种：
view
当弹窗、浮出表单或嵌入式表单初次显示在页面上时，此事件将被触发。
interaction
此事件在用户与表单互动时触发（例如，选择输入字段），并且每个表单只触发一次。
submit
此事件在访客完成表单中的主要转化操作时触发（例如，首次电子邮件（Email）或短信（SMS）订阅），并且每个表单只会触发一次。
close
当访客关闭表单时，此事件会触发。
stepView
此事件在多步表单的每个步骤显示在页面上时触发，并且每个表单可以触发多次。
stepInteraction
此事件在用户与多步骤表单互动时触发（例如，选择一个输入字段）；它每一步触发一次。
stepSubmit
当多步骤表单的每个步骤提交时，此事件会触发，并且它可以在每个表单中多次触发。
在选择要使用的完美事件时，您必须考虑具体的追踪需求。
如果您正在查看一般表单分析，例如在 Google Analytics 中跟踪表单提交，请选择 'submit' 事件；它每个表单只触发一次。如果您有多步骤表单，您还可以使用 'stepSubmit' 事件捕获步骤数据。
步骤事件
步骤事件仅在多步骤表单中触发。当提交步骤时，'stepSubmit' 事件会触发，并且对于同一个表单可以多次触发。然而，对于多步表单，提交事件每个表单触发一次。
其他事件详情
除了事件类型之外，事件详情对象还包含以下信息：
brandID
品牌 ID。这是一个字母数字代码，可唯一标识 Omnisend 中的每个品牌。
step
事件发生的步骤。仅适用于多步表单。
form
表单相关数据，包括：
id
表单 ID这是一个字母数字代码，用于在 Omnisend 中唯一标识每个表单。
name
表单名称
displayType
表单的显示类型（例如，弹窗、浮出式、嵌入式）。
versionId
这是一个字母数字代码，用于在 Omnisend 中唯一标识每个 A/B 表单。
versionName
A/B 表单的名称
formValues
此字段包含所有提交到 Omnisend 的字段及其值：
emailField, firstName, lastName, phoneNumberCountryCodeField, phoneNumberField, all form`s fields with values.
在事件发生时执行自定义 JavaScript：事件监听器示例
以下是开发您的个性化表单事件监听器时使用的典型格式。如果需要，您可以选择将类型视图修改为任何其他类型的表单事件（如上文“表单事件类型”部分所列）。
在下面的示例中，将 'Custom JS' 替换为 JavaScript，该 JavaScript 应在事件发生时运行。
<script>
window.addEventListener("omnisendForms", function(e) {
if (e.detail.type == 'view') {
// Custom JS
}
});
</script>
为了在您自己的 JavaScript 代码中使用事件的时间戳，请使用 'e.timeStamp'。
请注意，在此用例中，唯一的例外是落地页。我们还将为着陆页触发 JavaScript 事件；但是，着陆页中尚不支持事件监听器。
在表单事件上实施 Google Analytics 跟踪
将特定表单事件作为 Google Analytics（分析）中的事件进行追踪。
<script>
window.addEventListener("omnisendForms", function(e) {
if (e.detail.type == 'view') {
gtag('event', 'omnisend_form_view', { form_name: e.detail.form.name, form_id: e.detail.form.id });
}
if (e.detail.type == 'interaction') {
gtag('event', 'omnisend_form_interaction', { form_name: e.detail.form.name, form_id: e.detail.form.id });
}
if (e.detail.type == 'submit') {
gtag('event', 'omnisend_form_submit', { form_name: e.detail.form.name, form_id: e.detail.form.id });
}
if (e.detail.type == 'close') {
gtag('event', 'omnisend_form_close', { form_name: e.detail.form.name, form_id: e.detail.form.id });
}
if (e.detail.type == 'stepView') {
gtag('event', 'omnisend_form_step_view', { form_name: e.detail.form.name, form_id: e.detail.form.id });
}
if (e.detail.type == 'stepInteraction') {
gtag('event', 'omnisend_form_step_interaction', { form_name: e.detail.form.name, form_id: e.detail.form.id });
}
if (e.detail.type == 'stepSubmit') {
gtag('event', 'omnisend_form_step_submit', { form_name: e.detail.form.name, form_id: e.detail.form.id });
}
});
</script>
遇到困难？ 在应用内或通过电子邮件（Email）联系我们的全天候支持团队[email protected]