示例用法

云眼About 2 min

示例用法

如何使用云眼灰度发布(特性标帜)AB实验 React SDK 发送决策事件、做出标帜决策和实现 Track 方法的代码示例。

先决条件

在使用客户端评估标帜规则(包括 A/B 测试和标帜传递)之前,必须:

  1. 安装 React SDK。
  2. 初始化 React SDK。

示例 React SDK 实现

此示例演示了以下每个概念的基本用法:

  1. 使用决策挂钩评估带有键的标帜。作为副作用,决策挂钩还会向云眼灰度发布(特性标帜)AB实验发送决策事件,以记录当前用户已暴露于实验。product_sort

  2. 有条件地执行特征代码。有以下几种选择:

    1. 获取启用标帜的状态,然后检查名为 的标帜上的配置变量。SDK 会评估标帜规则,并确定用户所处的标帜变体以及他们应该看到的排序方法变量。sort_method
    2. 获取标帜变体,然后运行“控制”或“处理”代码。
  3. 使用事件跟踪跟踪名为 的事件。此转化事件衡量实验的影响。使用 Track 方法,购买会自动归因于我们做出决定的正在运行的 A/B 测试,SDK 通过可自定义的事件调度程序向 Eyeofcloud 功能实验发送网络请求,以便我们可以将其计入“结果”页面purchased

示例 React SDK 实现

import React from 'react'; import { createInstance, EyeofcloudProvider, useDecision, withEyeofcloud, } from '@eyeofcloud/react-sdk' const eyeofcloud = createInstance({ sdkKey: '<Your_SDK_Key>', // TODO: Update to your SDK Key }) function Button(props) { const handleClick = () => { const { eyeofcloud } = props; eyeofcloud.track('purchased') }; return <button onClick={handleClick}>Purchase</button>; } const PurchaseButton = withEyeofcloud(Button) function ProductSort() { const [ decision ] = useDecision('product_sort'); const variationKey = decision.variationKey; const isEnabled = decision.enabled; const sortMethod = decision.variables['sort_method']; return ( <div> { /* If variation is null, display error */ } { variationKey === null && <div className="error">{ decision.reasons }</div> } { /* If feature is enabled, do something with the Sort Method variable */ } { isEnabled && <div>The Sort method is {sortMethod}</div> } { /* Show relevant component based on the variation key */ } { variationKey === 'control' && <div>Control Component</div> } { variationKey === 'treatment' && <div>Treatment Component</div> } { /* Show Purchase Button to track Purchase event */ } <PurchaseButton /> </div> ) } function App() { return ( <EyeofcloudProvider eyeofcloud={eyeofcloud} user={{ id: 'user123' }}> <ProductSort /> </EyeofcloudProvider> ); } export default App;

Last update:
Contributors: “zhangweixue”