Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Table of Contents

개요

이 가이드는 iOS 앱 내의 웹뷰 (WKWebView만 지원)에서 광고를 보여주기 위해 필요한 iOS SDK 연동 사항을 담고 있습니다. 광고를 보여줄 웹페이지는 Web SDK 연동해야 합니다.

최소 지원 버전: 1.2.16

주의사항

  1. 아이폰의 경우 WKWebView 만 지원합니다.

  2. Deployment Target 10.0 이상에서만 지원합니다.

설치

1. Cocoapods 사용 (권장)

Podfile에 아래 코드 추가

...

WebView에서 광고를 표시하기 위한 BuzzAd-Benefit Web iOS용 SDK 연동 방법을 안내합니다.

1 단계: 연동용 ID 발급받기

BuzzAd Android SDK를 연동하려면 반드시 앱의 고유 식별자인 App ID와 광고 지면의 고유 식별자 Unit ID가 필요합니다. 연동용 ID를 발급받으려면 버즈빌 담당자에게 연락하세요.

ID 유형

설명

App ID

BuzzAd Android용 SDK를 연동하는 앱 별로 부여하는 고유 식별자입니다.

Unit ID

앱 내에 광고 지면별로 부여하는 고유 식별자입니다.

 

2 단계: SDK 설치하기

BuzzAd iOS용 SDK를 설치하려면 CocoaPods을 사용하여 Podfile에 BuzzAd SDK를 추가하세요.

Code Block
languagebashobjective-c
pod 'BuzzAdBenefit', '2= 3.20.5'

2. Manual Import

1) 프로젝트에 framework 추가

[프로젝트 메뉴] -> [General] -> [Embedded Binaries] 섹션에 다음 framework들을 추가합니다.

  • BuzzAdBenefit.framework

  • AFNetworking.framework

  • SDWebImage.framework

  • libwebp.framework

(AFNetworking.framework, SDWebImage.framework, libwebp.framework는 본 저장소 Dependencies 폴더에서 다운받을 수 있습니다.)

2) Run script 추가

[프로젝트 메뉴] -> [Build Phases] 탭에서 '+' 버튼을 눌러 New Run Script Phase를 추가하고 아래 스크립트를 붙여 넣습니다. 이 과정은 universal framework로 빌드된 바이너리에서 불필요한 architecture들을 떼어내기 위해 필요합니다. 

3단계: SDK 초기화하기

AppDelegateapplication:didFinishLaunchingWithOptions에서 [BuzzAdBenefit initializeWithConfig:]를 호출해 BuzzAd iOS용 SDK를 초기화하세요.

Objective-C
// Swift let config = BABConfig(appId: YOUR_APP_ID)
Code Block
Code Block
languageswift
languagebash
APP_PATH="${TARGET_BUILD_DIR}/${WRAPPER_NAME}"

find "$APP_PATH" -name '*.framework' -type d | while read -r FRAMEWORK; do
FRAMEWORK_EXECUTABLE_NAME=$(defaults read "$FRAMEWORK/Info.plist" CFBundleExecutable)
FRAMEWORK_EXECUTABLE_PATH="$FRAMEWORK/$FRAMEWORK_EXECUTABLE_NAME"

EXTRACTED_ARCHS=()

for ARCH in $ARCHS; do
echo "Extracting $ARCH from $FRAMEWORK_EXECUTABLE_NAME"
lipo -extract "$ARCH" "$FRAMEWORK_EXECUTABLE_PATH" -o "$FRAMEWORK_EXECUTABLE_PATH-$ARCH"
EXTRACTED_ARCHS+=("$FRAMEWORK_EXECUTABLE_PATH-$ARCH")
done

echo "Merging extracted architectures: ${ARCHS}"
lipo -o "$FRAMEWORK_EXECUTABLE_PATH-merged" -create "${EXTRACTED_ARCHS[@]}"
rm "${EXTRACTED_ARCHS[@]}"

echo "Replacing original executable with thinned version"
rm "$FRAMEWORK_EXECUTABLE_PATH"
mv "$FRAMEWORK_EXECUTABLE_PATH-merged" "$FRAMEWORK_EXECUTABLE_PATH"

done

SDK 연동

1 단계: BuzzAdBenefit 초기화

AppDelegate의 application:didFinishLaunchingWithOptions에 아래 코드를 추가할 것을 권장합니다. 단, 최초 광고 요청 전에만 불린다면 자유롭게 코드 위치를 결정할 수 있습니다.

  • YOUR_iOS_APP_ID 부분에 Web SDK 연동을 위해 준비한 APP_ID 삽입

Code Block
languageobjective-c
// Objective-C
BABConfig *config = [[BABConfig alloc] initWithAppId:YOUR_iOS_APP_ID];
[BuzzAdBenefit initializeWithConfig:config];
objective-c
@import BuzzAdBenefit;

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  BZVConfig *config = [BZVConfig configWithBlock:^(BZVConfigBuilder * _Nonnull builder) {
    builder.appId = @"YOUR_APP_ID";
  }];
  [BuzzAdBenefit initializeWithConfig:config];
  return YES;
}

@end
Swift
Code Block
languageswift
import BuzzAdBenefit

@main
final class AppDelegateSwift: UIResponder, UIApplicationDelegate {
  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
    let config = BZVConfig { builder in
      builder.appId = "YOUR_APP_ID"
    }
    BuzzAdBenefit.initialize(with: config)

...


    return true
  }

 

4 단계: 사용자

...

유저가 매체사 앱에 로그인한 시점에 아래와 같이 UserProfile 을 세팅합니다.

Info

User ID와 타게팅 정보 (성별, 연령)는 원활한 서비스 운영을 위해 제공해야 할 필수 항목입니다. 해당 값을 입력하는 setUserProfile 함수를 호출하지 않으면 광고가 제공되지 않습니다.

  • userId : 매체사 서비스 유저를 unique 하게 구분할 수 있는 식별값. 유저를 구별할 수만 있으면 매체사 서비스의 사용자 계정이 아니어도 됩니다.

Note

동일 유저에 대해 복수개의 User ID를 연동하거나 혹은 User ID 값이 변경될 가능성이 있을 경우, 버즈빌 담당 운영 매니저와 논의해야 합니다.

  • 예시: 매체사 앱 삭제 후 재설치 시 User ID 값이 변경되는 경우

...

gender

  • BABUserGenderMale: 남성

  • BABUserGenderFemale: 여성

...

프로필 등록하기

광고 할당을 요청하려면 사용자 프로필을 등록해야 합니다. 사용자 프로필을 구성하는 항목은 아래 표를 참고하세요.

사용자 프로필

설명

userId

매체사 앱에서 사용하는 사용자 식별자입니다. 서비스 도중 변하지 않는 고정 값이어야 하며, 광고 할당을 위해서 필수로 전달해야합니다.

Note

앱을 삭제 후 재설치하여 사용자의 ID 값이 변경되거나 다른 사유로 인해 고정 ID를 사용하지 못하는 경우 버즈빌 담당자에게 문의하세요.

gender

사용자의 성별입니다. 사용자 맞춤형 광고를 제공하는 데에 활용됩니다.

  • 남성: BZVUserGenderMale

  • 여성: BZVUserGenderFemale

birthYear

사용자의 출생연도입니다. 사용자 맞춤형 광고를 제공하는 데에 활용됩니다.

showAppTrackingTransparencyDialog

사용자의 활동 추적 권한 획득 팝업 노출 여부입니다. 필수가 아닌 권장 등록 정보입니다. 자세한 정보는 iOS 14를 위한 대응 토픽을 참고하세요.

다음은 SDK에 로그인을 요청하는 예시입니다. 로그인 상태를 확인하거나 로그아웃할 수도 있습니다.

Objective-C
Code Block
languageobjective-c
// Objective-C
BABUserProfile *userProfile = [[BABUserProfile alloc] initWithUserId:YOUR_SERVICE_USER_ID birthYear:1985 gender:BABUserGenderMale];
[BuzzAdBenefit setUserProfile:userProfile]; 로그인을 요청하는 코드입니다.
[BuzzAdBenefit loginWithBlock:^(BZVLoginRequestBuilder * _Nonnull builder) {
  builder.userId = @"USER_ID";
  builder.birthYear = YYYY;
  builder.gender = BZVUserGenderMale; // 남성 사용자
} onSuccess:^{
} onFailure:^(NSError * _Nonnull error) {
}];

// 로그인 상태를 확인하는 코드입니다.
[BuzzAdBenefit isLoggedIn];

// 로그아웃하는 코드입니다.
[BuzzAdBenefit logout];
Swift
Code Block
languageswift
// Swift
let userProfile = BABUserProfile(userId: YOUR_SERVICE_USER_ID, birthYear: 1985, gender: BABUserGenderMale)
BuzzAdBenefit.setUserProfile(userProfile)
Info

유저의 로그인 정보를 웹페이지에서 알 수 있지만 앱에서 알 수 없는 경우, 웹페이지에서 사용자 프로필을 설정하는 기능을 지원하고 있습니다.

...

 로그인을 요청하는 코드입니다.
BuzzAdBenefit.login { builder in
  builder.userId = "USER_ID"
  builder.gender = .male // 남성 사용자
  builder.birthYear = YYYY
} onSuccess: {
} onFailure: { error in
}

// 로그인 상태를 확인하는 코드입니다.
BuzzAdBenefit.isLoggedIn()

// 로그아웃하는 코드입니다.
BuzzAdBenefit.logout()

 

5단계: 광고를 표시할 웹뷰 설정

웹뷰 안에서 광고를 로드하려면 다음과 같이 웹뷰에 scriptMessageHandler를 추가한 뒤 웹뷰로 넘어오는 scriptMessage를 BABWebInterface 객체에게 전달해주어야 합니다.

Objective-C
Code Block
languageobjective-c
// Objective-C - (void)viewDidLoad {
  [super viewDidLoad];

  WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
  WKUserContentController *contentController = [[WKUserContentController alloc] init];
  [contentController addScriptMessageHandler:self name:BuzzAdBenefitWebInterfaceName];
  config.userContentController = contentController;
  config.allowsInlineMediaPlayback = true;

  _webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
  _webInterface = [[BABWebInterfaceBZVWebInterface alloc] initWithWebView:_webView];
  // 생략 ...
}

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
  [_webInterface handleScriptMessage:message];
  // 생략 ...
}
Swift
Code Block
languageswift
// Swift
override func viewDidLoad() {
  super.viewDidLoad()

  let config = WKWebViewConfiguration()
  let contentController = WKUserContentController()
  contentController.add(self, name: BuzzAdBenefitWebInterfaceName)
  config.userContentController = contentController
  config.allowsInlineMediaPlayback = true

  webView = WKWebView(frame: self.view.bounds, configuration: config)
  webInterface = BABWebInterfaceBZVWebInterface(webView: webView)
  // 생략 ...
}

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
  webInterface.handleScriptMessage(message)
  // 생략 ...
}
Note

‘http 인 광고를 https 에서 정상적으로 동작시키기 위해 info.plist 파일에 다음 설정이 필요합니다.’

Code Block
languagexml
<key>NSAppTransportSecurity</key>
<dict>
	<key>NSAllowsArbitraryLoadsInWebContent</key>
	<true/>
</dict>

4 단계: 사용자 정보 삭제

유저가 매체사 앱에서 로그아웃하는 시점에 UserProfile 설정값을 지워 유저의 사용 정보를 삭제합니다.

Code Block
languageobjective-c
// Objective-C
[BuzzAdBenefit setUserProfile:nil];

...

languageswift

...

6단계: 앱 빌드하기

BuzzAd iOS용 SDK를 사용하기 위한 모든 설정이 완료되었습니다. 앱을 빌드하고 정상적으로 실행되는지 확인하세요.

Github 샘플 코드를 통해 실제 구현에 사용된 예제를 참고할 수 있습니다.

 

다음 단계

광고 지면 추가하기

Web SDK 연동 가이드를 참고하여 웹 페이지에 Web SDK를 추가하고, 앱에 광고 지면을 표시하세요.

포인트 적립 서버 준비하기

사용자가 광고에 참여하면 포인트를 지급해야 하므로 포인트 적립 요청을 처리할 수 있는 서버가 필요합니다.

포인트 처리 서버를 준비하고, 포스트백 연동 가이드에 명시된 API 스펙에 따라 포스트백 API를 구현하세요.