跳转到主要内容

为弹窗和浮出表单设置自定义触发器

了解如何使用自定义触发条件(Trigger)用于您的 Omnisend 订阅表单(Signup Form)

作者:Ira
更新于今天

Custom Triggers 在 Omnisend 中让您仅当您的网站上发生特定操作时(例如按钮点击或自定义事件)显示弹窗或浮出表单。

不再依赖时间延迟或滚动深度,您可以控制您的表单出现的精确时刻,在客户旅程中最相关的时刻捕获潜在客户。


开始之前

  • 自定义触发条件(Trigger)覆盖所有显示和定位设置。表单只会在您的自定义代码触发时出现,无论时间延迟、滚动百分比、退出意图、URL 定位或受众筛选器如何。

    • 要添加条件定位(例如,仅在特定页面或向已登录用户显示),您需要自行添加自定义 JavaScript。

  • 支持的表单:弹窗表单和浮出表单不带预告。

  • 不支持的表单:落地页表单和嵌入式表单。

什么是自定义触发条件(Trigger)?

当您的网站上发生预定义操作时,自定义触发条件(Trigger) 会显示表单,例如:

  • 按钮点击 (例如:“Join our mailing list”,“Get discount”)

  • 自定义 JavaScript 事件(例如:测验完成、游戏互动)

  • 购物车关闭操作 (例如,当客户关闭购物车时显示表单)

自定义触发条件(Trigger)让您在恰到好处的时机显示表单,当您的访客最投入时。无论是测验、游戏,还是点击按钮之后,您都可以创建高度互动的体验,使其既个性化又及时。

自定义触发条件(Trigger)代码示例

window.omnisend = window.omnisend || []; 
window.omnisend.push(['openForm', '658c3b55768232c9e85d0453']);

唯一的表单 ID (本例中为 658c3b55768232c9e85d0453) 在 Omnisend 中创建表单时会自动生成。无需手动替换,因为每个表单都将拥有其独有的标识符。

设置流程

步骤 1. 确认 Omnisend JavaScript Snippet 已安装

要使自定义触发条件(Trigger)生效,主要的 Omnisend JavaScript snippet 必须安装在您的网站上。自定义触发条件(Trigger)代码依赖于此代码片段来加载并显示表单。

  • BigCommerce 和 WooCommerce - 当您连接您的店铺时,Omnisend 代码片段会自动添加。无需手动设置。

  • Shopify:前往Shopify Admin 在线店铺 主题 → 点击Edit Theme 在您的活动主题上 → 在左侧边栏中,点击App Embeds → 查找Omnisend 并将其切换ON(蓝色)→ 点击保存

  • 自定义电子商务平台:添加 OmnisendJavaScript 代码段 手动添加到您的网站的 部分或在结束之前 标签。从...获取代码片段店铺设置 集成在您的 Omnisend 账户中。

步骤 2.创建您的表单

首先在 Omnisend 中设计您的弹窗或浮动表单。创建后,前往表单编辑器中的Behavior Settings部分。

步骤 3.将显示设置为“自定义触发条件(Trigger)”

Behavior SettingsDisplay 中,选择 自定义触发条件(Trigger) 选项。这意味着表单将仅在您的网站上激活自定义触发条件(Trigger)时出现。

注意:一旦您选择自定义触发条件(Trigger),所有其他显示选项(时间延迟、滚动深度、退出意图、URL 定位、受众筛选器)将被禁用。

步骤 4.复制触发条件(Trigger)代码

自定义触发条件(Trigger) 部分,复制 Omnisend 生成的代码片段。

示例代码:

window.omnisend = window.omnisend || [];  window.omnisend.push(['openForm', '658c3b55768232c9e85d0453']);

注意:Form ID (658c3b55768232c9e85d0453) 对您的表单来说是唯一的,并且是自动生成的。

步骤 5.在您的网站上插入触发条件(Trigger)代码

将代码放置在您的网站上,您希望表单出现的元素或事件中。这可以是一个按钮点击、页面加载或任何其他自定义操作。

代码应放置在哪里?

  • 按钮或链接代码:添加到您希望可点击的触发条件(Trigger)出现的任何位置(页眉、产品页面、博客文章、页脚)。

  • JavaScript 函数 (openOmnisendForm()):在这些位置之一,每页添加一次。

    • 主题页脚文件;

    • HTML 小部件或自定义 HTML 块;

    • 按钮后的内联(在

Omnisend 中自定义触发条件(Trigger)的用例

按钮触发的表单

当用户点击按钮时,触发表单。适用于:

  • 注册流程 – “加入我们的联系人名单”按钮显示一个订阅表单(Signup Form)。

  • 折扣优惠 – "Get Discount" 按钮显示一个促销表单,其中包含一个折扣码。

  • 内容解锁 – 通过表单提供电子书、网络研讨会或独家文章。

到货通知

当客户点击缺货的 产品 时,触发条件(Trigger)一个表单。这使得他们能够注册补货提醒,捕获潜在客户,并营造期待。

注意:您需要自己创建按钮代码 – Omnisend 提供触发条件(Trigger)代码,而不是按钮 HTML。

互动问答或游戏

在用户完成测验或与游戏互动后显示表单。例如:

  • 在测验问题之后,收集用于比赛报名的电子邮件(Email)地址。

  • 在参与游戏后提供特别折扣。

示例:在 Shopify 中添加 "Subscribe Now" 按钮

请按照以下步骤,将立即订阅按钮添加到您的 Shopify 店铺,以打开 Omnisend 表单。

⚠️ 如果您不熟悉自定义 Shopify 主题,请与开发人员合作以安全地实施这些更改。

步骤 1. 访问 Shopify Admin。

登录您的 Shopify 管理面板。在左侧菜单中,点击 Online StoreThemes

步骤 2. 编辑您的主题。

在“主题”部分,找到您的活动主题,然后点击 “Actions”“Edit Code”

步骤 3. 查找所需的页面或部分

  • 决定您要将按钮放置在哪里。这可能位于您的主页、某个特定的产品页面或页脚。

  • 查找相应的 Liquid file。常见选项包括:

    • 主页的 index.liquid

    • product.liquid 用于产品页面。

    • footer.liquid,用于将其添加到网站页脚。

步骤 4. 插入按钮代码

  • 在您选择的 Liquid 文件中,找到您想要添加按钮的确切位置。例如,在 index.liquidproduct.liquid 文件中。

  • 复制并粘贴 Omnisend 提供的代码到您的弹窗/浮出表单中。

  • 这将创建一个“Subscribe Now”按钮,点击后会打开 Omnisend 表单。

注意:您需要自行创建按钮代码 – Omnisend 提供触发条件(Trigger)代码,而不是按钮 HTML。

步骤 5. 保存您的更改并测试按钮

  • 代码插入后,点击编辑器右上角的"Save"

  • 访问您的 Shopify 店铺,并前往您添加按钮的页面。

  • 点击“Subscribe Now”按钮,以确保它能打开 Omnisend 表单。

测试和故障排除

  • 测试表单触发条件(Trigger). 嵌入代码后,访问您的店铺并执行触发条件(Trigger)操作(例如,点击按钮),以确保表单正确显示。

  • 检查控制台日志 – 如果表单没有出现,打开您的浏览器控制台 (右键点击 → Inspect) 并检查错误。

    • 如果您看到 omnisend is not defined,请验证 Omnisend JavaScript 代码段是否已安装(步骤 1)。

    • 如果您看到 openForm is not a function,请检查 Form ID 是否正确并且表单已发布。

常见问题

为什么我的自定义触发条件(Trigger)表单在我添加代码后没有显示?

首先,请确认:

  1. 您的表单已 启用 在 Omnisend 中 (Forms → Select form → Toggle Enable)。

  2. Omnisend JavaScript snippet 已安装在您的网站上(对于 Shopify,请在 Themes → App Embeds 下启用 Omnisend 应用嵌入)。

  3. 您将代码粘贴在

  4. 在无痕窗口中测试,以排除浏览器缓存或 cookie 同意许可拦截器。


表单之前可以正常工作,但现在不显示了。发生什么事了?

如果您的自定义触发条件(Trigger)正在运行,但突然停止了,请检查:

  1. Cookie 同意许可阻止器:如果您最近添加了一个 Cookie 同意许可横幅,它可能会阻止 Omnisend 脚本,直到访客接受 Cookie。请在接受所有 Cookie 后,在隐身模式下进行测试。

  2. 表单状态:验证表单是否仍然已启用 在 Omnisend 中 (Forms → Your form → Check toggle at top)

  3. 主题更新:如果您更新了您的 Shopify 主题,代码可能已被移除。请将其重新添加到您的主题文件中。

  4. 浏览器控制台错误:右键点击 → 检查并查看 Console 选项卡,查找可能阻止表单的 JavaScript 错误。


如果您在使用此功能或任何其他 Omnisend 功能时遇到任何挑战,请随时通过 [email protected] 或应用内聊天联系我们。我们24/7全天候为您服务!

这是否解答了您的问题?