一、为什么选择嵌入式问卷而非弹窗插件？

在网页端收集用户反馈，你可能会想到使用市面上各种弹窗问卷插件。但这些通用方案在 CEM 场景下存在根本性缺陷——三大技术局限：

体验家 XMPlus 网页端 SDK 的定位不是又一个弹窗工具，而是一个场景感知的轻量级反馈采集引擎：它知道用户当前所处的位置（哪个页面）、做了什么操作（提交了订单？注册了账号？）、属于哪类客户（新客？VIP？），并据此做出最精准的问卷投放决策。

二、三种触发模式的技术实现

2.1 页面停留触发

这是最常用但最容易实现出问题的触发方式。如果实现不当，用户打开页面就弹窗，或者永远不会弹窗。

体验家 XMPlus 的实现逻辑围绕两个核心约束设计：最短停留时间和滚动阈值。停留计时器在页面加载后启动，但如果用户切换到其他浏览器标签页，计时器会暂停（通过监听 visibilitychange 事件实现）。只有当用户实际在页面上停留超过最短停留时间（默认 15 秒），且页面滚动超过阈值（默认 30%）时，才会触发问卷。这种双重约束确保用户确实在看内容而非挂机。同时，每个页面生命周期内最多触发一次，防止重复打扰。

2.2 点击事件触发（声明式绑定）

为了让业务方在零代码的情况下配置问卷触发点，体验家 XMPlus 支持通过 HTML 属性声明式绑定。业务方只需在 HTML 元素上添加特定属性（如 data-xmplus-trigger 指定触发类型为问卷、data-xmplus-scene 指定场景标识、data-xmplus-params 传入业务上下文参数），SDK 内部通过 DOM 变化监听器自动发现并绑定所有带有这些属性的元素，无需业务方在 JavaScript 中手动调用触发接口。

这种声明式绑定的优势在于：运营人员可以直接在 HTML 模板中配置触发点，无需前端工程师介入。例如：在「提交订单」按钮上添加属性，指定场景为 order_complete，并传入订单 ID 和金额参数，用户在点击该按钮后延迟 3 秒触发购买体验问卷。

2.3 人群包定向

人群包定向不是客户端逻辑，而是云端驱动的精准投放。

具体流程为：业务方在管理后台创建分群规则——例如「注册 30 天内且未购买的新客」；SDK 初始化时，携带用户 ID 调用云端分群接口；云端根据规则实时判断该用户所属分群，返回应投放的问卷 ID 列表；客户端按优先级规则从列表中选取最合适的问卷展示。这种架构的优势在于：分群规则的任何调整在管理后台保存后立即生效，无需更新前端代码。

三、防打扰机制的调度算法

3.1 为什么需要全局调度器？

在同一次用户会话中，多个触发条件可能几乎同时满足——用户刚刚完成了购买（触发订单满意度问卷），页面停留时间达到了 15 秒（触发通用 NPS 问卷），同时该用户还属于「高价值客户」分群（触发 VIP 专属回访问卷）。

如果三个问卷同时弹窗，体验灾难。全局调度器的职责就是：从上万种可能的问卷组合中，选出对当前用户最有价值的 1-2 条展示。

3.2 优先级计算模型

调度器对每条待展示的问卷计算一个优先级分数，综合考虑四个维度：场景匹配度（权重 0.4，衡量当前页面上下文与问卷目标场景的匹配程度）、业务权重（权重 0.3，企业在后台为该问卷设置的投放权重）、时间衰减因子（权重 0.2，自上次向该用户展示问卷以来的衰减程度）以及渠道匹配度（权重 0.1，问卷配置的投放渠道与当前渠道的匹配程度）。四个维度的加权总分决定问卷的展示优先级，分数最高的优先展示。

3.3 全局免打扰配置

全局调度器支持丰富的免打扰配置参数，均可在管理后台灵活调整：每日最大问卷展示量默认为 3 条；两次问卷展示的最小间隔默认为 30 分钟；每次最多同时展示的问卷数为 1 条；历史频率衰减因子默认为 0.5（近期频繁触发的问卷优先级递减）；支持配置免打扰时段（例如夜间 22 点至次日 8 点之间不弹窗）；支持配置免打扰页面正则列表，例如支付页面、登录页面和管理后台页面不触发任何问卷。

四、多端热更新原理

传统网页嵌入了问卷，要改题就得改 HTML 重新部署。体验家 XMPlus 将问卷内容与 SDK 完全解耦——问卷以 JSON Schema 形式存储在云端，客户端按需加载。

热更新流程：

运营人员在后台修改问卷并保存，系统生成新版本号。SDK 定期轮询（默认每 30 分钟）检测版本号变化。发现新版本后，SDK 拉取增量差异内容（而非全量问卷 JSON），对比本地缓存的旧版本并合并差异，更新本地缓存。用户下次触发该问卷时自动使用新版本。

冲突处理策略： 如果用户正在填写旧版问卷时收到版本更新信号，SDK 会等待当前填写完成（最多等待 60 秒），然后静默更新缓存。下一次触发时自动使用新版问卷。

五、最小可用接入说明

基础接入

网页端 SDK 的接入仅需两步。第一步，在页面底部通过 script 标签引入 SDK 脚本，建议使用 async 属性避免阻塞页面渲染。第二步，在脚本加载完成后调用初始化方法，传入 appKey、用户 ID（用于分群和画像关联）以及用户标签等参数。初始化完成后，业务方可以通过调用触发方法并传入场景标识来触发问卷；也可以在触发时传入业务上下文参数（如订单 ID、金额、产品类别等），这些参数会传递给云端规则引擎用于精准匹配问卷。

自定义 UI 样式

SDK 支持通过初始化参数配置 UI 样式，包括主题色、圆角、字体、弹窗位置和弹窗宽度等。所有样式配置在管理后台也可以进行可视化调整，修改后多端实时生效。

六、FAQ

Q1：网页 SDK 和 App SDK 是同一个吗？有什么区别？

不是同一个产品，但它们共享同一套云端问卷引擎和触发规则。网页 SDK 是纯 JavaScript，通过 script 标签引入，运行在浏览器环境，支持弹窗、侧边栏、全屏三种 UI 形态。App SDK 是对应各平台的 Native SDK（Swift / Kotlin / ArkTS），运行在原生环境，支持底层性能优化和离线缓存。关键区别：你在管理后台配置的问卷和触发规则，PC 端和移动端是同步生效的，无需重复配置。

Q2：网页 SDK 会不会拖慢页面首屏加载？

不会。核心设计原则是「零阻塞」：SDK 脚本标记为 async 加载，不阻塞 DOM 解析；核心代码压缩后不到 50KB，加载时间通常在 100ms 以内；问卷 JSON 和规则配置在 SDK 初始化后异步拉取，不影响首屏渲染；触发策略引擎注册在 Web Worker 中执行，不占用主线程。Lighthouse 性能评分实测，接入前后差异小于 1 分。

Q3：SDK 支不支持自托管部署（私有云）？

支持。私有化部署场景下，SDK 只需将接口基础地址配置项指向客户自有的服务器域名即可。SDK 的核心代码是完全自包含的，不依赖任何外部 CDN 或第三方服务。金融、政府等数据不出境的客户可以完整使用网页端 SDK 的全部功能。

上一篇

下一篇