Zelfstudie: Experimenten uitvoeren met variantfunctievlagmen (preview)

Artikel
07/10/2024

Door experimenten uit te voeren op uw toepassing kunt u weloverwogen beslissingen nemen om de prestaties en gebruikerservaring van uw app te verbeteren. In deze handleiding leert u hoe u experimenten instelt en uitvoert in een App Configuration-archief. U leert hoe u gegevens verzamelt en meet met behulp van de mogelijkheden van App Configuration, Application Insights (preview) en Split Experimentation Workspace (preview).

Door dit te doen, kunt u gegevensgestuurde beslissingen nemen om uw toepassing te verbeteren.

Notitie

Een snelle manier om uw experimentatietraject te starten, is door de offerte van het AZD-voorbeeld van de dag uit te voeren. Deze opslagplaats biedt een uitgebreid voorbeeld, compleet met het inrichten van Azure-resources en een eerste experiment, over het integreren van Azure-app Configuratie met uw .NET-toepassingen om experimenten uit te voeren.

In deze zelfstudie hebt u:

Een variantfunctievlag maken
Een Application Insights-resource toevoegen aan uw winkel
Een Split Experimentation-werkruimte toevoegen aan uw winkel
Een app instellen om een experiment uit te voeren
Telemetrie inschakelen en een experiment maken in de vlag voor de variantfunctie
Metrische gegevens voor uw experiment maken
Resultaten van experimenten ophalen

Vereisten

Een Azure-abonnement. Als u er nog geen hebt, kunt u er gratis een maken.
Een App Configuration-archief.
Een split Experimentation Workspace-resource.
Een Application Insights-resource op basis van een werkruimte.

Een variantfunctievlag maken (preview)

Maak een variantfunctievlag met de naam Greeting met twee varianten, Uit en Aan, zoals beschreven in de quickstart Functievlag.

Een Application Insights-resource (preview) verbinden met uw configuratiearchief

Als u een experiment wilt uitvoeren, moet u eerst een Application Insights-resource op basis van een werkruimte verbinden met uw App Configuration-archief. Als u deze resource verbindt met uw App Configuration-archief, wordt het configuratiearchief ingesteld met de telemetriebron voor de experimenten.

Selecteer in uw App Configuration-archief Telemetry > Application Insights (preview).
Selecteer de Application Insights-resource die u wilt gebruiken als telemetrieprovider voor uw variantfunctievlagmen en -toepassing en selecteer Opslaan. Als u geen Application Insights-resource hebt, maakt u er een door Nieuwe maken te selecteren. Ga naar Een op worskpace gebaseerde resource maken voor meer informatie over hoe u doorgaat. Vervolgens laadt u de lijst met beschikbare Application Insights-resources opnieuw in Application Insights (preview) en selecteert u uw nieuwe Application Insights-resource.
Een melding geeft aan dat de Application Insights-resource is bijgewerkt voor het App Configuration-archief.

Een split experimentation-werkruimte (preview) verbinden met uw winkel

Als u experimenten wilt uitvoeren in Azure-app Configuratie, gebruikt u de werkruimte Split Experimentation. Volg de onderstaande stappen om een Split Experimentation-werkruimte te verbinden met uw winkel.

Selecteer in uw App Configuration-archief Experimentation>Split Experimentation Workspace (preview) in het linkermenu.
Selecteer een werkruimte voor gesplitste experimenten en klik vervolgens op Opslaan. Als u geen Split Experimentation-werkruimte hebt, volgt u de quickstart voor de Split Experimentation-werkruimte om er een te maken.

Notitie

De gegevensbron die is geselecteerd in de werkruimte Split Experimentation, moet dezelfde Application Insights-resource zijn als die in de vorige stap is geselecteerd.
Een melding geeft aan dat de bewerking is geslaagd.

Een app instellen om een experiment uit te voeren

Nu u de Application Insights-resource (preview) hebt verbonden met het App Configuration-archief, stelt u een app in om uw experiment uit te voeren (preview).

In dit voorbeeld maakt u een ASP.NET web-app met de naam Quote of the Day. Wanneer de app is geladen, wordt er een offerte weergegeven. Gebruikers kunnen op de hartknop drukken om het leuk te vinden. Als u de betrokkenheid van gebruikers wilt verbeteren, wilt u verkennen of een gepersonaliseerde begroetingsbericht het aantal gebruikers verhoogt dat de offerte leuk vindt. U maakt de functievlag Begroeting in Azure-app Configuratie met twee varianten, Uit en Aan. Gebruikers die de off-variant ontvangen, zien een standaardtitel. Gebruikers die de variant Aan ontvangen, krijgen een begroetingsbericht. U verzamelt en slaat de telemetrie van uw gebruikersinteracties in Application Insights op. Met Split Experimentation Workspace kunt u de effectiviteit van uw experiment analyseren.

Een app maken en gebruikersgeheimen toevoegen

Open een opdrachtprompt en voer de volgende code uit. Hiermee maakt u een nieuwe Razor Pages-toepassing in ASP.NET Core, met behulp van afzonderlijke accountverificatie en plaatst u deze in een uitvoermap met de naam QuoteOfTheDay.
```
dotnet new razor --auth Individual -o QuoteOfTheDay
```
Navigeer in de opdrachtprompt naar de map QuoteOfTheDay en voer de volgende opdracht uit om een gebruikersgeheim voor de toepassing te maken. Dit geheim bevat de verbindingsreeks voor App Configuration.
```
dotnet user-secrets set ConnectionStrings:AppConfiguration "<App Configuration Connection string>"
```

Maak een ander gebruikersgeheim met de verbindingsreeks voor Application Insights.

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

De toepassingscode bijwerken

Voeg in QuoteOfTheDay.csproj de nieuwste preview-versies van de Functiebeheer- en App Configuration SDK's toe als vereiste pakketten.

<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" />

Voeg in Program.cs onder de regel var builder = WebApplication.CreateBuilder(args);de App Configuration-provider toe, waarmee de configuratie uit Azure wordt opgehaald wanneer de toepassing wordt gestart. De methode UseFeatureFlags bevat standaard alle functievlagmen zonder label en stelt een verlooptijd van de cache in van 30 seconden.
```
builder.Configuration
    .AddAzureAppConfiguration(o =>
    {
        o.Connect(builder.Configuration.GetConnectionString("AppConfiguration"));

        o.UseFeatureFlags();
    });
```

Voeg in Program.cs het volgende toe met behulp van instructies:

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

Voeg onder waar builder.Configuration.AddAzureAppConfiguration wordt aangeroepen het volgende toe:
```
// Add Application Insights telemetry.
builder.Services.AddApplicationInsightsTelemetry(
    new ApplicationInsightsServiceOptions
    {
        ConnectionString = builder.Configuration.GetConnectionString("AppInsights"),
        EnableAdaptiveSampling = false
    })
    .AddSingleton<ITelemetryInitializer, TargetingTelemetryInitializer>();
```
Met dit codefragment worden de volgende acties uitgevoerd.
- Hiermee voegt u een Application Insights-telemetrieclient toe aan de toepassing.
- Hiermee voegt u een telemetrie-initialisatiefunctie toe waarmee doelgegevens worden toegevoegd aan uitgaande telemetrie.
- Schakelt adaptieve steekproeven uit. Ga naar Probleemoplossing voor meer informatie over het uitschakelen van adaptieve steekproeven.

Maak in de hoofdmap QuoteOfTheDay een nieuw bestand met de naam ExampleTargetingContextAccessor.cs. Hiermee maakt u een nieuwe klasse met de naam ExampleTargetingContextAccessor. Plak de onderstaande inhoud in het bestand.

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

Met deze klasse wordt aangegeven hoe featuremanagement de context voor een gebruiker krijgt. In dit geval wordt het gelezen httpContext.User.Identity.Name voor het UserId domein van het e-mailadres als een Group.

Ga terug naar Program.cs en voeg het volgende toe met behulp van instructies.

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

AddApplicationInsightsTelemetry Voeg services toe om App Configuration Refresh af te handelen, functiebeheer in te stellen, functiebeheer te configureren en functiebeheer in te schakelen om telemetriegebeurtenissen te publiceren.

builder.Services.AddHttpContextAccessor();

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

Voeg onder de regel var app = builder.Build();een middleware toe waarmee app-configuratie wordt geactiveerd wanneer dit van toepassing is.
```
// Use Azure App Configuration middleware for dynamic configuration refresh.
app.UseAzureAppConfiguration();
```
Voeg daaronder de volgende code toe om toegang TargetingTelemetryInitializer te krijgen tot gerichte informatie door deze op te slaan op HttpContext.
```
// Add TargetingId to HttpContext for telemetry
app.UseMiddleware<TargetingHttpContextMiddleware>();
```
Voeg in QuoteOfTheDay>Pages>Shared>_Layout.cshtml, onder waar QuoteOfTheDay.styles.css wordt toegevoegd, de volgende regel toe om de css toe te voegen voor versie 5.15.3 van .font-awesome
```
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
```

Open QuoteOfTheDay>Pages>Index.cshtml.cs en overschrijf de inhoud naar de offerte-app.

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

Hiermee PageModel kiest u een willekeurige aanhalingsteken, gebruikt GetVariantAsync u om de variant voor de huidige gebruiker op te halen en stelt u een variabele met de naam ShowGreeting in op de waarde van de variant. De PageModel service verwerkt ook Post-aanvragen, aanroepen _telemetryClient.TrackEvent("Like");, waarmee een gebeurtenis naar Application Insights wordt verzonden met de naam Like. Deze gebeurtenis wordt automatisch gekoppeld aan de gebruiker en variant en kan worden bijgehouden door metrische gegevens.

Open index.cshtml en overschrijf de inhoud voor de offerte-app.

@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>

Deze code komt overeen met de gebruikersinterface om de QuoteOfTheDay weer te geven en de heart action voor een offerte te gebruiken. De eerder genoemde Model.ShowGreeting waarde wordt gebruikt om verschillende dingen weer te geven aan verschillende gebruikers, afhankelijk van hun variant.

Ontwikkel de app en voer deze uit

Voer in de opdrachtprompt, in de map QuoteOfTheDay, het volgende uit: dotnet build.
Uitvoeren: dotnet run --launch-profile https.
Zoek naar een bericht in de indeling Now listening on: https://localhost:{port} in de uitvoer van de toepassing. Navigeer naar de opgenomen koppeling in uw browser.
Nadat u de actieve toepassing hebt bekeken, selecteert u Registreren in de rechterbovenhoek om een nieuwe gebruiker te registreren.
Registreer een nieuwe gebruiker met de naam user@contoso.com. Het wachtwoord moet ten minste zes tekens bevatten en een getal en een speciaal teken bevatten.
Selecteer de koppeling Klik hier om e-mail te valideren nadat u gebruikersgegevens hebt ingevoerd.
Registreer een tweede gebruiker met de naam userb@contoso.com, voer een ander wachtwoord in en valideer deze tweede e-mail.

Notitie

Het is belangrijk voor deze zelfstudie om deze namen precies te gebruiken. Zolang de functie is geconfigureerd zoals verwacht, moeten de twee gebruikers verschillende varianten zien.
Selecteer Aanmelden in de rechterbovenhoek om u aan te melden als userb (userb@contoso.com).
Zodra u bent aangemeld, ziet u dat userb@contoso.com er een speciaal bericht wordt weergegeven wanneer u de app bekijkt.

userb@contoso.com is de enige gebruiker die het speciale bericht ziet.

Telemetrie inschakelen en een experiment maken in de vlag voor de variantfunctie

Schakel telemetrie in en maak een experiment in uw variantfunctievlag door de onderstaande stappen te volgen:

Ga in uw App Configuration-archief naar Operations>Feature Manager.
Selecteer het contextmenu ... helemaal rechts van de functievlag 'Begroeting' en selecteer Bewerken.
Ga naar het tabblad Telemetrie en schakel het selectievakje Telemetrie inschakelen in.
Ga naar het tabblad Experiment , schakel het selectievakje Experiment maken in en geef een naam op voor uw experiment.
Selecteer Beoordelen en bijwerken en vervolgens Bijwerken.
Een melding geeft aan dat de bewerking is geslaagd. In Functiebeheer moet de vlag voor de variantfunctie het woord Actief hebben onder Experiment.

Metrische gegevens voor uw experiment maken

Een metrische waarde in Split Experimentation Workspace is een kwantitatieve meting van een gebeurtenis die naar Application Insights wordt verzonden. Deze metrische waarde helpt bij het evalueren van de impact van een functievlag op gebruikersgedrag en resultaten.

Wanneer u uw app eerder bijwerkt, hebt u toegevoegd _telemetryClient.TrackEvent("Like") aan uw toepassingscode. Like is een telemetrie-gebeurtenis die een gebruikersactie vertegenwoordigt, in dit geval de selectie van de knop Hart. Deze gebeurtenis wordt verzonden naar de Application Insights-resource, die u verbindt met de metrische gegevens die u gaat maken. De app die we hebben gemaakt, geeft slechts één gebeurtenis op, maar u kunt meerdere gebeurtenissen en vervolgens meerdere metrische gegevens hebben. Meerdere metrische gegevens kunnen ook worden gebaseerd op één Application Insight-gebeurtenis.

Navigeer naar de resource voor de Split Experimentation-werkruimte. Selecteer Maken onder Metrische>gegevens voor configuratieexperimenten.

Selecteer of voer de volgende gegevens in onder Een experimenteerwaarde maken en sla deze op met Maken.

Schermopname van Azure Portal, waarmee een nieuwe metrische experimenteerwaarde wordt gemaakt.

Instelling	Voorbeeldwaarde	Description
Naam	Stem van hart	De naam van de metrische experimenten.
Beschrijving	Het aantal personen dat de hartknop selecteert wanneer ze een speciaal bericht zien versus wanneer ze dat niet doen.	Optionele beschrijving voor de metrische waarde.
Application Insights-gebeurtenisnaam	Als	De naam van de Application Insights-gebeurtenis. Deze naam is hoofdlettergevoelig en is de naam die is opgegeven in uw code met `_telemetryClient.TrackEvent("<Event-Name>")`.
Meten als	Tellen	De volgende opties zijn beschikbaar: Aantal: telt het aantal keren dat de gebeurtenis wordt geactiveerd door uw gebruikers. Gemiddelde: berekent de waarde van de gebeurtenis voor uw gebruikers. Som: telt de waarden van de gebeurtenis voor uw gebruikers op. Geeft de gemiddelde opgetelde waarde weer. Percentage: berekent het percentage gebruikers dat de gebeurtenis heeft geactiveerd.
Gewenste impact	Toename	Deze instelling vertegenwoordigt het uiteindelijke doel of doel achter het meten van uw gemaakte metrische gegevens.

In deze zelfstudie is onze hypothese dat meer gebruikers op de hartvormige knop klikken wanneer er een speciaal bericht naast het citaat van de dag staat. De toepassingscode houdt deze klik bij als een gebeurtenis met de naam Like. De toepassing verzendt de gebeurtenis Like als telemetrie naar Application Insights en de gewenste impact voor dit experiment is om een toename te zien van het aantal klikken van de gebruiker (gemeten als aantal) op de Heart Vote, om de opgegeven hypothese te kunnen valideren. Als er een afname is van het aantal klikken op de knop ondanks het speciale bericht dat aan de toegewezen doelgroep wordt getoond, wordt de hypothese voor dit experiment ongeldig.

Zodra de nieuwe metrische waarde is gemaakt, wordt deze weergegeven in de portal. U kunt het bewerken of verwijderen door het contextmenu (...) aan de rechterkant van het scherm te selecteren.

Resultaten van experimenten ophalen

Als u het zojuist ingestelde experiment naar de test wilt plaatsen en resultaten wilt genereren die u wilt analyseren, simuleert u verkeer naar uw toepassing en wacht u 10 tot 15 minuten.

Als u de resultaten van uw experiment wilt bekijken, gaat u naar Functiebeheer en klikt u op ...>Experimenteer of selecteer de actieve koppeling in de kolom Experiment. Deze kolom wordt niet standaard weergegeven. Als u dit wilt weergeven, selecteert u in Functiebeheer De weergave>Kolommen bewerken Kolomexperiment>> toevoegen en Toepassen.

Op de resultatenpagina zijn een versie van het experiment, een basislijn voor het vergelijken van de resultaten en een vergelijkingsvariant standaard geselecteerd. Wijzig indien nodig de standaardinstellingen naar wens en selecteer Toepassen om het resultaat van uw experiment weer te geven.

In de bovenstaande schermopname ziet u dat het experiment het gewenste resultaat had, waarbij de variant On voor de Heart Vote resulteert in 560,62% meer heart-stemmen dan de variant Off.

Elke bewerking in een variantfunctievlag genereert een nieuwe versie van de experimenten, die u kunt selecteren om de resultaten ervan weer te geven.

Notitie

Als u experimentenresultaten wilt ophalen, hebt u ten minste 30 gebeurtenissen per variant nodig, maar we raden u aan meer te hebben dat de minimale steekproefgrootte is om ervoor te zorgen dat uw experimenten betrouwbare resultaten opleveren.

Notitie

Application Insights-steekproeven zijn standaard ingeschakeld en kunnen van invloed zijn op de resultaten van uw experimenten. Voor deze zelfstudie wordt u aangeraden om steekproeven uit te schakelen in Application Insights. Meer informatie over steekproeven in Application Insights.

Volgende stap

Raadpleeg het volgende document voor meer informatie over de concepten van experimenten.

Experimenten

Ga verder naar het volgende document voor de volledige functierundown van de .NET-functiebeheerbibliotheek.

.NET-functiebeheer

Delen via

Zelfstudie: Experimenten uitvoeren met variantfunctievlagmen (preview)

Vereisten

Een variantfunctievlag maken (preview)

Een Application Insights-resource (preview) verbinden met uw configuratiearchief

Een split experimentation-werkruimte (preview) verbinden met uw winkel

Een app instellen om een experiment uit te voeren

Een app maken en gebruikersgeheimen toevoegen

De toepassingscode bijwerken

Ontwikkel de app en voer deze uit

Telemetrie inschakelen en een experiment maken in de vlag voor de variantfunctie

Metrische gegevens voor uw experiment maken

Resultaten van experimenten ophalen

Volgende stap

Feedback

Aanvullende resources