客户端实现提示
客户端实现提示
本主题介绍在客户端（浏览器）而不是服务器上安装 Eyeofcloud 功能实验 JavaScript 的提示和注意事项。
如果需要有关实施的帮助，请联系支持人员。
JavaScript 客户端实现的数据文件管理
数据文件是给定环境中全栈项目配置 （EyeofcloudConfig） 的 JSON 表示形式。以下各节介绍用于管理数据文件的不同选项：
将数据文件作为同步脚本标记包含在内
此方法允许将数据文件作为脚本包含在内。该脚本将定义一个全局变量window.eyeofcloudDatafile，其中包含数据文件内容。
在应用代码上方包含数据文件脚本标记，以创建新的 Eyeofcloud 客户端实例：
使用 HTML 脚本标记
<script src="https://cdn.eyeofcloud.com/datafiles/[YOUR ENVIRONMENT SDKKEY].json/tag.js"></script>在应用代码中，在创建新的 Eyeofcloud 客户端实例时引用该变量：
使用 HTML 脚本标记
<script>
var eyeofcloudClientInstance = window.eyeofcloudSdk.createInstance({
datafile: window.eyeofcloudDatafile
});
</script>| 优点 | 缺点 |
|---|---|
| - 始终使用最新的数据文件内容。 - 阻止请求;无闪烁。 | - 阻止请求引入了轻微的页面加载延迟。 |
在客户端和服务器之间同步数据文件
如果组织已在服务器端使用云眼灰度标帜(Feature Flag)AB实验 SDK，请考虑此方法。有关详细信息，请参阅多种语言。
| 优点 | 缺点 |
|---|---|
| - 缓解闪烁情况：如果数据文件内容以内联方式存在于页面源代码中，则客户端实例化不必等到 XHR 提取完成。 - 更好的性能：页面加载期间的请求更少，页面呈现速度更快（第一次有意义的绘制）。 | - 必须构建一个服务器端解决方案，用于捕获新的数据文件并将其保存到客户端。 |
将数据文件与云眼灰度实验脚本捆绑在一起
- 缓解闪烁情况：如果数据文件内容以内联方式存在于页面源代码中，则客户端实例化不必等到 XHR 提取完成。
- 更好的性能：页面加载期间的请求更少，页面呈现速度更快（第一次有意义的绘制）。
- 必须构建一个服务器端解决方案，用于捕获新的数据文件并将其保存到客户端。
将数据文件与云眼灰度标帜(Feature Flag)AB实验脚本捆绑在一起
我们建议将此方法与 XHR 和本地存储缓存方法结合使用。
在以下用例中，将数据文件与全栈脚本捆绑在一起：
- 对于脱机 Web 应用程序或使用服务辅助角色大量缓存的 Web 应用程序，需要回退。
- 组织不会执行许多正在进行的实验更新。
- 测试团队可以与客户端生成和部署团队协调实验开始。
| 优点 | 缺点 |
|---|---|
| - 数据文件在应用程序脱机时可用。 | - 无法更新数据文件内容。 - 不能将此方法用作唯一解决方案：实验更新不会传播给访问者（例如，实验暂停和其他配置）。 |
通过 XHR 获取数据文件
此方法可提供最佳的数据文件新鲜度。将此方法与本地存储数据文件缓存结合使用。
| 优点 | 缺点 |
|---|---|
| - 不需要服务器端的数据文件管理:直接从客户端到cdn.eyeofcloud.com进行获取。-始终拥有最新的数据文件内容. | - -异步:在尝试在获取数据文件的同一页上进行测试时会导致闪烁。. |
📘
注意
如果您通过XHR获取数据文件，我们建议您将数据文件的加载延迟到页面加载之后。这对于页面性能来说是理想的，因为它不会影响页面加载延迟。
使用此方法时:
- 确保在访问者会话期间使用单个数据文件实例化客户端实例。
- 将数据文件内容保存在localstorage中。
- 仅在后续页面访问或会话中，使用页面加载后获取的数据文件内容并将其缓存在localStorage中。
通过边缘侧包含(ESI)加载数据文件内容
这种方法最适合最小化页面闪烁。. 它只需要一次性的 ESI设置，不需要服务器端的数据文件管理服务。
它确实需要一个支持 ESI的 CDN 供应商, 例如 Fastly 或者 Akamai.
条件
- 页源中内联数据文件内容。
- 客户端不需要请求。
- 一次性设置。
- 在较低级别环境中可能带来挑战:ESI是CDN功能，因此在本地开发时需要解决方案来提供数据文件
使用自动数据文件管理获取数据文件
您可以实现自动数据文件管理功能来处理数据文件更新。这种方法提供了一种易于实现并具有良好数据文件新鲜度的方法。
条件
- 无需服务器端数据文件管理:直接从cdn.eyeofcloud.com获取到客户端。
- 快速实现:无需编写数据文件管理代码。
- 将始终拥有最新的数据文件内容。
- 没有影响页面加载的阻止请求。
- 异步:必须等待数据文件获取。
- 不能使用 localstorage 缓存进行快速的同步初始化。
用户标识符
要获取用户标识符(ID)，请使用以下方法之一:
- 推荐：使用来自客户端分析服务的 ID，例如 Google Analytics Client ID 或 Adobe Analytics Visitor ID。由于这些 ID 是异步生成的，首次访问的用户在第一次浏览页面时可能不会有唯一的 ID。
- 使用唯一的访客ID来使用cookie。
链接点击跟踪
云眼灰度标帜(Feature Flag)的JavaScript SDK不使用本地存储，因此不会维护一个挂起的事件队列(这是云的网页实验自动完成的)。这意味着当用户被重定向时，浏览器可能会取消一些链接点击跟踪呼叫。
-个可能的解决方案是将参数传递给后续页面URL并在该页面上触发事件。
预订词用于Eyeofcloud网络实验
如果您同时使用云眼网络实验和云之眼灰度标帜(Feature Flag)客户端，然后在 Fullstack 中避免窗口范围的变量名称中使
用保留字。这个词是专门用于网页实验的，在你的特性标(Feature Flag)帜代码中使用它会导致网页实验的问题，比如破坏可视化编辑器。
JavaScript
// name your client-side Eyeofcloud灰度标帜(Feature Flag) instance something like this:
const eyeofcloudClientInstance = eyeofcloudSDK.createInstance({ sdkKey: '<Your_SDK_Key>'});
// AVOID naming your client-side instance this:
const eyeofcloud = eyeofcloudSDK.createInstance({ sdkKey: '<Your_SDK_Key>'});