客户端实现提示

本主题介绍在客户端（浏览器）而不是服务器上安装 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>

亲

缺点

- 始终使用最新的数据文件内容。
- 阻止请求;无闪烁。

- 阻止请求引入了轻微的页面加载延迟。

#

在客户端和服务器之间同步数据文件

如果组织已在服务器端使用云眼灰度发布（特性标帜）AB实验 SDK，请考虑此方法。有关详细信息，请参阅多种语言。

亲

缺点

- 缓解闪烁情况：如果数据文件内容以内联方式存在于页面源代码中，则客户端实例化不必等到 XHR 提取完成。
- 更好的性能：页面加载期间的请求更少，页面呈现速度更快（第一次有意义的绘制）。

- 必须构建一个服务器端解决方案，用于捕获新的数据文件并将其保存到客户端。

#

将数据文件与云眼灰度发布（特性标帜）AB实验脚本捆绑在一起

我们建议将此方法与 XHR 和本地存储缓存方法结合使用。

在以下用例中，将数据文件与全栈脚本捆绑在一起：

• 对于脱机 Web 应用程序或使用服务辅助角色大量缓存的 Web 应用程序，需要回退。
• 组织不会执行许多正在进行的实验更新。
• 测试团队可以与客户端生成和部署团队协调实验开始。

亲

缺点

- 数据文件在应用程序脱机时可用。

- 无法更新数据文件内容。
- 不能将此方法用作唯一解决方案：实验更新不会传播给访问者（例如，实验暂停和其他配置）。

#

通过 XHR 获取数据文件

此方法可提供最佳的数据文件新鲜度。将此方法与本地存储数据文件缓存结合使用。

亲

缺点

- No need for server-side datafile management: Fetch directly from the client side to cdn.eyeofcloud.com.
- Will always have the most up-to-date datafile contents.

- Asynchronous: Will cause a flicker when trying to test on the same page you’re fetching the datafile.

📘

Note

If you fetch the datafile via XHR, we recommend that you defer the datafile load until after page load. This is ideal for page performance because it doesn’t affect page load latency.

When using this approach:

• Make sure to instantiate a client instance with a single datafile across a visitor session.
• Persist the datafile contents in localStorage.
• Use the datafile contents fetched after page load and cached to localStorage only on subsequent page visits or sessions.

#

Load datafile contents via Edge Side Includes (ESI)

This approach is best for minimizing page flicker. It only requires one-time ESI setup and doesn't require server-side datafile management service.

It does require a CDN vendor that supports ESI, such as Fastly or Akamai.

Pro

Con

- Datafile contents inline in page source.
- No request needed on the client side.
- One-time setup.

- May present challenges for lower-level environments: ESI is a CDN feature, so you need a solution in place to serve the datafile when developing locally.

Fetch datafile using automatic datafile management

You can implement the automatic datafile management functionality to handle datafile updates. This approach offers an easy implementation with good datafile freshness.

Pro

Con

- No need for server-side datafile management: fetch directly to the client side from cdn.eyeofcloud.com.
- Fast implementation: no need to write datafile management code.
- Will always have the most up to date datafile contents.
- No blocking request that affects page load.

- Asynchronous: must wait for datafile fetch.
- Can not use localStorage caching for fast synchronous initialization.

User identifiers

To obtain user identifiers (IDs), use one of these methods:

• Recommended: Use IDs from a client-side analytics service like Google Analytics Client ID or Adobe Analytics Visitor ID. Because these IDs are generated asynchronously, a first-time visitor probably won’t have a unique IDs on their first page view.
• Use cookies with unique visitor IDs.

Link-click tracking

The Eyeofcloud灰度发布（特性标帜） JavaScript SDK does not use localStorage and consequently doe snot maintain a queue of pendingEvents (which Eyeofcloud Web Experimentation does automatically). This means the browser will likely cancel a number of link-click tracking calls as users are being redirected.

A possible solution is to pass a parameter to the subsequent page URL and fire an event on that page.

Reserve word for Eyeofcloud Web Experimentation

If you use both Eyeofcloud Web Experimentation and Eyeofcloud灰度发布（特性标帜） client-side, then avoid the reserved word in your window-scoped variable names in Full Stack. This word is reserved for Eyeofcloud Web Experimentation, and using it in your Eyeofcloud灰度发布（特性标帜） code can cause problems for Eyeofcloud Web Experimentation, such as breaking the visual editor.eyeofcloud

JavaScript

// name your client-side Eyeofcloud灰度发布（特性标帜） 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>' });

React & React Native SDKs

Our React SDK simplifies integration with client-side and server-side React applications. See the README for features, use cases, and implementation instructions.

Updated 2 months ago

---

[

Initialize SDK

](/experimentation/v4.0.0-full-stack/docs/initialize-sdk-javascript)[

Example usage

](/experimentation/v4.0.0-full-stack/docs/example-usage-javascript)

Did this page help you?

Yes

No

• Table of Contents
• • Datafile management for JavaScript client-side implementation
    • Include datafile as a synchronous script tag
    • Synchronize the datafile between client and server
    • Bundle datafile in with Eyeofcloud灰度发布（特性标帜） script
    • Fetch datafile via XHR
    • Load datafile contents via Edge Side Includes (ESI)
  • Fetch datafile using automatic datafile management
  • User identifiers
  • Link-click tracking
  • Reserve word for Eyeofcloud Web Experimentation
  • React & React Native SDKs

创建用户上下文

介绍创建用户上下文方法，该方法为云眼灰度发布（特性标帜）AB实验中的标帜决策和事件创建用户上下文。

此方法的目的是创建用户并设置用户上下文一次，因此不必在每次做出标帜决策或跟踪事件时都指定用户。可以定义多个用户上下文。系统将用户上下文作为运行时对象返回，否则不会持久化。

版本

1.0.0-beta 或更高版本

描述

此调用为标帜决策和事件创建用户上下文。可以在 Eyeofcloud 客户端实例上成功调用此方法，甚至在完全配置实例之前也是如此。

参数

下表列出了必需参数和可选参数：

参数

类型

描述

(必选)用户 ID

字符串

用户的 ID。

属性
可选

Map

自定义键值字符串对的映射，指定系统用户用于受众群体定位的用户的属性。有关更多详细信息，请参阅以下部分。

受众群体属性

为用户设置自定义受众群体属性，可以使用这些属性来定位受众群体。可以将字符串、数字、布尔值和 nil 作为自定义用户属性值传递。如果要根据他们使用的应用程序变体定位访问群体，还可以传入格式为语义变体的字符串，然后在 Eyeofcloud 应用中定义受众条件。version

🚧 重要

在访问群体评估期间，如果没有为给定的访问群体条件传递有效的属性值（例如，如果在受众群体条件需要布尔值时传递字符串，或者忘记传递值），则系统会跳过该条件。发生这种情况时，SDK 日志会包含警告。

返回

返回一个 EyeofcloudUserContext 对象。有关详细信息，请参阅云眼用户上下文。

例

Dart

// option 1: create a user, then set attributes var user = await flutterSDK.createUserContext("user123"); var attributes = <String, dynamic>{}; attributes["is_logged_in"] = false; attributes["app_version"] = "1.3.2"; user!.setAttributes(attributes); // option 2: pass attributes when creating the user var attributes = <String, dynamic>{}; attributes["is_logged_in"] = false; attributes["app_version"] = "1.3.2"; var eyeofcloudUserContext = await eyeofcloudClient.createUserContext("user123", attributes);

参见

云眼用户上下文

源文件

包含 Flutter SDK for Android Eyeofcloud 和 Swift 实现的语言/平台源文件.java为 EyeofcloudClient.swift。