mcpField
E
exit-intent-popups

exit-intent-popups

github.com/finsilabs营销与增长6078 次安装5 天前更新
代码仓库

关于 exit-intent-popups

这项实用技能指导电商团队在常见平台及自定义店铺中设置离站意图弹窗,涵盖访客定向、优惠、集成与测试。

主要功能

  1. 01按平台配置弹窗
  2. 02离站检测与访客定向
  3. 03优惠与 A/B 测试指南
  4. 04频次限制与同意规范
  5. 05自定义 JavaScript 实现

适用场景

  1. 01访客离开前收集邮箱
  2. 02向新访客提供折扣
  3. 03提醒购物车遗弃者
  4. 04比较不同弹窗优惠

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/finsilabs/awesome-ecommerce-skills --skill exit-intent-popups

安装后在 Claude Code 中输入/exit-intent-popups确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

tile.json
evals/a-b-testing-holdout-group-and-promo-code/
criteria.json
task.md
evals/exit-intent-detection-module/
criteria.json
task.md
evals/targeting-rules-frequency-capping-and-gd/
criteria.json
task.md

详细介绍

离站意图弹窗

概述

离站意图弹窗会检测访客即将离开的情况——在桌面设备上追踪鼠标快速移向浏览器地址栏的动作——并展示有针对性的优惠。若配置了适当的受众定位和展示频率限制,可挽回 5–10% 原本会流失的访客。专用弹窗应用会处理所有检测逻辑、A/B 测试和 ESP 集成,无需编写自定义代码。

何时使用此技能

  • 网站跳出率高于 60%,且转化率低于 2% 时
  • 在访客浏览期间收集电子邮件地址,添加到营销名单时
  • 向尚未转化的新访客提供首次购买折扣时
  • 在结账流程中途放弃的访客离开前,提醒他们购物车中的商品时
  • 对弹窗优惠类型进行 A/B 测试时(折扣百分比 vs. 免运费 vs. 免费赠品)

核心说明

步骤 1:选择合适的弹窗工具
平台推荐工具原因
ShopifyKlaviyo Forms(免费,可同步到 Klaviyo)或 Privy($30/月)Klaviyo Forms 可直接集成 Klaviyo 工作流;Privy 提供 A/B 测试、唯一优惠码和详细分析
WooCommerceOptinMonster($9/月)或 Popup Maker(免费)OptinMonster 具备离站意图检测、A/B 测试和 WooCommerce 集成功能;Popup Maker 更简单且免费
BigCommerceJustuno 或 Klaviyo Forms两者都提供原生 BigCommerce 集成和离站意图检测
自定义 / 无头架构Klaviyo Forms(通过 JavaScript 嵌入)或自定义实现Klaviyo Forms 通过 JavaScript 代码片段即可在任何网站上使用
步骤 2:配置离站意图检测和受众定位

大多数弹窗工具都内置了离站意图检测。关键在于正确配置,以免打扰访客。


使用 Klaviyo Forms 的 Shopify
  1. 在 Klaviyo 中,前往 Sign-up Forms → Create Form
  2. 选择 Popup 作为表单类型
  3. 在 Targeting 下设置:
    • Display when:离站意图(鼠标移向浏览器顶部时)
    • Delay:至少停留 5 秒后再激活
    • Frequency:每 14 天展示一次(Klaviyo 通过 cookie 管理此设置)
  4. 在 Targeting → Conditions 下添加:
    • 仅在以下页面展示:首页、商品页面、商品系列页面
    • 不要在以下页面展示:/checkout、/cart、/account
    • 不要向以下用户展示:现有订阅者(Klaviyo 会自动检查已识别的用户档案)
  5. 在 Form Content 下设置优惠内容:
    • 收集电子邮件:输入“首次下单立享 10% 折扣” + 电子邮件输入框 + GDPR 同意复选框
    • 提醒购物车:输入“您的购物车中有商品——完成购买” + 返回购物车的链接
  6. 在 Success Action 下创建折扣码:
    • 连接到 Shopify → Discounts——Klaviyo 可以自动创建唯一的一次性 10% 折扣码
    • 这些折扣码会显示在成功消息中,并自动同步到订阅者的用户档案

使用 Privy 的 Shopify
  1. 从 Shopify App Store 安装 Privy
  2. 前往 Privy → Displays → New Display → Popup
  3. 在 When to show 下,选择“Exit intent”
  4. 在 Who to show it to 下,进行以下配置:
    • 仅面向新访客(对已登录客户隐藏)
    • 网站停留时间至少 30 秒
    • 不在结账流程中展示
    • 展示频率限制:14 天
  5. 在 Offers 下,Privy 会自动生成唯一优惠码,并同步到 Shopify 的折扣系统
  6. 在 Integrations 下将 Privy 连接到 Klaviyo 或 Mailchimp,以自动同步名单

使用 OptinMonster 配合 WooCommerce
  1. 从 WordPress 目录安装 OptinMonster 插件
  2. 创建新营销活动:弹窗 → 退出意图
  3. 在 显示规则 下配置:
    • 退出意图触发条件:灵敏度 = 中
    • 页面停留时间:至少 30 秒
    • 页面定位:包含首页、商店、产品页面;排除结账、购物车、我的账户
    • 频率:使用 Cookie 抑制 14 天(OptinMonster 默认设置)
  4. 在 集成 下连接 Mailchimp、Klaviyo 或你的电子邮件服务提供商
  5. 如需使用唯一优惠券代码:通过 WooCommerce → 优惠券创建优惠券,然后在成功消息中显示代码(OptinMonster 免费套餐不会自动生成唯一代码)

使用 Justuno 配合 BigCommerce
  1. 从 BigCommerce App Marketplace 安装 Justuno
  2. 前往 Justuno → 促销活动 → 新建弹窗
  3. 通过可视化编辑器配置退出意图触发条件、定位规则和 A/B 测试变体
  4. Justuno 可与 Klaviyo 和 Mailchimp 集成以同步名单

自定义 / 无头架构

对于自定义构建,Klaviyo Forms 可在任何网站上使用:

  1. 将 Klaviyo JavaScript 代码片段添加到你的网站
  2. 前往 Klaviyo → 注册表单 → 创建表单,并按上述说明进行配置
  3. Klaviyo 会处理退出检测、频率限制和名单同步

如果你需要完全控制弹窗行为(自定义退出检测逻辑):

function initExitIntent({ threshold = 20, delay = 5000, onExitIntent }) {
  let activated = false;

  setTimeout(() => {
    document.addEventListener('mouseleave', (e) => {
      if (e.clientY <= 0 && !activated) {
        activated = true;
        onExitIntent();
      }
    });
  }, delay);

  // Mobile: use visibilitychange instead of mouseleave
  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden' && !activated) {
      activated = true;
      onExitIntent();
    }
  });
}

// Check frequency cap using localStorage
function shouldShowPopup(popupId, capDays = 14) {
  const lastSeen = localStorage.getItem(`popup_seen_${popupId}`);
  if (!lastSeen) return true;
  return (Date.now() - parseInt(lastSeen)) > capDays * 86400000;
}
第 3 步:配置优惠并进行 A/B 测试

最值得测试的是优惠类型。每次只运行一项 A/B 测试:

优惠类型适用场景典型电子邮件捕获率
首单 9 折综合商品占弹窗展示量的 3–8%
免运费高客单价商店(运费较贵)占弹窗展示量的 4–9%
购买即赠礼品美妆、膳食补充剂占弹窗展示量的 5–10%
内容优惠(“下载我们的指南”)提供内容的 B2C 品牌2–5%

在 Klaviyo/Privy 中:创建两个优惠不同的表单变体,将流量各分配 50%,并在 2 周内衡量转化率,再选出优胜方案。

第 4 步:生成唯一折扣代码(而非通用代码)

WELCOME10 这类通用代码会被分享到优惠券网站上,导致归因数据虚高:

  • Shopify + Klaviyo:Klaviyo 会自动生成仅限单次使用的 Shopify 唯一折扣代码 — 在表单的成功操作设置中启用此功能
  • Shopify + Privy:Privy 可连接到 Shopify 的折扣系统并自动生成唯一代码
  • WooCommerce:使用 WooCommerce Unique Coupon Generator 插件,或创建带有每位客户使用次数限制的通用代码

最佳实践

  • 始终设置对照组/留出组(20–30%)— 没有留出组,你就无法判断弹窗是否带来了额外价值,还是仅仅捕获了本来就会发生的转化(大多数弹窗应用都支持此功能)
  • 至少延迟 5 秒再启用 — 立即弹出的窗口会让访客养成立即关闭而不阅读的习惯
  • 将频率限制设为至少 14 天 — 所有主流弹窗应用都会自动通过 Cookie 处理此设置;请确认该功能已启用
  • 切勿预先勾选电子邮件同意复选框 — GDPR 要求明确选择加入;在欧盟,预先勾选的复选框不构成有效同意
  • 生成唯一的一次性代码 — 通用代码(WELCOME10)会被分享到优惠券网站上
  • 排除已订阅的访客 — Klaviyo 会自动检查;对于其他工具,可通过 Cookie 抑制

常见问题

问题解决方案
页面加载后立即弹出窗口在定向设置中同时设置至少 5 秒的延迟,以及至少 20% 的滚动深度
每次访问时都向同一用户显示弹出窗口确认弹出窗口应用已启用频次限制(Klaviyo:14 天;Privy:可配置;OptinMonster:可配置)
在移动设备上触发退出意图对移动设备改用基于滚动或时间的触发方式;选择退出意图时,大多数工具会自动这样处理
无法衡量弹出窗口是否有助于转化在弹出窗口应用中启用包含对照组的 A/B 测试;大多数应用都原生支持此功能
因弹出窗口导致的退订率较高优惠不够吸引人;测试免费配送与折扣百分比;同时检查注册后邮件的发送频率是否过高

相关技能

  • @cart-abandonment-recovery
  • @email-marketing-automation
  • @conversion-rate-optimization
  • @push-notifications
  • @first-party-data-collection

评论

支持 Markdown