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.
Warnung
Für dieses Szenario sind IAM Benutzer mit programmatischem Zugriff und langfristigen Anmeldeinformationen erforderlich, was ein Sicherheitsrisiko darstellt. Um dieses Risiko zu minimieren, empfehlen wir, diesen Benutzern nur die Berechtigungen zu gewähren, die sie für die Ausführung der Aufgabe benötigen, und diese Benutzer zu entfernen, wenn sie nicht mehr benötigt werden. Die Zugriffsschlüssel können bei Bedarf aktualisiert werden. Weitere Informationen finden Sie im IAMBenutzerhandbuch unter Aktualisieren von Zugriffsschlüsseln.
Schritt 1: Herunterladen der Beispielanwendung
Laden Sie zunächst die Evidenty-Beispielanwendung herunter.
So laden Sie die Beispielanwendung herunter
Laden Sie die Baiespielanwendung aus dem folgenden Amazon-S3-Bucket herunter:
https://evidently-sample-application.s3.us-west-2.amazonaws.com/evidently-sample-shopping-app.zip
Entpacken Sie das Paket.
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.
So erteilen Sie der Beispiel-App Berechtigungen zum Aufrufen von Evidently
Verbinde dich mit deinem AWS Konto.
Erstellen Sie einen IAM Benutzer und hängen Sie die AmazonCloudWatchEvidentlyFullAccessRichtlinie an diesen Benutzer an.
Notieren Sie sich die Zugriffsschlüssel-ID und den geheimen Zugriffsschlüssel des IAM Benutzers, da Sie sie im nächsten Schritt benötigen.
Geben Sie in dieselbe
config.js
-Datei, die Sie zuvor in diesem Abschnitt geändert haben, die Werte der Zugriffsschlüssel-ID und des geheimen Zugriffsschlüssels ein, wie im folgenden Beispiel:credential: { accessKeyId: "
Access key ID
", secretAccessKey: "Secret key
" }Wichtig
Wir verwenden diesen Schritt, um die Beispiel-App so einfach wie möglich zu gestalten, damit Sie es ausprobieren können. Wir empfehlen nicht, dass Sie Ihre IAM Benutzeranmeldeinformationen in Ihre eigentliche Produktionsanwendung eingeben. Stattdessen empfehlen wir die Verwendung von Amazon Cognito zur Authentifizierung. Weitere Informationen finden Sie unter Integration von Amazon Cognito mit Web- und mobilen Apps.
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.
Den Programmcode für die Feature-Auswertung bei der Demo-App einrichten
Fügen Sie den Client Builder in der
src/App.jsx
-Datei hinzu, damit die Beispiel-App Evidently aufrufen kann.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, }); };
Fügen Sie dem
const App
-Codeabschnitt Folgendes hinzu, um den Client zu initiieren.if (client == null) { client = defaultClientBuilder( config.evidently.ENDPOINT, config.evidently.REGION, );
Konstruieren Sie
evaluateFeatureRequest
, indem Sie den folgenden Code hinzufügen. Dieser Code füllt den Projektnamen und den Feature-Namen, die wir später in diesem Tutorial empfehlen, vorab aus. Sie können sie durch Ihre eigenen Projekt- und Feature-Namen ersetzen, solange Sie diese Projekt- und Feature-Namen auch in der Evidenty-Konsole festlegen.const evaluateFeatureRequest = { entityId: id, // Input Your feature name feature: 'showDiscount', // Input Your project name' project: 'EvidentlySampleApp', };
Fügen Sie den Code hinzu, der Evidently zur Feature-Auswertung aufrufen soll. Wenn die Anfrage gesendet wird, weist Evidently die Benutzersitzung nach dem Zufallsprinzip zu, um das
showDiscount
-Feature entweder zu sehen oder nicht.client.evaluateFeature(evaluateFeatureRequest).promise().then(res => { if(res.value?.boolValue !== undefined) { setShowDiscount(res.value.boolValue); } getPageLoadTime() })
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.
Projekt, Feature und Experiment für dieses Tutorial erstellen
Öffnen Sie die CloudWatch Konsole unter. https://console.aws.amazon.com/cloudwatch/
Wählen Sie im Navigationsbereich Application Signals, Evidently aus.
Wählen Sie Create project (Projekt erstellen) aus und füllen Sie die Felder aus. Sie müssen
EvidentlySampleApp
für den Projektnamen verwenden, damit das Beispiel ordnungsgemäß funktioniert. Wählen Sie für Evaluation event storage (Speicherung von Auswertungsereignissen) Don‘t store Evaluation Events (Auswertungsereignisse nicht speichern) aus.Nachdem Sie die Felder ausgefüllt haben, wählen Sie Create Project (Projekt erstellen) aus.
Weitere Details finden Sie unter Erstellen eines neuen Projekts.
Erstellen Sie nach der Erstellung des Projekts eines Features in diesem Projekt. Nennen Sie das Feature
showDiscount
. Erstellen Sie in diesem Feature zwei Varianten des TypsBoolean
. Nennen Sie die erste Variantedisable
mit einem Wert vonFalse
und die zweite Varianteenable
mit einem Wert vonTrue
.Weitere Informationen zum Erstellen eines Features finden Sie unter Hinzufügen eines Features zu einem Projekt.
Nachdem Sie mit dem Erstellen des Features fertig sind, erstellen Sie ein Experiment im Projekt. Nennen Sie das Experiment
pageLoadTime
.Dieses Experiment verwendet eine benutzerdefinierte Metrik namens
pageLoadTime
, die die Seitenladezeit der zu testenden Seite misst. Benutzerdefinierte Metriken für Experimente werden mit Amazon erstellt EventBridge. Weitere Informationen zu EventBridge finden Sie unter Was ist Amazon EventBridge? .Um diese benutzerdefinierte Metrik zu erstellen, gehen Sie beim Erstellen des Experiments wie folgt vor:
Wählen Sie unter Metrics (Metriken) bei Metric source (Metrikquelle) die Option Custom metrics (Eigene Metriken) aus.
Geben Sie bei Metric name den Metriknamen
pageLoadTime
ein.Wählen Sie für Goal (Ziel) die Option Decrease (Verringern) aus. Das bedeutet: Ein geringer Wert für diese Metrik kennzeichnet die beste Variante des Features.
Geben Sie unter Metric rule (Metrikregel) Folgendes ein:
Bei Entity ID (Entitäts-ID) geben Sie
UserDetails.userId
ein.Bei Value key (Werteschlüssel) geben Sie
details.pageLoadTime
ein.Bei Unit (Einheit) geben Sie
ms
ein.
Wählen Sie Add metric (Metrik hinzufügen) aus.
Wählen Sie bei Audiences (Zielgruppen) 100% aus, damit alle Benutzer am Experiment teilnehmen. Teilen Sie den Datenverkehr zwischen den Varianten auf jeweils 50 % auf.
Um das Experiment zu erstellen, wählen Sie dann Create Experiment (Experiment erstellen) aus. Nach der Erstellung beginnt es erst, wenn Sie Evidently dazu auffordern, es zu starten.
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.
Das Experiment aus dem Tutorial starten
Öffnen Sie die CloudWatch Konsole unter. https://console.aws.amazon.com/cloudwatch/
Wählen Sie im Navigationsbereich Application Signals, Evidently aus.
Wählen Sie das EvidentlySampleAppProjekt aus.
Wechseln Sie zur Registerkarte Experiments (Experimente).
Klicken Sie auf die Schaltfläche neben pageLoadTimeund wählen Sie Aktionen, Experiment starten.
Wählen Sie einen Zeitpunkt, an dem das Experiment beendet werden soll.
Wählen Sie Start Experiment (Experiment starten) aus.
Das Experiment beginnt sofort.
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.
Anmerkung
Evidently hat Sticky-Auswertungen. Feature-Auswertung sind deterministisch, d. h. für dieselbe entityId
und die Funktion erhält ein Benutzer immer dieselbe Variationszuweisung. Die Zeitvariationszuweisungen ändern sich nur dann, wenn eine Entität zu einer Überschreibung hinzugefügt wird oder der Versuchsverkehr gewählt wird.
Um Ihnen jedoch die Verwendung des Muster-App-Tutorials zu erleichtern, weist Evidently die Feature-Auswertung der Muster-App jedes Mal neu zu, wenn Sie die Seite aktualisieren, sodass Sie beide Varianten erleben können, ohne Überschreibungen hinzufügen zu müssen.
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.
So installieren Sie die npm
-Version 6.14.14
Verwenden Sie einen Browser, um eine Verbindung mit https://nodejs.org/download/release/v14.17.5/
herzustellen. Laden Sie node-v14.17.5.pkg
herunter und führen Sie dieses Paket aus, um npm zu installieren. Wenn Sie einen
webpack not found
-Fehler sehen, navigieren Sie zumevidently-sample-shopping-app
-Ordner und versuchen Sie Folgendes:Löschen Sie
package-lock.json
Löschen Sie
yarn-lock.json
Löschen Sie
node_modules
Löschen Sie die Webpack-Abhängigkeit aus
package.json
Führen Sie Folgendes aus:
npm install -f && npm