チュートリアル: Evidently のサンプルアプリケーションを使用した A/B テスト

このセクションでは、A/B テストに Amazon CloudWatch Evidently を使用するチュートリアルを提供します。このチュートリアルでは、シンプルな React アプリケーションである Evidently のサンプルアプリケーションを使用します。サンプルアプリケーションで、showDiscount 機能を表示するかどうかを設定します。ユーザーがこの機能を表示すると、ショッピングサイトで表示される価格が 20% の割引価格で表示されます。

このチュートリアルでは、一部のユーザーに割引を表示して他のユーザーには表示しなくすることに加え、両方のバリエーションからページのロード時間のメトリクスを収集するように Evidently を設定します。

ステップ 1: サンプル アプリケーションのダウンロード

まず、Evidently のサンプルアプリケーションをダウンロードします。

ステップ 2: Evidently エンドポイントの追加と認証情報の設定

次に、以下の例のように、サンプルアプリケーションのパッケージの src ディレクトリにある config.js ファイルに、Evidently の リージョンとエンドポイントを追加します。

evidently: { 
    REGION: "us-west-2",
    ENDPOINT: "https://evidently.us-west-2.amazonaws.com (https://evidently.us-west-2.amazonaws.com/)",
},

また、アプリケーションに CloudWatch を呼び出すためのアクセス許可があることを確認する必要があります。

ステップ 3: 機能評価用のコードをセットアップする

CloudWatch Evidently を使用して機能を評価する場合は、[EvaluateFeature] オペレーションを使用して、ユーザーセッションごとに機能のバリエーションをランダムに選択する必要があります。このオペレーションは、実験で指定した割合に従って、機能の各バリエーションにユーザーセッションを割り当てます。

ステップ 4: 実験メトリクスのコードのセットアップ

カスタムメトリクスの場合は、Evidently のPutProjectEvents API を使用してメトリクスの結果を Evidently に送信します。次の例では、カスタムメトリクスを設定し、実験データを Evidently に送信する方法を示しています。

以下の関数を追加してページのロード時間を計算し、PutProjectEvents を使用してメトリクスの値を Evidently に送信します。次の機能を Home.tsx に追加し、EvaluateFeature API でこの関数を呼び出します。

const getPageLoadTime = () => {
    const timeSpent = (new Date().getTime() - startTime.getTime()) * 1.000001;
    const pageLoadTimeData = `{
      "details": {
        "pageLoadTime": ${timeSpent}
      },
      "UserDetails": { "userId": "${id}", "sessionId": "${id}"}
    }`;
    const putProjectEventsRequest = {
      project: 'EvidentlySampleApp',
      events: [
        {
          timestamp: new Date(),
          type: 'aws.evidently.custom',
          data: JSON.parse(pageLoadTimeData)
        },
      ],
    };
    client.putProjectEvents(putProjectEventsRequest).promise();
  }

ダウンロード後、編集した App.js ファイルは次のようになります。

import React, { useEffect, useState } from "react";
import { BrowserRouter as Router, Switch } from "react-router-dom";
import AuthProvider from "contexts/auth";
import CommonProvider from "contexts/common";
import ProductsProvider from "contexts/products";
import CartProvider from "contexts/cart";
import CheckoutProvider from "contexts/checkout";
import RouteWrapper from "layouts/RouteWrapper";
import AuthLayout from "layouts/AuthLayout";
import CommonLayout from "layouts/CommonLayout";
import AuthPage from "pages/auth";
import HomePage from "pages/home";
import CheckoutPage from "pages/checkout";
import "assets/scss/style.scss";
import { Spinner } from 'react-bootstrap';

import Evidently from 'aws-sdk/clients/evidently';
import config from './config';

const defaultClientBuilder = (
  endpoint,
  region,
) => {
  const credentials = {
    accessKeyId: config.credential.accessKeyId,
    secretAccessKey: config.credential.secretAccessKey
  }
  return new Evidently({
    endpoint,
    region,
    credentials,
  });
};

const App = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [startTime, setStartTime] = useState(new Date());
  const [showDiscount, setShowDiscount] = useState(false);
  let client = null;
  let id = null;

  useEffect(() => {
    id = new Date().getTime().toString();
    setStartTime(new Date());
    if (client == null) {
      client = defaultClientBuilder(
        config.evidently.ENDPOINT,
        config.evidently.REGION,
      );
    }
    const evaluateFeatureRequest = {
      entityId: id,
      // Input Your feature name
      feature: 'showDiscount',
      // Input Your project name'
      project: 'EvidentlySampleApp',
    };

    // Launch
    client.evaluateFeature(evaluateFeatureRequest).promise().then(res => {
      if(res.value?.boolValue !== undefined) {
        setShowDiscount(res.value.boolValue);
      }
    });

    // Experiment
    client.evaluateFeature(evaluateFeatureRequest).promise().then(res => {
      if(res.value?.boolValue !== undefined) {
        setShowDiscount(res.value.boolValue);
      }
      getPageLoadTime()
    })

    setIsLoading(false);
  },[]);

  const getPageLoadTime = () => {
    const timeSpent = (new Date().getTime() - startTime.getTime()) * 1.000001;
    const pageLoadTimeData = `{
      "details": {
        "pageLoadTime": ${timeSpent}
      },
      "UserDetails": { "userId": "${id}", "sessionId": "${id}"}
    }`;
    const putProjectEventsRequest = {
      project: 'EvidentlySampleApp',
      events: [
        {
          timestamp: new Date(),
          type: 'aws.evidently.custom',
          data: JSON.parse(pageLoadTimeData)
        },
      ],
    };
    client.putProjectEvents(putProjectEventsRequest).promise();
  }
  return (
    !isLoading? (
    <AuthProvider>
      <CommonProvider>
        <ProductsProvider>
          <CartProvider>
            <CheckoutProvider>
              <Router>
                <Switch>
                  <RouteWrapper
                    path="/"
                    exact
                    component={() => <HomePage showDiscount={showDiscount}/>}
                    layout={CommonLayout}
                  />
                  <RouteWrapper
                    path="/checkout"
                    component={CheckoutPage}
                    layout={CommonLayout}
                  />
                  <RouteWrapper
                    path="/auth"
                    component={AuthPage}
                    layout={AuthLayout}
                  />
                </Switch>
              </Router>
            </CheckoutProvider>
          </CartProvider>
        </ProductsProvider>
      </CommonProvider>
    </AuthProvider> ) : (
      <Spinner animation="border" />
    )
  );
};

export default App;

ユーザーがサンプルアプリケーションにアクセスするたびに、カスタムメトリクスが Evidently に送信され分析されます。Evidently は各メトリクスを分析し、Evidently ダッシュボードにリアルタイムで結果を表示します。次の例で、メトリクスペイロードを示します。

[ {"timestamp": 1637368646.468, "type": "aws.evidently.custom", "data": "{\"details\":{\"pageLoadTime\":2058.002058},\"userDetails\":{\"userId\":\"1637368644430\",\"sessionId\":\"1637368644430\"}}" } ]

ステップ 5: プロジェクト、機能、実験の作成

次に、CloudWatch Evidently コンソールでプロジェクト、機能、および実験を作成します。

ステップ 6: 実験を開始し、CloudWatch Evidently をテストする

最後のステップでは、実験を開始してサンプルアプリケーションを起動します。

次に、以下のコマンドを使用して Evidently サンプルアプリケーションを起動します。

npm install -f && npm start

アプリケーションが起動すると、テストされる 2 つの機能のバリエーションのうちの 1 つに割り当てられます。1 つのバリエーションでは「20% 割引」と表示されますが、もう一方のバリエーションでは表示されていません。ページの更新を繰り返して、さまざまなバリエーションを表示します。

トラブルシューティング

npm バージョン 6.14.14 を使用することをお勧めします。サンプルアプリケーションの構築または起動に関するエラーが表示されており、別のバージョンの npm を使用している場合は、次の手順を実行します。