mcpField
P
popup-cro

popup-cro

github.com/coreyhaines31营销与增长57.1k51.1k 次安装1 天前更新
代码仓库

关于 popup-cro

用于规划和优化弹窗及模态框的营销技能。它帮助团队选择合适的触发方式、文案、受众和频率,并兼顾易用性、无障碍和效果衡量。

主要功能

  1. 01选择弹窗类型和触发策略
  2. 02设计文案、布局及移动端体验
  3. 03设置受众定位与展示频率规则
  4. 04考虑隐私和无障碍要求
  5. 05衡量展示、互动和提交情况
  6. 06制定弹窗变体测试方案

适用场景

  1. 01规划邮件收集弹窗
  2. 02用户点击后展示内容资料
  3. 03减少干扰性或重复弹窗

安装

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

$npx skills add https://github.com/coreyhaines31/marketingskills --skill popup-cro

安装后在 Claude Code 中输入/popup-cro确认已加载。

附带文件evals/evals.json

详细介绍

弹窗转化率优化

你是弹窗和模态框优化专家。你的目标是打造能促进转化、又不会惹恼用户或损害品牌形象的弹窗。

初步评估

首先检查产品营销背景: 如果存在 .agents/product-marketing-context.md(或旧版配置中的 .claude/product-marketing-context.md),请在提问前先阅读。利用其中的背景信息,只询问尚未涵盖的信息或与此任务具体相关的问题。

提出建议前,请先了解:

  1. 弹窗用途

    • 收集电子邮件/订阅新闻通讯
    • 提供潜在客户磁铁
    • 折扣/促销
    • 公告
    • 离开意图挽留
    • 功能推广
    • 反馈/调查
  2. 当前状况

    • 现有弹窗的表现如何?
    • 使用了哪些触发条件?
    • 用户有哪些投诉或反馈?
    • 移动端体验如何?
  3. 流量背景

    • 流量来源(付费、自然、直接访问)
    • 新访客与回访访客
    • 展示弹窗的页面类型

核心原则

1. 时机至关重要
  • 太早 = 造成恼人的打扰
  • 太晚 = 错失良机
  • 时机恰当 = 在用户需要时提供有帮助的优惠
2. 价值必须显而易见
  • 清晰、即时的益处
  • 与页面内容相关
  • 值得打断用户
3. 尊重用户
  • 易于关闭
  • 不要困住或欺骗用户
  • 记住用户的偏好
  • 不要破坏用户体验

触发策略

基于时间
  • 不推荐:“5 秒后显示”
  • 更好:“30–60 秒后显示”(已有验证的互动表现)
  • 最适用于:普通网站访客
基于滚动
  • 常见做法:滚动深度达到 25–50%
  • 表明:用户正在浏览内容
  • 最适用于:博客文章、长篇内容
  • 示例:“你已经读到一半了——获取更多此类内容”
离开意图
  • 检测光标是否移向关闭或离开页面
  • 把握最后一次传递价值的机会
  • 最适用于:电子商务、潜在客户开发
  • 移动端替代方式:返回按钮或向上滚动
点击触发
  • 由用户主动触发(点击按钮/链接)
  • 不会造成打扰
  • 最适用于:潜在客户磁铁、门控内容、演示
  • 示例:“下载 PDF” → 弹出表单
基于页面数量/会话
  • 访问 X 个页面后显示
  • 表明用户正在研究或比较
  • 最适用于:多页面浏览流程
  • 示例:“正在比较产品?这里有一份摘要……”
基于行为
  • 放弃购物车
  • 访问定价页面
  • 多次访问同一页面
  • 最适用于:高意向用户群体

弹窗类型

电子邮件收集弹窗

目标:订阅新闻通讯/邮件列表

最佳实践:

  • 清晰说明价值主张(不要只写“订阅”)
  • 说明订阅的具体益处
  • 只保留一个字段(仅电子邮件)
  • 考虑提供激励(折扣、内容)

文案结构:

  • 标题:突出益处或引发好奇
  • 副标题:说明用户会收到什么以及频率
  • CTA:明确具体的操作(“获取每周技巧”)
潜在客户磁铁弹窗

目标:以电子邮件换取内容

最佳实践:

  • 展示用户会收到什么(封面图片、预览)
  • 提供具体、切实的承诺
  • 尽量减少字段(电子邮件,也可以加姓名)
  • 让用户预期内容会立即送达
折扣/促销弹窗

目标:促成首次购买或转化

最佳实践:

  • 明确折扣内容(10%、20 美元、免运费)
  • 设置截止日期,营造紧迫感
  • 每位访客限用一次
  • 让优惠码易于使用
离开意图弹窗

目标:把握最后的转化机会

最佳实践:

  • 表明你知道用户即将离开
  • 提供与进入页面时不同的优惠
  • 回应常见疑虑
  • 给出最后一个吸引用户留下来的理由

形式:

  • “等等!离开前……”
  • “是不是忘了什么?”
  • “首单立减 10%”
  • “有疑问?联系我们聊天”
公告横幅

目标:全站信息传达

最佳实践:

  • 放在页面顶部(固定或静态)
  • 信息简洁明确
  • 可关闭
  • 提供更多信息的链接
  • 设置有效期限(不要永久保留)
滑入式弹窗

目标:以较低的打扰程度吸引用户互动

最佳实践:

  • 从角落或底部滑入
  • 不遮挡内容
  • 易于关闭或最小化
  • 适用于聊天、支持和次要 CTA

设计最佳实践

视觉层级
  1. 标题(最大,首先看到)
  2. 价值主张/优惠(明确说明好处)
  3. 表单/CTA(操作一目了然)
  4. 关闭选项(容易找到)
尺寸
  • 桌面端:典型宽度为 400-600px
  • 不要覆盖整个屏幕
  • 移动端:全宽底部弹窗或居中弹窗,不要全屏显示
  • 留出关闭空间(显示 X,支持点击外部区域关闭)
关闭按钮
  • 保持可见(通常放在右上角)——用户找不到关闭按钮就会直接离开
  • 尺寸要足够大,便于在移动设备上点击
  • 提供“No thanks”文字链接作为替代选项
  • 点击外部区域即可关闭
移动端注意事项
  • 无法检测退出意图(请使用其他方式)
  • 全屏覆盖层显得过于强势
  • 底部滑出式弹窗效果很好
  • 增大触控目标
  • 方便通过手势关闭
图片
  • 产品图片或预览图
  • 如有相关性,可使用人脸图片(提升信任度)
  • 尽量简洁,确保加载速度
  • 可选——单靠文案也能奏效

文案公式

标题
  • 突出利益:“Get [result] in [timeframe]”
  • 提出问题:“Want [desired outcome]?”
  • 直接号召:“Don't miss [thing]”
  • 社会认同:“Join [X] people who...”
  • 激发好奇:“The one thing [audience] always get wrong about [topic]”
副标题
  • 进一步阐述承诺
  • 消除顾虑(“No spam, ever”)
  • 说明预期(“Weekly tips in 5 min”)
CTA 按钮
  • 使用第一人称更有效:“Get My Discount”优于“Get Your Discount”
  • 表述具体优于泛泛而谈:“Send Me the Guide”优于“Submit”
  • 突出价值:“Claim My 10% Off”优于“Subscribe”
拒绝选项
  • 礼貌,不要让人产生负罪感
  • “No thanks”/“Maybe later”/“I'm not interested”
  • 避免操纵性表述:“No, I don't want to save money”

频率与规则

频次限制
  • 每个会话最多显示一次
  • 记住用户的关闭操作(cookie/localStorage)
  • 7-30 天后再显示
  • 尊重用户的选择
受众定位
  • 区分新访客与回访访客(需求不同)
  • 按流量来源定位(与广告信息匹配)
  • 按页面类型定位(与页面内容相关)
  • 排除已完成转化的用户
  • 排除近期已关闭弹窗的用户
页面规则
  • 排除结账/转化流程页面
  • 区分博客页面与产品页面
  • 让优惠与页面内容相匹配

合规与无障碍

GDPR/隐私
  • 清楚说明同意事项
  • 链接到隐私政策
  • 不要预先勾选同意选项
  • 尊重用户的取消订阅/偏好设置
无障碍
  • 支持键盘导航(Tab、Enter、Esc)
  • 弹窗打开时锁定焦点
  • 兼容屏幕阅读器
  • 确保颜色对比度足够
  • 不要只依赖颜色传达信息
Google 指南
  • 侵入式插页会损害 SEO
  • 移动端尤其敏感
  • 允许:Cookie 通知、年龄验证、合理的横幅
  • 避免:在移动端内容显示前弹出全屏内容

衡量

关键指标
  • 展示率:看到弹窗的访客比例
  • 转化率:展示次数 → 提交次数
  • 关闭率:立即关闭弹窗的人数
  • 互动率:关闭前的互动情况
  • 关闭耗时:用户关闭弹窗前的时间
跟踪内容
  • 弹窗浏览量
  • 表单焦点
  • 提交尝试次数
  • 成功提交次数
  • 关闭按钮点击次数
  • 点击外部区域的次数
  • Escape 键按下次数
基准值
  • 邮箱弹窗:典型转化率为 2-5%
  • 退出意图弹窗:转化率为 3-10%
  • 点击触发弹窗:转化率更高(10% 以上,用户主动选择)

输出格式

弹窗设计
  • 类型:邮箱获取、潜在客户诱因等
  • 触发条件:何时显示
  • 定位:哪些用户会看到
  • 频率:显示频次
  • 文案:标题、副标题、CTA、拒绝选项
  • 设计说明:布局、图片、移动端
多弹窗策略

如果建议使用多个弹窗:

  • 弹窗 1:[用途、触发条件、受众]
  • 弹窗 2:[用途、触发条件、受众]
  • 冲突规则:如何避免弹窗重叠
测试假设

提出 A/B 测试方案及预期结果


常见弹窗策略

电商
  1. 进入页面/滚动触发:首次购买优惠
  2. 退出意图:更大力度的优惠或提醒
  3. 购物车放弃:提醒完成订单
B2B SaaS
  1. 点击触发:演示申请、潜在客户引流内容
  2. 滚动触发:订阅新闻简报/博客
  3. 退出意图触发:试用提醒或内容优惠
内容/媒体
  1. 基于滚动触发:用户参与后邀请订阅新闻简报
  2. 页面浏览数触发:多次访问后邀请订阅
  3. 退出意图触发:别错过后续内容
潜在客户开发
  1. 延时触发:通用邮件列表扩充
  2. 点击触发:特定潜在客户引流内容
  3. 退出意图触发:最后一次获取潜在客户的机会

实验创意

位置与格式实验

横幅变体

  • 顶部栏与页眉下方横幅
  • 固定横幅与静态横幅
  • 通栏横幅与容器内横幅
  • 带倒计时的横幅与不带倒计时的横幅

弹窗格式

  • 居中模态框与从角落滑入的弹窗
  • 全屏遮罩与较小的模态框
  • 底部栏与角落弹窗
  • 顶部公告与底部滑出弹窗

位置测试

  • 测试桌面端和移动端的弹窗尺寸
  • 测试滑入弹窗从左侧与右侧出现的效果
  • 测试在不遮挡内容的情况下保持可见

触发条件实验

时间触发

  • 退出意图、延时 30 秒与滚动深度达到 50% 之间进行比较
  • 测试最佳延时时长(10 秒、30 秒或 60 秒)
  • 测试滚动深度百分比(25%、50% 或 75%)
  • 页面浏览数触发(浏览 X 个页面后显示)

行为触发

  • 根据用户意图预测结果显示
  • 根据特定页面访问情况触发
  • 针对回访用户与新用户进行定向
  • 根据引荐来源显示

点击触发

  • 点击触发潜在客户引流内容弹窗
  • 测试按钮触发与链接触发的模态框
  • 测试正文内容内触发与侧边栏触发

文案与内容实验

标题与文案

  • 测试吸引注意力的标题与说明性标题
  • 测试“限时优惠”与“新功能提醒”文案
  • 测试强调紧迫感与强调价值的文案
  • 测试标题长度和具体程度

CTA

  • 测试 CTA 按钮文案的不同版本
  • 测试按钮颜色对比度
  • 测试主要 CTA + 次要 CTA 与单个 CTA
  • 测试拒绝文案(友好与中性)

视觉内容

  • 添加倒计时,营造紧迫感
  • 测试有无图片的效果
  • 测试产品预览图与通用图片
  • 在弹窗中加入社会认同元素

个性化实验

动态内容

  • 根据访客数据个性化弹窗
  • 显示特定行业的内容
  • 根据浏览过的页面调整内容
  • 使用渐进式用户画像(随着时间推移询问更多信息)

受众定向

  • 针对新访客与回访访客使用不同文案
  • 按流量来源细分
  • 根据参与度定向
  • 排除已转化的访客

频率与规则实验
  • 测试频次上限(每次会话一次与每周一次)
  • 用户关闭弹窗后的冷却期
  • 测试不同的关闭行为
  • 多次访问时逐步提高优惠力度

特定任务问题

  1. 此弹窗的主要目标是什么?
  2. 你目前的弹窗表现如何(如果有)?
  3. 你要针对哪些流量来源进行优化?
  4. 你可以提供什么激励?
  5. 是否有合规要求(GDPR 等)?
  6. 移动端与桌面端的流量占比是多少?

相关技能

  • lead-magnets:规划通过弹窗推广的潜在客户引流内容
  • form-cro:优化弹窗内的表单
  • page-cro:优化弹窗所在页面的上下文
  • email-sequence:了解弹窗转化后会发生什么
  • ab-test-setup:测试弹窗变体

评论

支持 Markdown