Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Didacticiel : tests A/B avec l'exemple d'application Evidently

Cette section fournit un didacticiel sur l'utilisation d'Amazon CloudWatch Evidently pour les tests A/B. Ce tutoriel est l'exemple d'application Evidently, qui est une simple application react. L'exemple d'application sera configuré pour afficher une fonction showDiscount ou non. Lorsque la fonction est affichée à un utilisateur, le prix affiché sur le site Web d'achat affichait une réduction de 20 %.

En plus de montrer la réduction à certains utilisateurs et non à d'autres, dans ce tutoriel, vous configurez Evidently pour collecter des métriques de temps de chargement des pages à partir des deux variations.

Étape 1 : télécharger l'exemple d'application

Commencez par télécharger l'exemple d'application Evidently.

Étape 2 : ajouter le point de terminaison Evidently et configurer les informations d'identification

Ensuite, ajoutez la Région et le point de terminaison pour Evidently dans le fichier config.js du répertoire src dans l'exemple de package d'application, comme dans l'exemple suivant :

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

Vous devez également vous assurer que l'application est autorisée à appeler CloudWatch Evidently.

Étape 3 : configurer le code pour l'évaluation des fonctions

Lorsque vous utilisez CloudWatch Evidently pour évaluer une fonctionnalité, vous devez utiliser l'EvaluateFeatureopération pour sélectionner de manière aléatoire une variante de fonctionnalité pour chaque session utilisateur. Cette opération attribue des séances d'utilisateurs à chaque variation de la fonction, en fonction des pourcentages que vous avez indiqués dans l'expérience.

Étape 4 : configurer le code pour les métriques d'expérience

Pour la métrique personnalisée, utilisez Evidently PutProjectEvents API pour envoyer les résultats de la métrique à Evidently. Les exemples suivants décrivent la configuration de la métrique personnalisée et l'envoi des données d'expérience à Evidently.

Ajoutez la fonction suivante pour calculer le temps de chargement de la page et utilisez PutProjectEvents pour envoyer les valeurs de métrique à Evidently. Ajoutez la fonction suivante à into Home.tsx et appelez cette fonction dans 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();
  }

Voici à quoi devrait ressembler le fichier App.js après toutes les modifications que vous avez effectuées depuis son téléchargement.

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;

Chaque fois qu'un utilisateur visite l'application exemple, une métrique personnalisée est envoyée à Evidently pour analyse. Evidently analyse chaque métrique et affiche les résultats en temps réel sur le tableau de bord d'Evidently. L'exemple suivant illustre une charge utile de métrique :

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

Étape 5 : créer le projet, la fonction et l'expérience

Ensuite, vous créez le projet, la fonctionnalité et l'expérience dans la console CloudWatch Evidently.

Étape 6 : Commencez l'expérience et testez CloudWatch évidemment

Les dernières étapes consistent à démarrer l'expérience et à démarrer l'application exemple.

Ensuite, démarrez l'exemple d'application Evidently à l'aide de la commande suivante :

npm install -f && npm start

Une fois l'application démarrée, vous serez affecté à l'une des deux variations de fonctions testées. L'une des variations affiche « 20 % de réduction », et l'autre ne l'affiche pas. Continuez à actualiser la page pour voir les différentes variations.

Dépannage

Nous vous recommandons d'utiliser npm version 6.14.14. Si vous constatez des erreurs concernant la création ou le démarrage de l'exemple d'application et que vous utilisez une version différente de npm, procédez comme suit.