React Native SDK 실험하기

Amplitude Experiment의 클라이언트측 React Native SDK에 대한 공식 문서입니다.

설치

실험 JavaScript Client SDK를 설치합니다. 이 라이브러리는 또한 설치해야 하는 라이브러리@react-native-async-storage/async-storage에 따라 달라집니다.

npm install @amplitude/experiment-react-native-client
npm install @react-native-async-storage/async-storage

iOS에서 SDK를 실행하려면 네이티브 모듈을 설치해야 합니다.

cd ios
pod install

import { Experiment } from '@amplitude/experiment-react-native-client';
// (1) Initialize the experiment client with Amplitude Analytics.
const experiment = Experiment.initializeWithAmplitudeAnalytics(
    'DEPLOYMENT_KEY'
);
// (2) Fetch variants and await the promise result.
await experiment.fetch();
// (3) Lookup a flag's variant.
const variant = experiment.variant('FLAG_KEY');
if (variant.value === 'on') {
    // Flag is on
} else {
    // Flag is off
}

Amplitude 애널리틱스 플러그인

@amplitude/analytics-react-native를 사용하는 경우 @amplitude/plugin-experiment-react-native을 설치하여 Experiment를 플러그인으로 통합하세요. 플러그인은 현재 분석 ID를 읽고 분석을 통해 노출 이벤트를 전송합니다.

npm install @amplitude/plugin-experiment-react-native@1.0.0-beta.1

플러그인을 추가하고 분석을 초기화한 다음 실험을 시작하고 변형에 액세스하십시오.

import { add, init } from '@amplitude/analytics-react-native';
import { experimentPlugin } from '@amplitude/plugin-experiment-react-native';
const experiment = experimentPlugin({
  // Required unless Experiment and Analytics share the same project.
  deploymentKey: 'DEPLOYMENT_KEY',
});
await add(experiment).promise;
await init('AMPLITUDE_API_KEY').promise;
await experiment.experiment?.start();
const variant = experiment.experiment?.variant('FLAG_KEY');

플러그인은 다음과 같이 작동합니다.

• experimentPlugin()는 setup() 함수 내부에서 Experiment.initializeWithAmplitudeAnalytics()를 호출합니다. Experiment.initializeWithAmplitudeAnalytics()을 따로 호출하지 마세요.
• deploymentKey를 실험 배포 키로 설정합니다. 실험과 분석이 동일한 Amplitude 프로젝트를 공유하는 경우 플러그인은 기본적으로 분석 API 키를 사용합니다.
• 분석 init() 초기화 전이나 후에 실험 플러그인을 등록할 수 있습니다. 이 예제에서는 패키지의 빠른 시작 가이드와 동일하게 init() 전에 등록합니다.
• start()는 fetchOnStart가 false가 아닌 한, 기본적으로 변형을 가져옵니다. start()가 완료되기 전에, variant()는 캐시된 할당값, 초기 변형 또는 대체 값을 반환할 수 있습니다. 앱에서 스타트업 시 데이터를 가져오는 작업이 완료되어야 하는 경우 start()를 await하세요.
• 로그인이나 로그아웃을 포함하여 분석 식별 정보가 변경된 후 데이터를 가져오려면 automaticFetchOnAmplitudeIdentityChange를 true로 설정하세요. 기본값은 false입니다.

초기화

시작 시 애플리케이션에서 SDK 클라이언트를 초기화합니다.apiKey 매개변수에 전달하는 배포 키 인수는 분석 이벤트를 전송하는 동일한 프로젝트 내에 있어야 합니다.

initializeWithAmplitudeAnalytics(apiKey: string, config?: ExperimentConfig): ExperimentClient

초기화기는 단일 인스턴스를 반환하므로 동일한 인스턴스 이름에 대한 후속 초기화는 항상 초기 인스턴스를 반환합니다. 여러 인스턴스를 생성하려면 instanceName 구성을 사용하십시오.

import { Experiment } from '@amplitude/experiment-js-client';
const experiment = initializeWithAmplitudeAnalytics('DEPLOYMENT_KEY');

구성

SDK 클라이언트 구성은 초기화 다음 기간동안 수행됩니다.

통합

Amplitude 또는 세그먼트 분석 SDK를 사용하여 이벤트를 Amplitude로 추적하는 경우, Amplitude는 초기화 시 연동을 설정할 것을 권장합니다. 연동은 공급자 인터페이스를 구현하여 사용자 ID를 관리하고 노출 이벤트를 추적하기가 더 쉬워짐으로써 보다 간소화된 개발자 환경을 제공합니다.

가져오기

사용자의 변형을 가져오고 빠른 액세스를 위해 결과를 클라이언트에 저장합니다. 원격으로 평가 함수는 SDK 클라이언트를 초기화하는 데 사용된 배포와 관련된 플래그에 대해 사용자를 평가합니다.

fetch(user?: ExperimentUser): Promise<Client>

Amplitude 실험은 사용자가 애플리케이션 세션에 대한 최신 변형을 얻을 수 있도록 애플리케이션 시작 중에 호출할 것을 fetch()권장합니다. 인터페이스의 "깜빡임"을 방지하려면 사용자 환경을 렌더링하기 전에 가져오기 요청이 결과를 반환할 때까지 기다리십시오.

const user = {
    user_id: 'user@company.com',
    device_id: 'abcdefg',
    user_properties: {
        'premium': true,
    },
};
await experiment.fetch(user);

연동 또는 사용자 지정 사용자 제공자를 사용하는 경우 사용자를 입력하지 않고도 가져올 수 있습니다.

await experiment.fetch();

fetch()시간이 초과되거나 어떤 이유로든 실패하면 SDK 클라이언트가 반환되며 백오프를 사용하여 백그라운드에서 재시도합니다. SDK 클라이언트 초기화 다음 기간동안 구성 옵션에서 시간 초과를 구성하거나 재시도를 비활성화할 수 있습니다.

시작

실험 SDK를 시작하여 서버에서 플래그 구성을 가져오고 사용자를 위한 원격 평가 변형을 가져옵니다. 반환된 promise가 완료되면 SDK가 준비된 상태입니다.

start(user?: ExperimentUser): Promise<void>

| 매개 변수 | 요구 사항 | 설명 | | --------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | user | 선택 사항 | 변형 가져오기 요청과 함께 전달할 명시적 사용자 정보입니다. 이 사용자 정보는 사용자 제공자를 통해 모든 통합의 사용자 정보와 병합되며, 제공된 속성보다 명시적으로 전달된 속성을 선호합니다.fetch() 또한 SDK에서 사용자를 재사용할 수 있도록 설정합니다. | undefined |

애플리케이션이 초기화될 start()때 사용자 정보를 사용하여 변형을 평가하거나 가져올 수 있게 된 후에 호출하십시오. 로컬 평가 플래그 구성을 로드하고 원격 평가 변형을 가져온 후 프로미스가 완료됩니다.

SDK 구성에서 설정하여 애플리케이션의 성능을 향상시키기 위한 fetchOnStart동작을 설정합니다start().

• 응용 프로그램이 원격 평가에 의존하지 않는 경우 원격 평가로 인한 스타트업 지연 시간 증가를 방지하려면 false로 설정하십시오fetchOnStart.
• 애플리케이션이 원격 평가에 의존하지만 스타트업 직후에는 그렇지 않은 경우 fetchOnStart을 false로 설정하고 별도로 fetch()를 호출하여 프로미스를 기다릴 수 있습니다.

await experiment.start();

클라이언트가 initialVariants또는 initialFlags을 사용하여 부트스트랩되었으며 start()의 결과를 기다릴 필요가 없는 경우 비동기 저장소에 변형과 플래그가 로드되었는지 확인하기 위해 cacheReady()호출하고 기다립니다.

변형

SDK 클라이언트의 로컬 스토어에서 플래그 또는 실험에 대한 변형에 액세스하십시오.

variant(key: string, fallback?: string | Variant): Variant

사용자가 어떤 변형으로 분류되었는지 확인할 때 변형 value을 잘 알려진 문자열과 비교해야 할 것입니다.

const variant = experiment.variant('<FLAG_KEY>');
if (variant.value === 'on') {
    // Flag is on
} else {
    // Flag is off
}

const variant = experiment.variant('<FLAG_KEY>');
if (variant.value === 'on') {
    const payload = variant.payload;
}

null 변형 value은 사용자가 변형으로 분류되지 않았음을 의미합니다. 저장소에 지정된 플래그 키에 대한 변형이 없는 경우 내장된 폴백 매개변수를 사용하여 반환할 변형을 제공할 수 있습니다.

const variant = experiment.variant('<FLAG_KEY>', { value: 'control' });
if (variant.value === 'control') {
    // Control
} else if (variant.value === 'treatment') {
    // Treatment
}

모두

SDK 클라이언트에 저장된 모든 변형에 액세스합니다.

all(): Variants

지우기

캐시와 스토리지의 모든 변형을 지웁니다.

clear(): void

사용자가 로그아웃한 후 clear 를 호출하여 캐시와 저장소의 변형을 지울 수 있습니다.

experiment.clear();

노출:

구성된 연동 또는 사용자 지정 노출 추적 공급자를 통해 지정된 플래그 키의 현재 변형에 대한 노출 이벤트를 수동으로 추적합니다. 일반적으로 automaticExposureTracking의 구성 옵션을 false로 설정하는 것과 함께 사용됩니다.

exposure(key: string): void

const variant = experiment.variant('<FLAG_KEY>');
// Do other things...
experiment.exposure('<FLAG_KEY>');
if (variant === 'control') {
    // Control
} else if (variant === 'treatment') {
    // Treatment
}

공급자

공급자 구현은 사용자 ID를 관리하고 노출 이벤트를 추적하기가 더 쉬워짐으로써 개발자 환경을 더욱 간소화할 수 있게 해줍니다.

사용자 제공자

SDK 클라이언트는 사용자 제공자를 사용하여 필요한 경우에만 최신 사용자 정보에 액세스합니다(예: fetch() 가 호출될 때). 사용자 공급자는 선택 사항이지만 응용 프로그램에 사용자 정보 저장소가 이미 설정되어 있는 경우 유용합니다. 사용자 공급자를 사용하면 두 개의 개별 사용자 정보 저장소를 동시에 관리할 필요가 없습니다. 애플리케이션 사용자 저장소가 업데이트되었지만 실험이 업데이트되지 않은 경우(또는 그 반대의 경우)에 별도의 저장소가 서로 일치하지 않는 사용자 상태를 생성할 수 있습니다.

interface ExperimentUserProvider {
  getUser(): ExperimentUser;
}

사용자 지정 사용자 공급자를 사용하려면 SDK 초기화 시 사용자 지정 구현의 인스턴스로 userProvider의구성 옵션을 설정하십시오.

const experiment = Experiment.initialize('<DEPLOYMENT_KEY>', {
    userProvider: new CustomUserProvider(),
});

노출 추적 공급자

Amplitude는 노출 추적 공급자를 구현할 것을 강력히 권장합니다. 노출 추적은 실험 결과의 정확성과 신뢰성을 높이고 사용자가 어떤 플래그와 실험에 노출되었는지에 대한 가시성을 개선합니다.

export interface ExposureTrackingProvider {
  track(exposure: Exposure): void;
}

track()의 구현은 flag_key및variant 이라는 두 개의 이벤트 속성을 사용하여 $exposure유형(이름이라고도 함)의 이벤트를 추적해야 하며, 이는 Exposure객체 인수의 두 필드에 해당합니다. 마지막으로, 추적된 이벤트는 SDK 클라이언트를 초기화하는 데 사용된 [배포]가 첫 사용 후 동일한 프로젝트에 대해 결국 Amplitude 애널리틱스에 기록되어야 하며, 변형을 가져온 것과 동일한 사용자에 대해 발생해야 합니다.

사용자 지정 사용자 공급자를 사용하려면 SDK 초기화 시 사용자 지정 구현의 인스턴스로 exposureTrackingProvider의구성 옵션을 설정하십시오.

const experiment = Experiment.initialize('<DEPLOYMENT_KEY>', {
    exposureTrackingProvider: new CustomExposureTrackingProvider(),
});

부트스트랩

변형이 외부 소스(예: SDK 클라이언트에서 호출된 것이 아님)에서 온 경우 초기 플래그 및 변형 세트를 사용하여 실험 클라이언트를 부트스트랩할 수 있습니다. fetch()사용 사례로는 로컬 평가, 서버 측 렌더링 또는 특정 변형에 대한 연동 테스트가 포함됩니다.

클라이언트를 부트스트랩하려면 initialVariants의 구성 객체에서 플래그와 변형을 설정한 다음 source를 Source.InitialVariants로 설정하십시오. 그러면 SDK 클라이언트가 동일한 플래그에 대해 이전에 가져오고 저장된 변형보다 부트스트랩된 변형을 선호합니다.

const experiment = Experiment.initialize('<DEPLOYMENT_KEY>', {
    initialVariants: { /* Flags and variants */ },
    source: Source.InitialVariants,
});

HTTP 클라이언트

사용자 지정 HTTP 클라이언트 구현을 제공하여 SDK에서 수행한 네트워크 요청을 처리할 수 있습니다. 이 기능은 특정 네트워킹 요구 사항이 있는 환경이나 요청 처리를 사용자 정의해야 할 때 유용합니다.

export interface SimpleResponse {
  status: number;
  body: string;
}
export interface HttpClient {
  request(
    requestUrl: string,
    method: string,
    headers: Record<string, string>,
    data: string,
    timeoutMillis?: number,
  ): Promise<SimpleResponse>;
}

사용자 지정 HTTP 클라이언트를 사용하려면 SDK 초기화 시 구현 인스턴스를 사용하여 httpClient의구성 옵션을 설정하십시오.

const experiment = Experiment.initialize('<DEPLOYMENT_KEY>', {
    httpClient: new CustomHttpClient(),
});

사용자 지정 로깅

구성을 통해 로그 세부 정보를 제어하거나 Logger인터페이스를 구현하여 자체 logLevel로깅 솔루션을 사용하십시오.

로그 수준

• LogLevel.Disable - 기록을 하지 않습니다.
• LogLevel.Error - 오류만(기본값).
• LogLevel.Warn - 오류 및 경고.
• LogLevel.Info - 오류, 경고 및 정보 메시지.
• LogLevel.Debug - 오류, 경고, 정보 및 디버그 메시지.
• LogLevel.Verbose - 자세한 내용을 포함한 모든 메시지.

import { Experiment, LogLevel } from '@amplitude/experiment-react-native-client';
// Only log errors
const experiment = Experiment.initialize('<DEPLOYMENT_KEY>', {
  logLevel: LogLevel.Error
});
// Log errors and warnings
const experiment = Experiment.initialize('<DEPLOYMENT_KEY>', {
  logLevel: LogLevel.Warn
});
// Log everything (verbose)
const experiment = Experiment.initialize('<DEPLOYMENT_KEY>', {
  logLevel: LogLevel.Verbose
});

사용자 지정 로거

자체 로깅 솔루션을 사용하도록 Logger인터페이스를 구현하십시오.

import { Experiment, Logger, LogLevel } from '@amplitude/experiment-react-native-client';
// Implement the Logger interface
class CustomLogger implements Logger {
  error(message, ...optionalParams) {
    // Send errors to your logging service
    myLoggingService.error(message, ...optionalParams);
  }
  warn(message, ...optionalParams) {
    myLoggingService.warn(message, ...optionalParams);
  }
  info(message, ...optionalParams) {
    myLoggingService.info(message, ...optionalParams);
  }
  debug(message, ...optionalParams) {
    myLoggingService.debug(message, ...optionalParams);
  }
  verbose(message, ...optionalParams) {
    myLoggingService.verbose(message, ...optionalParams);
  }
}
// Initialize with custom logger
const experiment = Experiment.initialize('<DEPLOYMENT_KEY>', {
  loggerProvider: new CustomLogger(),
  logLevel: LogLevel.Warn
});

디버그 플래그(사용되지 않음)

debug이 구성 플래그는 사용되지 않습니다. 대신 logLevel을 사용하십시오.

// Deprecated: Sets logLevel to Debug
const experiment = Experiment.initialize('<DEPLOYMENT_KEY>', {
  debug: true
});
// Preferred: Use logLevel instead
const experiment = Experiment.initialize('<DEPLOYMENT_KEY>', {
  logLevel: LogLevel.Debug
});