빠르게 시작하기

1. 최소 지원 사양

  • React Native: 0.71.6
  • Node 14 or newer
  • Ruby 2.7.6
  • iOS: 12.4
  • Android: 5.0 (API 21)

2. SDK 연동

SDK 연동을 위해서는 우선 React Native 용 Tapjoy 플러그인을 설치합니다. SDK 설치는 NPM 과 Yarn 을 통해 설치합니다.

NPM

npm install tapjoy-react-native-sdk

Yarn

yarn add tapjoy-react-native-sdk

플러그인 설치가 완료되면 React Native 프로젝트 내 플러그인을 import 하여 사용할 수 있습니다.

import {Tapjoy, TJPlacement} from 'tapjoy-react-native-sdk'

권한 추가 (Android)

AndroidManifest에 ACCESS_WIFI_STATE 권한을 추가합니다. (Optional)

<manifest ...>
  ...
  <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
  ...
</manifest>

3. Tapjoy 연결

Tapjoy SDK를 구동하기 위해서는 우선 connect API를 호출합니다. connect API는 앱 실행 직후 호출하는 것을 권장합니다.

try {
    let sdkKey = Platform.OS === 'ios' ? 'ios-sdk-key' : 'android-sdk-key'
    let flags: object = {TJC_OPTION_USER_ID: 'userId'};
    await Tapjoy.connect(sdkKey, flags);
} catch (error:any) {
    let errorString = `Tapjoy SDK failed to connect. code: ${error.code}, message: ${error.message}`;
}

SDK 버전 13.4.0부터 connectWarning 콜백을 지원합니다. 해당 콜백은 SDK 초기화시 경고성 이슈가 있을 경우 호출되며, connectSuccess 와 같이 호출됩니다. 현재 해당 기능은 connectFlag상에 설정된 UserID 에 이슈가 있을 경우 호출됩니다.


import {
  NativeEventEmitter,
  NativeModules,
} from 'react-native';

const TJ = NativeModules.TapjoyReactNativeSdk;
      const TapjoyEmitter = new NativeEventEmitter(TJ);
      const TapjoyEventType = 'Tapjoy';
      const subscription = TapjoyEmitter.addListener(
        TapjoyEventType,
        (event: TapjoyEvent) => {
          if (event.name === TJConnect.TJC_CONNECT_WARNING) {
            subscription.remove();
            setStatusLabelText(
              `Tapjoy SDK connected with Warning: ErrorCode: ${event.code} ${event.message} `
            );
          }
        }
      );

Tapjoy SDk 연동이 완료되면 빌드 후 애플리케이션을 실행합니다.

Max User Level

Tapjoy에 여러분의 게임의 최대 레벨을 설정할 수 있습니다. Tapjoy.connect API 호출 전, 해당 API를 호출해야 합니다.

Tapjoy.setMaxLevel(10); 

User Segment

setUserSegmentAPI 를 통해 사용자를 분류할 수 있습니다. Tapjoy.connect API 호출 전, 해당 API를 호출해야 합니다.

Tapjoy.setUserSegment(TJSegment.VIP);
Tapjoy.setUserSegment(TJSegment.Payer);
Tapjoy.setUserSegment(TJSegment.NonPayer);
Tapjoy.setUserSegment(TJSegment.Unknown);

축하합니다! 이제 Tapjoy SDK가 여러분의 애플리케이션에서 동작하기 시작하였습니다.

4. App Tracking Transparency 권한 요청

Tapjoy SDK를 연동할 앱이 App Tracking Transparency를 통해 IDFA를 사용한다면 iOS 내 info.plist "NSUserTrackingUsageDescription" 를 추가하고 메시지를 작성하여 사용자로부터 IDFA 사용권한을 받도록 합니다.

이후 react-native-tracking-transparency 패키지를 다운로드 받습니다.

yarn add react-native-tracking-transparency

패키지 설치 후 프로젝트 내 해당 패키지를 import 하면 IDFA 권한 승인 팝업이 노출됩니다.

import {
    getTrackingStatus,
    requestTrackingPermission,
} from 'react-native-tracking-transparency';

...

let trackingStatus = await getTrackingStatus();
if (trackingStatus === 'authorized' || trackingStatus === 'unavailable') {
    await Tapjoy.connect(sdkKey, flags);
}else{
    trackingStatus = await requestTrackingPermission();
    await Tapjoy.connect(sdkKey, flags);
}