Tutoriel : Exécuter des expériences avec des indicateurs de fonctionnalités de variantes (préversion)

L’exécution d’expériences sur votre application peut vous aider à prendre des décisions éclairées pour améliorer les performances et l’expérience utilisateur de votre application. Dans ce guide, vous allez apprendre à configurer et à exécuter des expérimentations dans un magasin App Configuration. Vous allez découvrir comment collecter et mesurer des données à l’aide des fonctionnalités d’App Configuration, d’Application Insights (préversion) et de l’Espace de travail d’expérimentation fractionnée (préversion).

Vous serez ainsi à même de prendre des décisions pilotées par les données pour améliorer votre application.

Remarque

Un moyen rapide de démarrer votre parcours d’expérimentation consiste à exécuter l’exemple Quote of the Day AZD. Ce référentiel fournit un exemple exhaustif, avec l’approvisionnement des ressources Azure et une première expérience, sur la façon d’intégrer Azure App Configuration à vos applications .NET pour exécuter des expériences.

Dans ce tutoriel, vous allez :

• Créer un indicateur de fonctionnalité de variante
• Ajouter une ressource Application Insights à votre magasin
• Ajouter un espace de travail d’expérimentation fractionnée à votre magasin
• Configurer une application pour exécuter une expérience
• Activer la télémétrie et créer une expérience dans votre indicateur de fonctionnalité de variante
• Créer des métriques pour votre expérience
• Obtenir les résultats de l’expérimentation

Prérequis

• Un abonnement Azure. Si vous n’en avez pas, créez-en une gratuitement.
• Un magasin App Configuration.
• Une ressource d’espace de travail d’expérimentation fractionnée.
• Une ressource Application Insights basée sur un espace de travail.

Créer un indicateur de fonctionnalité de variante (préversion)

Créez un indicateur de fonctionnalité de variante nommé Greeting avec deux variantes, Off et On, comme décrit dans le guide de démarrage rapide sur les indicateurs de fonctionnalités.

Connecter une ressource Application Insights (préversion) à votre magasin de configuration

Pour exécuter une expérience, vous devez d’abord connecter une ressource Application Insights basée sur un espace de travail à votre magasin App Configuration. La connexion de cette ressource à votre magasin App Configuration définit le magasin de configuration avec la source de télémétrie pour l’expérimentation.

1. Dans votre magasin App Configuration, sélectionnez Télémétrie > Application Insights (préversion).

   

2. Sélectionnez la ressource Application Insights que vous souhaitez utiliser comme fournisseur de télémétrie pour vos indicateurs de fonctionnalité de variante et votre application, puis sélectionnez Enregistrer. Si vous n’avez pas de ressource Application Insights, créez-en une en sélectionnant Créer. Pour plus d’informations sur la procédure à suivre, accédez à Créer une ressource basée sur un espace de travail. Ensuite, de retour dans Application Insights (préversion), rechargez la liste des ressources Application Insights disponibles et sélectionnez votre nouvelle ressource Application Insights.

3. Une notification indique que la ressource Application Insights a été mise à jour avec succès pour le magasin App Configuration.

Connecter un espace de travail d’expérimentation fractionnée (préversion) à votre magasin

Pour exécuter des expériences dans Azure App Configuration, vous allez utiliser un espace de travail d’expérimentation fractionnée. Effectuez les étapes ci-dessous pour connecter un espace de travail d’expérimentation fractionnée à votre magasin.

1. Dans votre magasin App Configuration, sélectionnez Expérimentation>Espace de travail d’expérimentation fractionnée (préversion) dans le menu de gauche.

   

2. Sélectionnez un espace de travail d’expérimentation fractionnée, puis Enregistrer. Si vous n’avez pas d’espace de travail d’expérimentation fractionné, suivez le guide de démarrage rapide relatifs aux espaces de travail d’expérimentation fractionnée pour en créer un.

   Remarque

   La source de données sélectionnée dans l’espace de travail d’expérimentation fractionnée doit être la même ressource Application Insights que celle sélectionnée à l’étape précédente.

3. Une notification indique que l’opération a réussi.

Configurer une application pour exécuter une expérience

Maintenant que vous avez connecté la ressource Application Insights (préversion) au magasin App Configuration, configurez une application pour exécuter votre expérience (préversion).

Dans cet exemple, vous créez une application web ASP.NET nommée Quote of the Day. Lorsque l’application est chargée, elle affiche une citation. Les utilisateurs peuvent appuyer sur le bouton en forme de cœur pour l’aimer. Pour améliorer l’engagement des utilisateurs, vous souhaitez déterminer si un message d’accueil personnalisé augmentera le nombre d’utilisateurs qui aiment la citation. Vous créez l’indicateur de fonctionnalité Greeting dans Azure App Configuration avec deux variantes, Off et On. Les utilisateurs qui reçoivent la variante Off verront un titre standard. Les utilisateurs qui reçoivent la variante On verront un message d’accueil. Vous collectez et enregistrez la télémétrie de vos interactions utilisateur dans Application Insights. Avec l’espace de travail d’expérimentation fractionnée, vous pouvez analyser l’efficacité de votre expérience.

Créer une application et ajouter des secrets utilisateur

1. Ouvrez une invite de commandes et exécutez le code suivant. Cela crée une application Razor Pages dans ASP.NET Core, à l’aide de l’authentification de compte individuel, et la place dans un dossier de sortie nommé QuoteOfTheDay.

   dotnet new razor --auth Individual -o QuoteOfTheDay
   

2. À l’invite de commandes, accédez au dossier QuoteOfTheDay et exécutez la commande suivante pour créer un secret utilisateur pour l’application. Ce secret contient la chaîne de connexion pour App Configuration.

   dotnet user-secrets set ConnectionStrings:AppConfiguration "<App Configuration Connection string>"
   

3. Créez un autre secret utilisateur qui contient la chaîne de connexion pour Application Insights.

   dotnet user-secrets set ConnectionStrings:AppInsights "<Application Insights Connection string>"
   

Mettre à jour le code d’application

1. Dans QuoteOfTheDay.csproj, ajoutez les dernières préversions des kits SDK Gestion des fonctionnalités et App Configuration en tant que packages requis.

   <PackageReference Include="Microsoft.Azure.AppConfiguration.AspNetCore" Version="8.0.0-preview.2" />
   <PackageReference Include="Microsoft.FeatureManagement.Telemetry.ApplicationInsights" Version="4.0.0-preview3" />
   <PackageReference Include="Microsoft.FeatureManagement.Telemetry.ApplicationInsights.AspNetCore" Version="4.0.0-preview3" />
   <PackageReference Include="Microsoft.FeatureManagement.AspNetCore" Version="4.0.0-preview3" />
   

2. Dans Program.cs, sous la ligne var builder = WebApplication.CreateBuilder(args);, ajoutez le fournisseur App Configuration, qui extrait la configuration à partir d’Azure au démarrage de l’application. Par défaut, la méthode UseFeatureFlags inclut tous les indicateurs de fonctionnalités sans étiquette, et définit une durée d’expiration du cache de 30 secondes.

   builder.Configuration
       .AddAzureAppConfiguration(o =>
       {
           o.Connect(builder.Configuration.GetConnectionString("AppConfiguration"));
   
           o.UseFeatureFlags();
       });
   

3. Dans Program.cs, ajoutez les instructions suivantes :

   using Microsoft.ApplicationInsights.AspNetCore.Extensions;
   using Microsoft.ApplicationInsights.Extensibility;
   using Microsoft.FeatureManagement.Telemetry.ApplicationInsights.AspNetCore;
   

4. Sous l’emplacement où builder.Configuration.AddAzureAppConfiguration est appelé, ajoutez :

   // Add Application Insights telemetry.
   builder.Services.AddApplicationInsightsTelemetry(
       new ApplicationInsightsServiceOptions
       {
           ConnectionString = builder.Configuration.GetConnectionString("AppInsights"),
           EnableAdaptiveSampling = false
       })
       .AddSingleton<ITelemetryInitializer, TargetingTelemetryInitializer>();
   

   Cet extrait effectue les actions suivantes.

   • Ajout d’un client de télémétrie Application Insights à l’application.
   • Ajout d’un initialiseur de télémétrie qui ajoute des informations de ciblage à la télémétrie sortante.
   • Désactivation de l’échantillonnage adaptatif. Pour plus d’informations sur la désactivation de l’échantillonnage adaptatif, accédez à Résolution des problèmes.

5. Dans le dossier racine QuoteOfTheDay, créez un fichier nommé ExampleTargetingContextAccessor.cs. Cela crée une classe nommée ExampleTargetingContextAccessor. Collez le contenu ci-dessous dans le fichier.

   using Microsoft.FeatureManagement.FeatureFilters;
   
   namespace QuoteOfTheDay
   {
       public class ExampleTargetingContextAccessor : ITargetingContextAccessor
       {
           private const string TargetingContextLookup = "ExampleTargetingContextAccessor.TargetingContext";
           private readonly IHttpContextAccessor _httpContextAccessor;
   
           public ExampleTargetingContextAccessor(IHttpContextAccessor httpContextAccessor)
           {
               _httpContextAccessor = httpContextAccessor ?? throw new ArgumentNullException(nameof(httpContextAccessor));
           }
   
           public ValueTask<TargetingContext> GetContextAsync()
           {
               HttpContext httpContext = _httpContextAccessor.HttpContext;
               if (httpContext.Items.TryGetValue(TargetingContextLookup, out object value))
               {
                   return new ValueTask<TargetingContext>((TargetingContext)value);
               }
               List<string> groups = new List<string>();
               if (httpContext.User.Identity.Name != null)
               {
                   groups.Add(httpContext.User.Identity.Name.Split("@", StringSplitOptions.None)[1]);
               }
               TargetingContext targetingContext = new TargetingContext
               {
                   UserId = httpContext.User.Identity.Name ?? "guest",
                   Groups = groups
               };
               httpContext.Items[TargetingContextLookup] = targetingContext;
               return new ValueTask<TargetingContext>(targetingContext);
           }
       }
   }
   

   Cette classe déclare comment le ciblage de FeatureManagement obtient le contexte d’un utilisateur. En l’occurrence, elle lit httpContext.User.Identity.Name pour le UserId et traite le domaine de l’adresse e-mail comme un Group.

6. Revenez à Program.cs et ajoutez les instructions using suivantes.

   using Microsoft.FeatureManagement.Telemetry;
   using Microsoft.FeatureManagement;
   using QuoteOfTheDay;
   

7. Sous l’emplacement où AddApplicationInsightsTelemetry a été appelé, ajoutez des services pour gérer l’actualisation d’App Configuration, configurer la gestion des fonctionnalités, configurer le ciblage de gestion des fonctionnalités, et activer la gestion des fonctionnalités afin de publier des événements de télémétrie.

   builder.Services.AddHttpContextAccessor();
   
   // Add Azure App Configuration and feature management services to the container.
   builder.Services.AddAzureAppConfiguration()
       .AddFeatureManagement()
       .WithTargeting<ExampleTargetingContextAccessor>()
       .AddTelemetryPublisher<ApplicationInsightsTelemetryPublisher>();
   

8. Sous la ligne var app = builder.Build();, ajoutez un intergiciel qui déclenche l’actualisation d’App Configuration le cas échéant.

   // Use Azure App Configuration middleware for dynamic configuration refresh.
   app.UseAzureAppConfiguration();
   

9. En dessous, ajoutez le code suivant pour permettre à TargetingTelemetryInitializer d’avoir accès aux informations de ciblage en les stockant sur HttpContext.

   // Add TargetingId to HttpContext for telemetry
   app.UseMiddleware<TargetingHttpContextMiddleware>();
   

10. Dans QuoteOfTheDay>Pages>Shared>_Layout.cshtml, sous l’emplacement où QuoteOfTheDay.styles.css est ajouté, ajoutez la ligne suivante afin d’ajouter la feuille de style en cascade (CSS) pour la version 5.15.3 de font-awesome.

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    

11. Ouvrez QuoteOfTheDay>Pages>Index.cshtml.cs et remplacez le contenu dans l’application de citation.

    using Microsoft.ApplicationInsights;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    using Microsoft.FeatureManagement;
    
    namespace QuoteOfTheDay.Pages;
    
    public class Quote
    {
        public string Message { get; set; }
    
        public string Author { get; set; }
    }
    
    public class IndexModel(IVariantFeatureManagerSnapshot featureManager, TelemetryClient telemetryClient) : PageModel
    {
        private readonly IVariantFeatureManagerSnapshot _featureManager = featureManager;
        private readonly TelemetryClient _telemetryClient = telemetryClient;
    
        private Quote[] _quotes = [
            new Quote()
            {
                Message = "You cannot change what you are, only what you do.",
                Author = "Philip Pullman"
            }];
    
        public Quote? Quote { get; set; }
    
        public bool ShowGreeting { get; set; }
    
        public async void OnGet()
        {
            Quote = _quotes[new Random().Next(_quotes.Length)];
    
            Variant variant = await _featureManager.GetVariantAsync("Greeting", HttpContext.RequestAborted);
    
            ShowGreeting = variant.Configuration.Get<bool>();
        }
    
        public IActionResult OnPostHeartQuoteAsync()
        {
            string? userId = User.Identity?.Name;
    
            if (!string.IsNullOrEmpty(userId))
            {
                // Send telemetry to Application Insights
                _telemetryClient.TrackEvent("Like");
    
                return new JsonResult(new { success = true });
            }
            else
            {
                return new JsonResult(new { success = false, error = "User not authenticated" });
            }
        }
    }
    

    Ce PageModel sélectionne une citation de manière aléatoire, utilise GetVariantAsync pour obtenir la variante pour l’utilisateur actuel, et affecte à une variable nommée « ShowGreeting » la valeur de la variante. Le PageModel gère également les requêtes Post, appelant _telemetryClient.TrackEvent("Like");, ce qui envoie un événement à Application Insights avec le nom Like. Cet événement est automatiquement lié à l’utilisateur et à la variante, et peut être suivi par des métriques.

12. Ouvrez index.cshtml et remplacez le contenu de l’application de citation.

    @page
    @model IndexModel
    @{
        ViewData["Title"] = "Home page";
        ViewData["Username"] = User.Identity.Name;
    }
    
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
        }
    
        .quote-container {
            background-color: #fff;
            margin: 2em auto;
            padding: 2em;
            border-radius: 8px;
            max-width: 750px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
            display: flex;
            justify-content: space-between;
            align-items: start;
            position: relative;
        }
    
        .vote-container {
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            gap: 0em;
        }
    
        .vote-container .btn {
            background-color: #ffffff; /* White background */
            border-color: #ffffff; /* Light blue border */
            color: #333
        }
    
        .vote-container .btn:focus {
            outline: none;
            box-shadow: none;
        }
    
        .vote-container .btn:hover {
            background-color: #F0F0F0; /* Light gray background */
        }
    
        .greeting-content {
            font-family: 'Georgia', serif; /* More artistic font */
        }
    
        .quote-content p.quote {
            font-size: 2em; /* Bigger font size */
            font-family: 'Georgia', serif; /* More artistic font */
            font-style: italic; /* Italic font */
            color: #4EC2F7; /* Medium-light blue color */
        }
    </style>
    
    <div class="quote-container">
        <div class="quote-content">
            @if (Model.ShowGreeting)
            {
                <h3 class="greeting-content">Hi <b>@User.Identity.Name</b>, hope this makes your day!</h3>
            }
            else
            {
                <h3 class="greeting-content">Quote of the day</h3>
            }
            <br />
            <p class="quote">“@Model.Quote.Message”</p>
            <p>- <b>@Model.Quote.Author</b></p>
        </div>
    
        <div class="vote-container">
            <button class="btn btn-primary" onclick="heartClicked(this)">
                <i class="far fa-heart"></i> <!-- Heart icon -->
            </button>
        </div>
    
        <form action="/" method="post">
            @Html.AntiForgeryToken()
        </form>
    </div>
    
    <script>
        function heartClicked(button) {
            var icon = button.querySelector('i');
            icon.classList.toggle('far');
            icon.classList.toggle('fas');
    
            // If the quote is hearted
            if (icon.classList.contains('fas')) {
                // Send a request to the server to save the vote
                fetch('/Index?handler=HeartQuote', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
                    }
                });
            }
        }
    </script>
    

    Ce code correspond à l’interface utilisateur pour afficher QuoteOfTheDay et gérer l’utilisation de l’action de cœur sur une citation. Il utilise la valeur Model.ShowGreeting mentionnée précédemment pour présenter différentes choses à différents utilisateurs, en fonction de leur variante.

Générer et exécuter l’application

1. À l’invite de commandes, dans le dossier QuoteOfTheDay, exécutez : dotnet build.

2. Exécutez : dotnet run --launch-profile https.

3. Recherchez un message au format Now listening on: https://localhost:{port} dans la sortie de l’application. Accédez au lien inclus dans votre navigateur.

4. Une fois l’application en cours d’exécution affichée, sélectionnez Register en haut à droite pour inscrire un nouvel utilisateur.

   

5. Inscrivez un nouvel utilisateur nommé user@contoso.com. Le mot de passe doit comporter au moins six caractères, et contenir un nombre et un caractère spécial.

6. Sélectionnez le lien Click here to validate email après avoir entré des informations utilisateur.

7. Inscrivez un deuxième utilisateur nommé userb@contoso.com, entrez un autre mot de passe, et validez ce deuxième e-mail.

   Remarque

   Il est important, dans le cadre de ce tutoriel, d’utiliser exactement ces noms. Tant que la fonctionnalité a été configurée comme prévu, les deux utilisateurs doivent voir différentes variantes.

8. Sélectionnez Login en haut à droite pour vous connecter en tant que userb (userb@contoso.com).

   

9. Une fois connecté, vous devez constater que userb@contoso.com voit un message spécial lors de l’affichage de l’application.

   

   userb@contoso.com est le seul utilisateur qui voit le message spécial.

Activer la télémétrie et créer une expérience dans votre indicateur de fonctionnalité de variante

Activez la télémétrie et créez une expérience dans votre indicateur de fonctionnalité de variante en suivant les étapes ci-dessous :

1. Dans votre magasin App Configuration, accédez à Opérations>Gestionnaire de fonctionnalités.

2. Sélectionnez le menu contextuel ... tout à droite de l’indicateur de fonctionnalité de variante « Greeting », puis sélectionnez Modifier.

   

3. Accédez à l’onglet Télémétrie et cochez la case Activer la télémétrie.

4. Accédez à l’onglet Expérience, cochez la case Créer une expérience et donnez un nom à votre expérience.

5. Sélectionnez Vérifier + mettre à jour, puis Mettre à jour.

6. Une notification indique que l’opération a réussi. Dans le Gestionnaire de fonctionnalités, l’indicateur de fonctionnalité de variante doit présenter le mot Actif sous Expérience.

Créer des métriques pour votre expérience

Une métrique dans l’espace de travail d’expérimentation fractionnée est une mesure quantitative d’un événement envoyé à Application Insights. Cette métrique permet d’évaluer l’impact d’un indicateur de fonctionnalité sur le comportement de l’utilisateur et les conséquences.

Lorsque vous avez mis à jour votre application, vous avez ajouté _telemetryClient.TrackEvent("Like") au code. Like est un événement de télémétrie qui représente une action utilisateur, en l’occurrence la sélection du bouton Cœur. Cet événement est envoyé à la ressource Application Insights, que vous connecterez à la métrique que vous êtes sur le point de créer. L’application que nous avons créée ne spécifie qu’un seul événement, mais vous pouvez avoir plusieurs événements et par la suite plusieurs métriques. Plusieurs métriques peuvent également être basées sur un événement Application Insights unique.

1. Accédez à votre ressource d’espace de travail d’expérimentation fractionnée. Sous Configuration>Métriques d’expérimentation, sélectionnez Créer.

2. Sélectionnez ou entrez les informations suivantes sous Créer une métrique d’expérimentation et enregistrez-la avec Créer.

   

   Setting	Valeur d'exemple	Description
   Nom	Heart Vote	Nom de la métrique d’expérimentation.
   Description	Compter le nombre de personnes qui sélectionnent le bouton Cœur lorsqu’elles voient un message spécial, comparé à celles qui le sélectionne lorsqu’elles ne le voient pas.	Description facultative de la métrique.
   Application Insights Event Name	Like	Nom de l’événement Application Insights. Ce nom respecte la casse, et il s’agit du nom spécifié dans votre code avec _telemetryClient.TrackEvent("<Event-Name>").
   Measure as	Count	Les options ci-dessous sont disponibles : Count : compte le nombre de fois où l’événement est déclenché par vos utilisateurs. Average : calcule la moyenne de la valeur de l’événement pour vos utilisateurs. Sum : additionne les valeurs de l’événement pour vos utilisateurs. Affiche la valeur additionnée moyenne. Percent : calcule le pourcentage d’utilisateurs qui ont déclenché l’événement.
   Desired Impact	Augmenter	Ce paramètre représente l’objectif ultime de la mesure de votre métrique créée.

   Dans ce tutoriel, notre hypothèse est que davantage d’utilisateurs cliquent sur le bouton en forme de cœur lorsqu’il y a un message spécial en regard de la citation de la journée. Le code de l’application suit ce clic sous la forme d’un événement nommé Like. L’application envoie l’événement Like en tant que télémétrie à Application Insights, et le Desired Impact de cette expérience consiste à observer une augmentation du nombre de clics utilisateur (mesurés en tant que Count) sur le Heart Vote, afin de pouvoir valider l’hypothèse donnée. S’il y a une diminution du nombre de clics sur le bouton malgré l’affichage du message spécial à l’audience allouée, l’hypothèse est invalidée pour cette expérience.

3. Une fois créée, la nouvelle métrique s’affiche dans le portail. Vous pouvez la modifier ou la supprimer en sélectionnant le menu contextuel (...) sur le côté droit de l’écran.

   

Obtenir les résultats de l’expérimentation

Pour tester votre nouvelle expérience de configuration et générer des résultats analysables, simulez un trafic vers votre application et patientez 10 à 15 minutes.

Pour afficher les résultats de votre expérience, accédez au Gestionnaire de fonctionnalités et, dans la liste des indicateurs de fonctionnalités de variantes, cliquez sur ...>Expérience, ou sélectionnez le lien Actif dans la colonne Expérience. Cette colonne n’est pas affichée par défaut. Pour l’afficher, dans le Gestionnaire de fonctionnalités, sélectionnez Gérer l’affichage>Modifier les colonnes>Ajouter une colonne>Experiment et Appliquer.

Dans la page des résultats, une Version de l’expérience, une Base de référence par rapport à laquelle comparer les résultats, et une variante de Comparaison sont sélectionnées par défaut. Si nécessaire, modifiez les valeurs par défaut à votre convenance, puis sélectionnez Appliquer pour afficher le résultat de votre expérience.

La capture d’écran ci-dessus montre que l’expérience a eu le résultat souhaité, la variante On pour Heart Vote ayant généré 560,62 % plus de votes Cœur que la variante Off.

Toute modification d’un indicateur de fonctionnalité de variante génère une nouvelle version de l’expérimentation, que vous pouvez sélectionner pour afficher ses résultats.

Remarque

Pour obtenir des résultats d’expérimentation, vous avez besoin d’au moins 30 événements par variante, mais nous vous suggérons d’avoir plus que la taille d’échantillonnage minimale afin d’être certain que votre expérimentation produise des résultats fiables.

Remarque

L’échantillonnage Application Insights est activé par défaut, et peut avoir un impact sur vos résultats d’expérimentation. Pour ce tutoriel, nous vous recommandons de désactiver l’échantillonnage dans Application Insights. Apprenez-en davantage sur l’échantillonnage dans Application Insights.

Étape suivante

Expérimentation