Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Tutorial: A/B-Tests mit der Evidently-Beispielanwendung

Dieser Abschnitt enthält ein Tutorial zur Verwendung von Amazon CloudWatch Evidently für A/B-Tests. Dieses Tutorial ist die Evidently-Beispielanwendung, die eine einfache React-Anwendung ist. Die Beispiel-App wird so konfiguriert, dass sie entweder ein showDiscount-Feature anzeigt oder nicht. Wenn das Feature einem Benutzer angezeigt wird, wird der auf der Einkaufs-Website angeführte Preis mit 20 % Rabatt angezeigt.

Zusätzlich zur Anzeige des Rabatts für einige Benutzer und nicht für andere, werden Sie in diesem Tutorial Evidently einrichten, um Ladezeit-Metriken aus beiden Varianten zu sammeln.

Schritt 1: Herunterladen der Beispielanwendung

Laden Sie zunächst die Evidenty-Beispielanwendung herunter.

Schritt 2: Hinzufügen des Evidenty-Endpunkts und Einrichten der Anmeldeinformationen

Fügen Sie als Nächstes die Region und den Endpunkt für Evidently zur config.js-Datei im src-Verzeichnis im Beispiel-App-Paket hinzu, wie im folgenden Beispiel:

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

Sie müssen außerdem sicherstellen, dass die Anwendung CloudWatch Evidently aufrufen darf.

Schritt 3: Einrichten von Programmcode für die Feature-Auswertung

Wenn Sie CloudWatch Evidently verwenden, um eine Funktion zu bewerten, müssen Sie den EvaluateFeatureVorgang verwenden, um für jede Benutzersitzung nach dem Zufallsprinzip eine Funktionsvariante auszuwählen. Dieser Vorgang weist jeder Variante des Features Benutzersitzungen entsprechend den Prozentsätzen zu, die Sie im Experiment angegeben haben.

Schritt 4: Konfigurieren von Programmcode für die Experimentmetriken

Verwenden Sie für die benutzerdefinierte Metrik die Option Evidently, PutProjectEvents API um Metrikergebnisse an Evidently zu senden. Die folgenden Beispiele verdeutlichen, wie Sie die benutzerdefinierte Metrik einrichten und Versuchsdaten an Evidently senden.

Fügen Sie die folgende Funktion hinzu, um die Ladezeit der Seite zu berechnen. Verwenden Sie PutProjectEvents, um die Metrikwerte an Evidently zu senden. Fügen Sie die folgende Funktion zu into hinzu Home.tsx und rufen Sie diese Funktion innerhalb von auf: 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();
  }

So sollte die App.js-Datei nach all den Bearbeitungen aussehen, die Sie seit dem Download vorgenommen haben.

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;

Jedes Mal, wenn ein Benutzer die Beispiel-App besucht, wird eine benutzerdefinierte Metrik zur Analyse an Evidently gesendet. Evidently analysiert eine jede Metrik und zeigt Ergebnisse in Echtzeit im Evidently-Dashboard an. Das folgende Beispiel zeigt eine Metrik-Nutzlast.

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

Schritt 5: Erstellen von Projekt, Feature und Experiment

Als Nächstes erstellen Sie das Projekt, die Funktion und das Experiment in der CloudWatch Evidenly-Konsole.

Schritt 6: Starten Sie das Experiment und testen Sie es CloudWatch offensichtlich

Die letzten Schritte sind das Starten des Experiments und das Starten der Beispiel-App.

Starten Sie als Nächstes die Evidenty-Muster-App mit dem folgenden Befehl:

npm install -f && npm start

Sobald die App gestartet ist, werden Sie einer der beiden zu testenden Feature-Varianten zugewiesen. Bei einer Variante wird „20 % Rabatt“ angezeigt und bei der anderen nicht. Aktualisieren Sie die Seite weiter, um die verschiedenen Varianten zu sehen.

Fehlersuche

Wir empfehlen, npm Version 6.14.14 zu verwenden. Wenn Fehler zum Entwickeln oder Starten der Beispiel-App angezeigt werden und Sie eine andere Version von npm verwenden, gehen Sie wie folgt vor.