开始之前

Omnisend JavaScript 代码段必须已安装在您的网站上。否则，omnisendForms 事件将不会触发，您的监听器也永远不会执行。在 Shopify 和 WooCommerce 上，代码片段会自动添加。在任何其他平台上，请在结束标签之前手动添加它在您的表单出现的每个页面上的标签。
每个页面只需一个代码段。一个 Omnisend 脚本即可启用所有表单、跟踪和事件监听。如果您在同一页面上同时嵌入了表单和事件监听器，一个代码段即可覆盖两者。
对于 Google Analytics 集成： 您的 GA4gtag 脚本必须在 Omnisend 事件监听器触发之前加载到页面上。如果gtag 在监听器运行时不存在，则 GA4 事件将不会发送。

表单事件

Omnisend 表单会在表单有活动时，在 window 对象上触发一个名为 omnisendForms 的事件。以下示例展示了事件负载

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);

表单事件类型

事件对象中的 type 字段可以是以下七种不同事件中的任何一种：

view – 当一个弹窗、flyout 或嵌入式表单首次在页面上显示时触发。
interaction – 当用户与表单交互时（例如，选择一个输入字段）触发一次。
submit – 当访客完成主要转化操作时触发一次（例如，首次电子邮件（Email）或短信（SMS）订阅）。
close – 当访问者关闭表单时触发。
stepView – 当多步表单的某个步骤显示时触发；每个表单可以触发多次。
stepInteraction – 当用户与多步表单交互时，每个步骤触发一次。
stepSubmit – 当多步表单的某个步骤提交时触发；每个表单可以触发多次。

根据您的具体跟踪需求选择事件类型。对于一般表单分析，例如在 Google Analytics 中跟踪表单提交，请使用 submit – 它每个表单只触发一次。对于多步表单，还可以使用 stepSubmit 捕获步骤数据。

步骤事件

步骤事件仅在多步表单中触发。stepSubmit 事件在每次提交步骤时触发，并且对于同一表单可以触发多次。对于多步表单，submit 事件在所有步骤完成后，每个表单触发一次。

其他事件详情

除了事件类型，事件详情对象还包含：

brandID – 在 Omnisend 中唯一标识您的品牌的字母数字 ID。
step – 事件发生的步骤。仅适用于多步表单。
form – 与表单相关的数据，包括：
- id – 唯一标识表单的字母数字 ID。
- name – 表单的名称。
- displayType – 表单显示类型（弹窗、浮出式或嵌入式）。
- versionId – 唯一标识 A/B 表单版本的字母数字 ID。
- versionName – A/B 表单版本的名称。
formValues – 所有表单字段及其提交的值，包括：emailField,firstName,lastName,phoneNumberCountryCodeField,phoneNumberField, 以及任何其他自定义表单字段。

在事件发生时执行自定义 JavaScript：事件监听器示例

以下是 Omnisend 表单事件的自定义事件监听器的标准格式。将 view 替换为上面“表单事件类型”部分中列出的任何事件类型，并将 // Custom JS 替换为事件触发时应运行的代码。

 <script>
    window.addEventListener("omnisendForms", function(e) { 
        if (e.detail.type == 'view') {
            // Custom JS
        }
    });
</script>

要在您自己的 JavaScript 代码中利用事件的时间戳，请使用 e.timeStamp。

在何处添加此脚本：

Shopify：将代码粘贴到您的主题页脚或布局文件中（例如，theme.liquid)，之前，在结束标签 标签，以便它加载在表单可能出现的每个页面上。
WordPress / WooCommerce：使用您页面编辑器中的 Custom HTML block 添加它，或者将其粘贴到您的主题页脚文件中，在。
纯 HTML: 将其粘贴到结束标签之前在表单出现的每个页面上的标签。

在表单事件上实施 Google Analytics 跟踪

使用以下代码段将每个 Omnisend 表单事件类型作为 Google Analytics (GA4) 中的事件进行跟踪。

注意：您的 GA4gtag 初始化脚本必须在此代码段运行之前加载到页面上。如果gtag 在监听器触发时不存在，则 GA4 事件将不会被记录。

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

注意：事件名称在gtag('event', ...) 调用中 – 例如，omnisend_form_submit – 可以重命名为您希望在 Google Analytics（分析）中显示的任何内容，例如newsletter_signup 或popup_completed。该名称完全由您决定。