5. Native Ad‎ > ‎

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

 property 내용
 logicNameNative 광고를 가져오기 위한 Display Logic 명칭을 설정합니다. Display Logic 을 지정하면 Tnk 사이트에서 원하는 형태의 광고를 띄우도록 제어할 수 있습니다. ( [Display Logic] 참고)
Display Logic을 사용하지 않는 경우 보상형 광고의 경우에는 TNK_PPI, 비보상형 광고의 경우에는 TNK_CPC (기본값) 를 넣어줍니다.
 delegate TnkNativeAdDelegate 객체를 지정합니다.
 adStyle Native Ad의 형식을 지정합니다. (아래 Ad Style 참고)

- 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
                               ^                                                  |
                               +---------------------------+


하위 페이지 (1): NativeAdManager
Comments