3. SDK 초기화

1. SDK 초기화

AdWhale SDK를 프로젝트에 추가해야 합니다.
광고를 요청하기 전에 초기화가 이루어져야 합니다.

React Native의 iOS 네이티브 코드 구조상, Swift로 작성된 싱글턴 객체(AdWhaleAds.sharedInstance)를 Objective-C에서 직접 참고하는 경우 "undeclared identifier" 에러가 발생할 수 있습니다.

따라서, 본 분서에서는 Swift 브릿지 모듈을 통해 초기화 메서드를 구현하고 Objective-C(AppDelegate.mm)에서 해당 메서드를 호출하는 방식으로 SDK 초기화를 가이드합니다.

1. AdWhaleSettingModule.swift

import AdWhaleSDK

@objc(AdWhaleSettingModule)
class AdWhaleSettingModule: NSObject {

    @objc
    static func requiresMainQueueSetup() -> Bool {
        return true
    }
    
    @objc
    public static func initializeSDK(appKey: String, completion: (() -> Void)? = nil) {
        AdWhaleAds.sharedInstance.initialize(appKey) {
            completion?()
        }
    }
}

2. AdWhaleDelegate.m

#import "iOSReactNativeSample-Swift.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ... 기존 코드 ... //
    
    [AdWhaleSettingModule initializeSDKWithAppKey:@"0" completion:^{
        NSLog(@"AdWhale SDK 초기화 완료");
    }];
    
    // ... 기존 코드 ... //
}
@end

AppDelegate.swift

import AdWhaleSDK

@UIApplicationMain
public class AppDelegate: ExpoAppDelegate {

  public override func application(
      _ application: UIApplication,
      didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
    ) -> Bool {
    
    // ... 기존 코드 ... //
    
    // AdWhale SDK 초기화
    AdWhaleAds.sharedInstance.initialize {
      print("AdWhale SDK 초기화 완료")
    }
    
    
    // ... 기존 코드 ... //
  }
}

속성

appId

App Store에 등록된 App ID 정보 (선택사항)

completionHandler

SDK 초기화 완료 후 동작 코드

2024년 1월 16일 부터 IAB 유럽의 인증과 플랫폼 사업자의 인증을 받은 동의 플랫폼(CMP)를 통해 GDPR 동의 관리를 처리해야 합니다.
사용자의 앱이 유럽 경제 지역(EEA)의 사용자들이 사용할 경우에 적용해주시면 됩니다. 그 외 국가 사용자들에게는 적용을 해도 GDPR 동의 팝업이 뜨지 않습니다.
Initialize를 진행 후 호출해야 합니다.

1. AdWhaleSettingModule.swift

import AdWhaleSDK

@objc(AdWhaleSettingModule)
class AdWhaleSettingModule: NSObject {

    // ... 기존 코드 ... //
    
    @objc
    func showGDPR(_ resolve: @escaping RCTPromiseResolveBlock, rejecter reject: @escaping RCTPromiseRejectBlock) {
        let workItem = DispatchWorkItem {
            if let rootViewController = UIApplication.shared.keyWindow?.rootViewController {
                print("[adwhale] [sample Native] GDPR 표시 시도")
                AdWhaleAds.sharedInstance.gdpr(rootViewController, testDevices: nil) { result in
                    print("[adwhale] [sample Native] GDPR 표시 완료")
                    resolve(result)
                }
            } else {
                print("[adwhale] [sample Native] Root view controller를 찾을 수 없음")
                reject("ERROR", "Root view controller not found", nil)
            }
        }
        DispatchQueue.main.async(execute: workItem)
    }
}

2. AdWhaleSettingModule.m

#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(AdWhaleSettingModule, NSObject)

RCT_EXTERN_METHOD(showGDPR:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)

@end

3. React Native 연동 코드

AdWhaleSetting.tsx

import React, { useEffect } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { NativeModules } from 'react-native';

const { AdWhaleSettingModule } = NativeModules;

export default function AdWhaleSetting() {
  useEffect(() => {
    const showGDPR = async () => {
      try {
        const result = await AdWhaleSettingModule.showGDPR();
        console.log(`[adwhale] [sample UI] GDPR 표시 완료. 결과: ${result}`);
      } catch (error) {
        console.error(`[adwhale] [sample UI] GDPR 표시 실패: ${error}`);
      }
    };

    showGDPR();
  }, []);

  return null;
}

App.tsx

import React from 'react';
import { StyleSheet, View, SafeAreaView } from 'react-native';
import AdWhaleSetting from './src/components/AdWhaleSetting';

export default function App() {
  return (
    <SafeAreaView style={styles.safeArea}>
      <View style={styles.mainViewStyle}>
        <View style={styles.contentViewStyle}>
            <AdWhaleSetting />
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: 'white'
  },
  mainViewStyle: {
    flex: 1,
    marginTop: 50
  },
  contentViewStyle: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'                
  },
});

1. AdWhaleSettingModule.swift

import AdWhaleSDK

@objc(AdWhaleSettingModule)
class AdWhaleSettingModule: NSObject {

    // ... 기존 코드 ... //
    
    @objc
    func showGDPR(_ resolve: @escaping RCTPromiseResolveBlock, rejecter reject: @escaping RCTPromiseRejectBlock) {
        let workItem = DispatchWorkItem {
            if let rootViewController = UIApplication.shared.keyWindow?.rootViewController {
                print("[adwhale] [sample Native] GDPR 표시 시도")
                AdWhaleAds.sharedInstance.gdpr(rootViewController, testDevices: nil) { result in
                    print("[adwhale] [sample Native] GDPR 표시 완료")
                    resolve(result)
                }
            } else {
                print("[adwhale] [sample Native] Root view controller를 찾을 수 없음")
                reject("ERROR", "Root view controller not found", nil)
            }
        }
        DispatchQueue.main.async(execute: workItem)
    }
}

2. AdWhaleSettingModule.m

#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(AdWhaleSettingModule, NSObject)

RCT_EXTERN_METHOD(showGDPR:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)

@end

3. Expo (React Native) 연동 코드

AdWhaleSetting.tsx

import React, { useEffect } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { NativeModules } from 'react-native';

const { AdWhaleSettingModule } = NativeModules;

export default function AdWhaleSetting() {
  useEffect(() => {
    const showGDPR = async () => {
      try {
        const result = await AdWhaleSettingModule.showGDPR();
        console.log(`[adwhale] [sample UI] GDPR 표시 완료. 결과: ${result}`);
      } catch (error) {
        console.error(`[adwhale] [sample UI] GDPR 표시 실패: ${error}`);
      }
    };

    showGDPR();
  }, []);

  return null;
}

App.tsx

import React from 'react';
import { StyleSheet, View, SafeAreaView } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import InterstitialAd from './src/components/InterstitialAd';
import RewardAd from './src/components/RewardAd';
import AdWhaleSetting from './src/components/AdWhaleSetting';
import BannerAd from './src/components/BannerAd';

export default function App() {
  return (
    <SafeAreaView style={styles.safeArea}>
      <View style={styles.mainViewStyle}>
        <StatusBar style="auto" />
        <View style={styles.contentViewStyle}>
            <AdWhaleSetting />
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: 'white'
  },
  mainViewStyle: {
    flex: 1,
    marginTop: 50
  },
  contentViewStyle: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'                
  },
});

3. 타겟팅 설정

광고 요청에 타겟팅 정보를 제공합니다.
구글 플레이스토어의 콘텐츠 설정과 SDK 설정이 반드시 동일하게 설정되어야 합니다.

아동 대상 설정
- 아동 온라인 개인 정보 보호법(COPPA)에 따라 tagForChildDirectedTreatment 설정이 가능합니다.
- 광고를 요청할 때 콘텐츠의 아동 대상 서비스 취급 여부를 지정할 수 있습니다.
- 콘텐츠를 아동 대상으로 처리하도록 지정하면 해당 광고 요청에 대한 관심 기반 광고 및 리마케팅 광고가 사용 중지됩니다.

AdWhaleAds.sharedInstance.tagForChildDirectedTreatment(true)

tagForChildDirectedTreatment 설정

설명

true

COPPA에 따라 콘텐츠를 아동 대상으로 처리하도록 지정하는 경우

false

COPPA에 따라 콘텐츠를 아동 대상으로 처리하지 않도록 지정하는 경우

미설정

광고 요청에서 COPPA에 따른 콘텐츠 취급 방법을 지정하지 않는 경우

동의 연령 미만 사용자 설정 방법

유럽 경제 지역(EEA)에 거주하는 동의 연령 미만의 사용자를 대상으로 하는 서비스로 취급하도록 광고 요청에 표시할 수 있습니다.
TFUA(동의 연령 미만의 유럽 사용자가 대상임을 나타내는 태그) 매개변수가 광고 요청에 포함되며, 모든 광고 요청에서 리마케팅을 포함한 개인 맞춤 광고가 사용 중지됩니다.
true 로 설정하는 경우 IDFA 수집도 차단됩니다.
아동 대상 설정과 동시에 true 로 설정하면 안 되며, 이 경우 아동 대상 설정이 우선 적용됩니다.

AdWhaleAds.sharedInstance.tagForUnderAgeOfConsent(true)

tagForUnderAgeOfConsent 설정

설명

true

광고 요청이 EEA에 거주하는 동의 연령 미만의 사용자를 대상으로 처리하도록 지정하는 경우

미설정

광고 요청이 EEA에 거주하는 동의 연령 미만의 사용자 취급 방법을 지정하지 않는 경우

3. 광고 콘텐츠 필터링

광고 내 관련 혜택이 포함된 Google Play의 부적절한 광고 정책을 준수하려면 콘텐츠 자체가 Google Play 정책을 준수하더라도 앱에 표시되는 모든 광고 및 관련 혜택은 앱의 콘텐츠 등급에 적합해야 합니다.
광고 콘텐츠 등급 한도가 설정된 경우 콘텐츠 등급이 설정된 한도 이하인 광고가 게재되며, 다음 중 하나로 설정해야합니다.
콘텐츠 등급 한도 설정에 대해 각 광고 요청에 대한 콘텐츠 등급 한도 설정하기 또는 앱 또는 계정의 광고 콘텐츠 등급 한도 설정하기 를 참고 부탁드립니다.

광고 콘텐츠 등급 한도 (Objective-C)

광고 콘텐츠 등급 한도 (Swift)

AdWhaleMaxAdContentRatingGeneral

.general

AdWhaleMaxAdContentRatingParentalGuidance

.parentalGuidance

AdWhaleMaxAdContentRatingTeen

.teen

AdWhaleMaxAdContentRatingMatureAudience

.matureAudience

AdWhaleAds.sharedInstance.maxAdContentRating(.general)

4. 테스트 기기 등록

광고 테스트 기기 등록

시뮬레이터는 기본적으로 테스트 기기이므로 기기 ID 목록에 추가할 필요가 없습니다.
앱을 출시하기 전에 이러한 테스트 기기 ID를 설정하는 코드를 삭제해야 합니다.

개발 단계에서 광고를 테스트 하려면 프로그래밍 방식으로 테스트 기기를 등록하세요.

AdWhale SDK를 탑재한 앱에서 광고를 한 번 요청합니다.
로그 출력에서 다음 메시지를 확인합니다.

<Google> To get test ads on this device, set:
GADMobileAds.sharedInstance.requestConfiguration.testDeviceIdentifiers =
@[ @"2077ef9a63d2b398840261c8221a0c9b" ];

테스트 기기 ID를 복사합니다.
다음을 통해 테스트 장치 ID를 설정하도록 코드를 수정합니다.

AdWhaleAds.sharedInstance.setTestDeviceIdentifiers(testDeviceIdentifiers: "2077ef9a63d2b398840261c8221a0c9b")

GDPR 테스트 기기 등록

시뮬레이터는 기본적으로 테스트 기기이므로 기기 ID 목록에 추가할 필요가 없습니다.
앱을 출시하기 전에 이러한 테스트 기기 ID를 설정하는 코드를 삭제해야 합니다.

개발 단계에서 유럽 경제 지역(EEA) 외 국가에서 GDPR 사용 테스트를 하려면 프로그래밍 방식으로 테스트 기기를 등록하세요.

SDK 초기화 단계의 initialize 를 호출합니다.
로그 출력에서 다음 메시지를 확인합니다.

<UMP SDK>To enable debug mode for this device, set: UMPDebugSettings.testDeviceIdentifiers = @[2077ef9a63d2b398840261c8221a0c9b];

테스트 기기 ID를 복사합니다.
initialize 속성 중 testDevices 에 테스트 기기 ID를 전달합니다.

AdWhaleAds.sharedInstance.initialize(rootViewController: self, useGdpr: true, testDevices: ["2077ef9a63d2b398840261c8221a0c9b"], completionHandler: {
})

PreviousExpo 환경 설정 Next4. 광고 구현

Last updated 1 month ago

hashtag1. SDK 초기화

hashtag1. AdWhaleSettingModule.swift

hashtag2. AdWhaleDelegate.m

hashtagAppDelegate.swift

hashtag2. GDPR

hashtag1. AdWhaleSettingModule.swift

hashtag2. AdWhaleSettingModule.m

hashtag3. React Native 연동 코드

hashtagAdWhaleSetting.tsx

hashtagApp.tsx

hashtag1. AdWhaleSettingModule.swift

hashtag2. AdWhaleSettingModule.m

hashtag3. Expo (React Native) 연동 코드

hashtagAdWhaleSetting.tsx

hashtagApp.tsx

hashtag3. 타겟팅 설정

hashtag4. 테스트 기기 등록

1. SDK 초기화

1. AdWhaleSettingModule.swift

2. AdWhaleDelegate.m

AppDelegate.swift

2. GDPR

1. AdWhaleSettingModule.swift

2. AdWhaleSettingModule.m

3. React Native 연동 코드

AdWhaleSetting.tsx

App.tsx

1. AdWhaleSettingModule.swift

2. AdWhaleSettingModule.m

3. Expo (React Native) 연동 코드

AdWhaleSetting.tsx

App.tsx

3. 타겟팅 설정

4. 테스트 기기 등록