2) iOS

Native 광고 적용을 위해서는 Tnk 사이트에서 앱 등록 및 TnkAd SDK 관련 설정이 필요합니다.

[iOS Settings] 내용을 우선 확인해 주세요.

[TnkNativeAd Loading]

아래와 같이 호출하여 Landscape 형태의 소재이미지를 사용하는 Native Ad를 로딩할 수 있습니다.

NativeAdItem

#import "tnksdk.h"

@interface ViewController : UIViewController <TnkNativeAdDelegate> {

// ...

}

@end

@implementation ViewController {

TnkNativeAd *tnkNative;

}

- (void)viewDidLoad {

[super viewDidLoad];

// 1) Native Ad 광고용 객체 생성

tnkNative = [[TnkNativeAd alloc] init];

tnkNative.adStyle = AD_STYLE_LANDSCAPE; // 가로 이미지 가져오도록 설정한다.

// 2) 네이티브 광고 한건 가져온다.

[tnkNative prepare:@"cross_first" delegate:self];

}

#pragma mark - TnkNativeAdDelegate

- (void) didNativeAdLoad:(TnkNativeAd *)ad {

NSLog(@"Native Ad Loaded : %@", ad.logicName);

// Rendering native Ad

}

[NativeAd 표시하기]

Native Ad 데이터가 로딩되면 TnkNativeAdDelegate의 didNativeAdLoad: 메소드가 호출되며 이때 TnkNativeAd 객체가 파라메터로 전달됩니다.

전달된 TnkNativeAd 객체가 제공하는 데이터를 사용하여 Native Ad를 화면에 표시합니다.

Rendering Native Ad

#pragma mark - TnkNativeAdDelegate

- (void) didNativeAdLoad:(TnkNativeAd *)ad {

NSLog(@"Native Ad Loaded : %@", ad.logicName);

// Rendering native Ad

[self.coverImageView setImage:[ad getCoverImage]];

[self.iconImageView setImage:[ad getIconImage]];

[self.titleLabel setText:[ad getTitle]];

[self.descLabel setText:[ad getDescription]];

[ad attachLayout:self.coverImageView];

}

광고가 화면에 노출될 때의 Impression 처리는 SDK에서 자동으로 처리됩니다. 이를 위해서는 Native Ad를 화면에 표시하고 있는 UIView 객체를 TnkNativeAd의 attachLayout: 메소드를 사용하여 지정해야합니다.

로딩된 Native 광고가 더 이상 필요하지 않는 경우에는 detachLayout을 호출한 후 TnkNativeAd 객체를 재 사용할 수 있습니다.

[NativeAd 클릭처리]

사용자가 Native Ad를 클릭하였을때 광고 페이지로 이동하는 것은 2가지 방법이 있습니다. 첫번째는 attachLayout:clickView: 메소드를 사용하여 attachLayout 의 두번째 파라메터로 클릭 이벤트를 처리할 UIView를 지정하는 방법입니다. 이때에 사용자가 clickView로 지정한 UIView 를 tap 할 경우 자동으로 광고 페이지로 이동합니다. 두번째 방법은 클릭 처리를 직접 코딩하는 방법입니다. 클릭 이벤트 발생시 TnkNativeAd 객체의 handleClick 메소드를 호출합니다.

Native Ad Click #1

#pragma mark - TnkNativeAdDelegate

- (void) didNativeAdLoad:(TnkNativeAd *)ad {

NSLog(@"Native Ad Loaded : %@", ad.logicName);

// Rendering native Ad

[self.coverImageView setImage:[ad getCoverImage]];

[self.iconImageView setImage:[ad getIconImage]];

[self.titleLabel setText:[ad getTitle]];

[self.descLabel setText:[ad getDescription]];

// AttachLayout의 두번째 파라미터로 클릭대상 View를 지정한다.

[ad attachLayout:self.coverImageView clickView:self.coverImageView];

}

Native Ad Click #2

#pragma mark - TnkNativeAdDelegate

- (void) didNativeAdLoad:(TnkNativeAd *)ad {

NSLog(@"Native Ad Loaded : %@", ad.logicName);

// Rendering native Ad

[self.coverImageView setImage:[ad getCoverImage]];

[self.iconImageView setImage:[ad getIconImage]];

[self.titleLabel setText:[ad getTitle]];

[self.descLabel setText:[ad getDescription]];

[ad attachLayout:self.coverImageView];

}

// 클릭 이벤트 발생기 handleClick 메소드를 호출한다.

- (IBAction) didNativeAdButtonPressed:(id)sender {

[tnkNative handleClick];

}

[TnkNativeAdDelegate]

Native Ad의 로딩이 완료되거나 화면에 노출되는 경우 또는 사용자가 광고를 클릭하는 경우 해당 이벤트 발생시점에 필요한 로직을 구현하기 위해서

아래의 TnkNativeAdDelegate 프로토콜을 구현합니다.

TnkNativeAdDelegate Protocol

#define AD_FAIL_NO_AD -1 // no ad available

#define AD_FAIL_NO_IMAGE -2 // ad image not available

#define AD_FAIL_TIMEOUT -3 // ad arrived after 5 secs.

#define AD_FAIL_SYSTEM -9

@protocol TnkNativeAdDelegate <NSObject>

@optional

- (void) didNativeAdFail:(TnkNativeAd *)ad error:(int)errCode;

- (void) didNativeAdLoad:(TnkNativeAd *)ad;

- (void) didNativeAdClick:(TnkNativeAd *)ad;

- (void) didNativeAdShow:(TnkNativeAd *)ad;

@end

[TnkNativeAd Interface]

TnkNativeAd Interface

@interface TnkNativeAd : NSObject <TnkServiceCallback>

@property (nonatomic, weak) id<TnkNativeAdDelegate> delegate;

@property (nonatomic, strong) NSString *logicName;

@property (nonatomic, assign) NSInteger adStyle;

- (void) prepare:(NSString *)logicName;

- (void) prepare:(NSString *)logicName delegate:(id<TnkNativeAdDelegate>)delegate;

- (void) prepare;

// Common data for PPI, CPC

- (UIImage *) getCoverImage;

- (UIImage *) getIconImage;

- (NSString *) getTitle;

- (NSString *) getDescription;

// for PPI only

- (NSString *) getPointName;

- (NSNumber *) getRewardPoint;

- (NSInteger) getRewardType;

- (NSString *) getActionText;

// attach, detach

- (void) attachLayout:(UIView *)view;

- (void) attachLayout:(UIView *)view clickView:(UIView *)clickView;

- (UIView *) getAttachedLayout;

- (void) detachLayout;

- (void) handleClick;

@end

- properties

- Ad Style

표현하고자하는 광고 형태에 맞추어 AdStyle을 지정합니다.

- Cover Image

  • AD_STYLE_TEXT_ONLY : Cover Image를 사용하지 않는 경우 지정합니다.

  • AD_STYLE_PORTRAIT : 세로 방향의 Cover Image를 사용하는 경우 지정합니다.

  • AD_STYLE_LANDSCAPE : 가로 방향의 Cover Image를 사용하는 경우 지정합니다.

  • AD_STYLE_SQUARE : 정방형의 Cover Image를 사용하는 경우 지정합니다.

  • AD_STYLE_BANNER_LANDSCAPE : 가로 배너 소재 이미지입니다. (720 x 100)

  • AD_STYLE_BANNER_LANDSCAPE_200 : 가로 배너 소재 이미지입니다. (720 x 200)

- Ad Icon

  • AD_STYLE_ICON : Icon 이미지를 필요로 할 때 지정합니다.

Cover Image와 Ad Icon 설정은 OR 연산을 사용하여 동시에 지정할 수 있습니다.

적용 예시

Ad Style 적용 예시

tnkNative = [[TnkNativeAd alloc] init];

// 가로 이미지와 아이콘 이미지를 가져오도록 설정한다.

tnkNative.adStyle = AD_STYLE_LANDSCAPE | AD_STYLE_ICON;

// 세로 이미지를 가져오도록 설정한다. (아이콘 이미지는 사용하지 않음)

tnkNative.adStyle = AD_STYLE_PORTRAIT;

// 커버이미지 사용하지 않고 아이콘 이미지만 가져오도록 설정한다.

tnkNative.adStyle = AD_STYLE_ICON;

// 커버이미지와 아이콘이미지를 모두 사용하지 않고 Text 문구만 사용한다.

tnkNative.adStyle = AD_STYLE_TEXT_ONLY;

- prepare

Method

- (void) prepare

- (void) prepare:(NSString *)logicName

- (void) prepare:(NSString *)logicName delegate:(id<TnkNativeAdDelegate>)delegate

Description

Native 광고를 서버에서 한건 로딩합니다. logicName 과 delegate 파라메터는 properties에 설명된 것과 같습니다.

  • Native 광고가 로딩이 완료되면 delegate의 didNativeAdLoad: 가 호출되며

  • 로딩이 실패하면 didNativeAdFail:error: 가 호출됩니다.

  • 만약에 prepare 를 호출하고 로딩된 광고가 화면에 표시되기 전에 다시 prepare 를 호출하면 그 prepare는 무시됩니다.

- Native Ad 항목 가져오기

NativeAdItem의 loading이 완료되면 아래의 메소드들을 사용하여 광고 표시를 위한 항목들에 접근할 수 있습니다.

  • - (NSString *) getTitle : 광고 타이틀을 반환합니다.

  • - (NSString *) getDescription : 광고 설명 문구를 반환합니다.

  • - (UIImage *) getIconImage : 광고 Icon 이미지를 반환합니다. Ad Style 파라미터로 AD_STYLE_ICON 이 지정되지 않은 경우에는 null 이 반환됩니다.

  • - (UIImage *) getCoverImage : 광고 cover 이미지를 반환합니다. Ad Style 파라미터로 AD_STYLE_PORTRAIT 나 AD_STYLE_LANDSCAPE를 지정하지 않았다면 null 이 반환됩니다.

보상형 광고의 경우에는 아래의 항목들을 추가적으로 제공합니다.

  • - (NSNumber *) getRewardPoint : 사용자가 광고에 참여하여 받을 수 있는 포인트를 반환합니다.

  • - (NSString *) getPointName : 포인트의 명칭을 반환합니다. (예 : 크리스탈, 루비, 골드 등)

  • - (NSInteger) getRewardType : 리워드 지급 방식을 반환합니다. (1: 실횅형, 2: 액션형)

  • - (NSString *) getActionText : 리워드 지급 방식이 액션형인 경우 사용자가 수행해야할 액션에 대한 설명을 반환합니다.

- Attach & Detach Layout

광고의 내용이 화면에 표시되면 화면의 광고 영역을 TnkNativeAd 객체에 attach 해주어야 합니다. 이를 위해서 attachLayout: 메소드를 호출합니다. 이후에는 광고의 노출에 대한 Impression 처리와 사용자가 광고를 클릭했을 경우 페이지 이동에 대한 처리가 자동적으로 이루어 집니다.

- (void) attachLayout:(UIView *)view

광고가 표현된 영역을 지정합니다.

- (void) attachLayout:(UIView *)view clickView:(UIView *)clickView;

광고가 표현된 영역을 지정하고 clickView로 지정된 view에 대해서 click 처리를 합니다.

- (void) detachLayout

광고 영역에 다른 광고를 보여줄 경우에는 우선 기존에 attach되어 있는 TnkNativeAd 객체의 detachLayout 메소드를 호출하여야 합니다. 이 경우 detach된 TnkNativeAd 객체는 상태가 초기화가 되며 다시 사용하기 위해서는 prepare를 호출하여 다시 광고를 loading 해야합니다.

TnkNativeAd 객체의 lifecycle은 아래와 같습니다.

Instantiated -> prepare -> attachLayout -> detachLayout

^ |

+---------------------------+