Kraftige funksjonsflagg i React

Konfigurer funksjonsflagggrensesnittet

Opprett en gratis Optimizely Rollouts-konto her.

I Rollouts-grensesnittet navigerer du til «Funksjoner > Opprett ny funksjon» og oppretter et funksjonsflagg kalt «hello_world».

For å koble «hello_world»-funksjonen til applikasjonen din, finn SDK-nøkkelen din. Naviger til «Innstillinger > Datafile’ og kopier SDK-nøkkelverdien.

Installer Optimizely Rollouts React SDK

React SDK lar deg sette opp funksjonsvekslere fra kodebasen din ved hjelp av JavaScript.

Bruk npm:

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

eller bruk yarn:

>yarn add @optimizely/react-sdk

Bruk SDK-en ved å pakke inn hovedkomponenten i React App i OptimizelyProvider-komponenten og erstatte <Your_SDK_Key> med SDK-nøkkelen du fant ovenfor.

import React from 'react'; import { createInstance, OptimizelyProvider, } from '@optimizely/react-sdk' const optimizely = createInstance({ sdkKey: '<Din_SDK-nøkkel>', }) class App extends React.Component { render() { return ( <OptimizelyProvider optimizely={optimizely} user={{ id: 'bruker123', attributter: { 'kunde-ID': 123, 'isVip': true, } }}> <h1>Eksempelapplikasjon</h1> <div> Ingen funksjoner her ennå... </div> </OptimizelyProvider> ) } } export default App;Merk at OptimizelyProvider tar et brukerobjekt som definerer egenskaper knyttet til en besøkende på nettstedet ditt.

• bruker.id: brukes til en tilfeldig prosentvis utrulling på tvers av brukerne dine
• bruker.attributter: brukes til en målrettet utrulling på tvers av brukerne dine. Du bruker disse attributtene til å målrette funksjonen din mot bestemte grupper av brukere fra trinn 5.

Implementer funksjonen

For å implementere «hello_world»-funksjonen, importer først OptimizelyFeature-komponenten øverst i applikasjonen din:

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

Plasser deretter OptimizelyFeature-komponenten i appen, og send funksjonsnøkkelen «hello_world» til funksjonspropen til OptimizelyFeature-komponenten:

<OptimizelyFeature feature="hello_world"> {(isEnabled) => ( isEnabled ? (<p> Du fikk <strong>hello_world</strong>-funksjonen!

Funksjonspropen kobler komponenten til funksjonen du opprettet i Optimizely-grensesnittet i første trinn.

Det fullstendige kodeeksemplet ditt ser nå slik ut:

importer React fra 'react'; import { createInstance, OptimizelyProvider, OptimizelyFeature, } from '@optimizely/react-sdk' const optimizely = createInstance({ sdkKey: '<Din_SDK-nøkkel>', }) class App extends React.Component { render() { return ( <OptimizelyProvider optimizely={optimizely} user={{ id: 'bruker123', attributter: { 'kunde-ID': 123, 'isVip': true, } }}> <h1>Eksempelapplikasjon</h1> <div> <OptimizelyFeature feature="hello_world"> {(isEnabled) => ( isEnabled ? (<p> Du har <strong>hello_world</strong> funksjon!

Slå på funksjonsbryteren!

Hvis du kjører applikasjonen din nå, vil du legge merke til at du ikke fikk funksjonen. Dette er fordi funksjonen ikke er aktivert, noe som betyr at den er av for alle besøkende til applikasjonen din.

Slik slår du på funksjonen:

1. Naviger til Funksjoner
2. Klikk på «hello_world»-funksjonen
3. Slå på funksjonen og sørg for at den er satt til 100 % (se skjermbilde nedenfor)
4. Klikk på Lagre for å lagre endringene dine

Om omtrent 1 minutt, skal funksjonen være aktivert når du oppdaterer React-appen, og du skal se «Du har fått «hello_world-funksjon!!».

Du har nå lansert funksjonen din bak et funksjonsflagg, men den er tilgjengelig for alle. Neste trinn er å aktivere målretting for å vise funksjonen din bare til et bestemt delsett av brukere for å aktivere den virkelige verdien av å rulle ut en funksjon kunde for kunde.

Opprett et attributt for kunde-ID

For å målrette funksjonen din basert på brukerattributtene du oppga til OptimizelyProvider-komponenten i trinn 2, må du opprette disse brukerattributtene i utrullingsgrensesnittet. Gjør det med attributtet «kunde-ID» for å starte:

1. Naviger til målgrupper -> Attributter
2. Klikk på «Opprett nytt attributt…»
3. Gi attributtnøkkelen navnet «kunde-ID»
4. Klikk på «Lagre attributt» for å lagre endringene dine

Opprett og legg til en beta-målgruppe

La oss nå opprette en målgruppe for å angi hvilke kunde-ID-er som skal få tilgang til funksjonen din.

1. Naviger til funksjoner
2. Klikk på «hello_world»-funksjonen din
3. Bla ned til målgrupper
4. Klikk på «Opprett ny målgruppe…»
5. Gi målgruppen navnet «[hello_world] Beta-brukere»
6. Dra og slipp kunde-ID-attributtet ditt i målgruppebetingelsene
7. Endre rullegardinmenyen «har en hvilken som helst verdi» til «Tall er lik» med verdien 123
8. Klikk på «Lagre målgruppe»

Legg til målgruppen i artikkelen din ved å klikke på +-knappen ved siden av den nyopprettede målgruppen. Bla deretter ned og klikk på «lagre».

Nå som du har lagt til målgruppen i artikkelen din, er betaversjonen oppe og går. For øyeblikket vises funksjonen din bare for kunder med kunde-ID 123, som er det du oppga til OptimizelyProvider-komponenten i userAttributes-propen.

Som en test for å bekrefte kan du endre kunde-ID-en din til 456, lagre og se på at funksjonen blir slått av fordi du ikke oppfyller målrettingsbetingelsene.

Legg til brukere i betaversjonen

For å legge til flere kunder i betamålgruppen din, rediger målgruppedefinisjonen for å legge til eller fjerne brukere fra betaversjonen:

• Klikk på «+»-tegnet og lagre for å legge til betabrukere
• Klikk på «x»-tegnet og lagre for å fjerne betabrukere

I skjermbildeeksemplet nedenfor er tre kunder lagt til i betaversjonen. Kunder med ID-ene: 123, 456 og 789 vil nå ha tilgang til «hello_world»-funksjonen.

Lanser funksjonen

Etter at du har aktivert funksjonen din slik at nok kunder kan nyte den nye brukeropplevelsen, kan du bestemme deg for at det er trygt å lansere funksjonen til alle kunder.

Når du er klar til å lansere funksjonen din fra beta, følg disse trinnene:

1. Fjern målgruppen fra funksjonen din
2. Sørg for at utrullingen er konfigurert til 100 %
3. Lagre funksjonen

Funksjonen er nå tilgjengelig for alle, og du har rullet ut «hello_world»-funksjonen kunde for kunde ved hjelp av gratis funksjonsflagg fra Optimizely Rollouts i React!