Kraftfulla funktionsflaggor i React

Konfigurera gränssnittet för funktionsflaggor

Skapa ett gratis Optimizely Rollouts-konto här.

I gränssnittet för rollouts, navigera till "Funktioner > Skapa ny funktion" och skapa en funktionsflagga som heter "hello_world".

För att ansluta din "hello_world"-funktion till din applikation, hitta din SDK-nyckel. Navigera till "Inställningar > Datafile’ och kopiera SDK-nyckelvärdet.

Installera Optimizely Rollouts React SDK

Med React SDK kan du konfigurera funktionsväxlare inifrån din kodbas med hjälp av JavaScript.

Använda npm:

>npm install --save @optimizely/react-sdk

eller använda yarn:

>yarn add @optimizely/react-sdk

Använd SDK:et genom att linda in din huvudkomponent i React App i OptimizelyProvider-komponenten och ersätta <Your_SDK_Key> med SDK-nyckeln du hittade ovan.

import React from 'react'; import { createInstance, OptimizelyProvider, } from '@optimizely/react-sdk' const optimizely = createInstance({ sdkKey: '<Din_SDK_Key>', }) class App extends React.Component { render() { return ( <OptimizelyProvider optimizely={optimizely} user={{ id: 'user123', attribut: { 'kund-ID': 123, 'isVip': true, } }}> <h1>Exempelapplikation</h1> <div> Inga funktioner här ännu... </div> </OptimizelyProvider> ) } } export default App;Observera att OptimizelyProvider tar ett användarobjekt som definierar egenskaper associerade med en besökare på din webbplats.

• användar-id: används för en slumpmässig procentuell utrullning över dina användare
• användarattribut: används för en riktad utrullning över dina användare. Du kommer att använda dessa attribut för att rikta din funktion till specifika grupper av användare med början i steg 5.

Implementera funktionen

För att implementera din "hello_world"-funktion, importera först OptimizelyFeature-komponenten högst upp i din applikation:

class="">import { OptimizelyFeature } from '@optimizely/react-sdk'

Placera sedan OptimizelyFeature-komponenten i appen och skicka din funktionsnyckel "hello_world" till funktionsprop:

<OptimizelyFeature feature="hello_world"> {(isEnabled) => ( isEnabled ? (<p> Du fick funktionen <strong>hello_world</strong>!

Feature-prop:en kopplar komponenten till funktionen du skapade i Optimizely-gränssnittet i första steget.

Ditt fullständiga kodexempel ser nu ut så här:

importera React från 'react'; import { createInstance, OptimizelyProvider, OptimizelyFeature, } from '@optimizely/react-sdk' const optimizely = createInstance({ sdkKey: '<Din_SDK_Key>', }) class App extends React.Component { render() { return ( <OptimizelyProvider optimizely={optimizely} user={{ id: 'user123', attribut: { 'customerId': 123, 'isVip': true, } }}> <h1>Exempelapplikation</h1> <div> <OptimizelyFeature feature="hello_world"> {(isEnabled) => ( isEnabled ? (<p> Du har <strong>hello_world</strong>-funktionen!

Slå på funktionsväxlingen!

Om du kör programmet nu kommer du att märka att du inte fick funktionen. Detta beror på att funktionen inte är aktiverad, vilket innebär att den är avstängd för alla besökare i din applikation.

För att aktivera funktionen:

1. Navigera till Funktioner
2. Klicka på funktionen "hello_world"
3. Slå på funktionen och se till att den är inställd på 100 % (se skärmdump nedan)
4. Klicka på Spara för att spara dina ändringar

Efter cirka 1 minut bör funktionen nu vara aktiverad när du uppdaterar din React-app och du bör se "Du har fått hello_world-funktion!!”.

Du har nu lanserat din funktion bakom en funktionsflagga, men den är tillgänglig för alla. Nästa steg är att aktivera målgruppsinriktning för att endast visa din funktion för en specifik delmängd av användare för att möjliggöra det verkliga värdet av att lansera en funktion kund för kund.

Skapa ett attribut för kund-ID

För att rikta in din funktion baserat på de användarattribut du angav till OptimizelyProvider-komponenten i steg 2 måste du skapa dessa användarattribut i utrullningsgränssnittet. Gör det med attributet "kund-ID" för att börja:

1. Navigera till målgrupper -> Attribut
2. Klicka på "Skapa nytt attribut…"
3. Ge attributnyckeln namnet "customerId"
4. Klicka på "Spara attribut" för att spara dina ändringar

Skapa och lägg till en beta-publik

Nu ska vi skapa en publik för att ange vilka kund-ID:n som får åtkomst till din funktion.

1. Navigera till Funktioner
2. Klicka på din "hello_world"-funktion
3. Scrolla ner till Målgrupper
4. Klicka på "Skapa ny publik…"
5. Ge publiken namnet "[hello_world] Betaanvändare"
6. Dra och släpp ditt kund-ID-attribut i målgruppsvillkoren
7. Ändra rullgardinsmenyn "har valfritt värde" till "Number equals" med värdet 123
8. Klicka på "Spara målgrupp"

Lägg till målgruppen i ditt verktyg genom att klicka på +-knappen bredvid din nyskapade målgrupp. Scrolla sedan ner och klicka på "spara".

Nu när du har lagt till målgruppen i ditt verktyg är betaversionen igång. För närvarande visas din funktion bara för kunder med kund-ID 123, vilket är det du angav till OptimizelyProvider-komponenten i userAttributes-prop.

Som ett test för att verifiera kan du ändra ditt kund-ID till 456, spara och se hur funktionen stängs av eftersom du inte uppfyller inriktningsvillkoren.

Lägg till användare i betaversionen

För att lägga till fler kunder i din betapublik, redigera målgruppsdefinitionen för att lägga till eller ta bort användare från betaversionen:

• Klicka på plustecknet och spara för att lägga till betaanvändare
• Klicka på x-tecknet och spara för att ta bort betaanvändare

I följande skärmdumpsexempel har tre kunder lagts till i betaversionen. Kunder med id:n: 123, 456 och 789 kommer nu att ha tillgång till funktionen "hello_world".

Starta funktionen

När du har aktiverat din funktion så att tillräckligt många kunder kan njuta av den nya användarupplevelsen kan du bestämma att det är säkert att lansera funktionen för alla kunder.

När du är redo att lansera din funktion från beta, följ dessa steg:

1. Ta bort målgruppen från din funktion
2. Se till att utrullningen är konfigurerad till 100 %
3. Spara funktionen

Funktionen är nu tillgänglig för alla och du har framgångsrikt rullat ut "hello_world"-funktionen kund för kund med hjälp av gratis funktionsflaggor från Optimizely Rollouts i React!