Tutorial: A/B testing with the Evidently sample application (Pruebas A/B con la aplicación de muestra de Evidently)

En esta sección encontrará un tutorial para utilizar Amazon CloudWatch Evidently para pruebas A/B. En este tutorial, se explica cómo usar la aplicación de muestra de Evidently, que es una aplicación de reacción simple. La aplicación de muestra se puede configurar para que muestre una característica de showDiscount o no lo haga. Cuando la característica se muestra para un usuario, el precio que se indica en el sitio web de compras aparece con un 20 % de descuento.

Además de cómo hacer para mostrar el descuento a algunos usuarios y a otros no, en este tutorial se indica cómo configurar Evidently para que recopile métricas de tiempo de carga de las páginas con ambas variaciones.

Paso 1: Descargar una aplicación de muestra

Comience descargando la aplicación de muestra de Evidently.

Paso 2: Agregar el punto de conexión de Evidently y configurar las credenciales

A continuación, agregue la región y el punto de conexión de Evidently al archivo config.js que se encuentra en el directorio src del paquete de la aplicación de muestra, como se indica en el siguiente ejemplo:

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

También debe asegurarse de que la aplicación tenga permiso para llamar a CloudWatch Evidently.

Paso 3: Configurar el código para la evaluación de la característica

Cuando utilice CloudWatch Evidently para evaluar una característica, debe utilizar la operación EvaluateFeature (Característica de evaluación) para seleccionar una variación de característica de forma aleatoria para cada sesión de usuario. Esta operación asigna sesiones de usuario a cada variación de la característica, según los porcentajes especificados en el experimento.

Paso 4: Configurar el código para las métricas del experimento

Para la métrica personalizada, utilice la API PutProjectEvents de Evidently para enviar resultados de métricas a Evidently. En los siguientes ejemplos, aprenderá a configurar la métrica personalizada y enviar datos de experimentos a Evidently.

Agregue la siguiente función para calcular el tiempo de carga de la página y utilice PutProjectEvents para enviar los valores de la métrica a Evidently. Agregue la siguiente función a Home.tsx y llame a esta función dentro de la API EvaluateFeature:

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();
  }

A continuación, se muestra cómo debe verse el archivo App.js después de todas las modificaciones que le ha realizado desde que lo descargó.

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;

Cada vez que un usuario visita la aplicación de muestra, se envía una métrica personalizada a Evidently para realizar un análisis. Evidently analiza cada métrica y muestra los resultados en tiempo real en el panel de Evidently. En el ejemplo siguiente se muestra una carga métrica:

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

Paso 5: Crear el proyecto, la característica y el experimento

A continuación, cree el proyecto, la característica y el experimento en la consola de CloudWatch Evidently.

Paso 6: Iniciar el experimento y probar CloudWatch Evidently

Los pasos finales son iniciar el experimento e iniciar la aplicación de muestra.

Luego, inicie la aplicación de muestra de Evidently con el comando siguiente:

npm install -f && npm start

Una vez que la aplicación se haya iniciado, se le asignará una de las dos variaciones de características que se están probando. Una variación mostrará un “20 % de descuento” y la otra no lo hará. Siga actualizando la página para ver las diferentes variaciones.

Solución de problemas

Le recomendamos utilizar la versión 6.14.14 de npm. Si aparece algún error sobre la creación o el inicio de la aplicación de muestra y está utilizando una versión diferente de npm, haga lo siguiente.