ApPopcornSSP

iOS 네이티브 광고 미디에이션 레이아웃 가이드 입니다.

1. 스토리 보드에 UI view 생성

스토리보드에 UIView 생성 후 Custom Class을 AdPopcornSSPNativeAd 설정

2. AdPopcornSSPNativeAd 영역 내 실제 광고 영역 추가

AdPopcornSSPNativeAd 영역 안에 미디에이션 업체의 실제 광고 영역 추가 및 viewcontroller에 outlet 연결합니다.

v2.4.6 버전부터 지원하는 네이티브 템플릿을 활용하고자 하는 경우 icon, main, title, desc, cta view를 생성하지 않고 apSSPNativeAdView 영역까지만 설정해 주시면 됩니다.

3. UI component를 SDK에 매칭

1,2 단계에서 생성한 UI Componenet 요소를 SDK에 매칭합니다.

AdPopcornSSP의 경우 v2.4.6 버전부터 직접 설정 이외에 템플릿 기능도 추가되었습니다.

이에 직접 설정 혹은 템플릿 사용 방식 중 하나를 선택해 사용하시기 바랍니다. 단, 템플릿 설정 시, 애드팝콘 사업팀에 사용 문의를 먼저 해주시기 바랍니다.

1) 직접 설정

storyboard에서 생성한 ui view를 APSSPNativeAdRenderer를 사용하여 sdk에 전달합니다.- (void)viewDidLoad {

Objective-C

#import <AdPopcornSSP/AdPopcornSSPNativeAd.h>	

- (void)viewDidLoad {
    [super viewDidLoad];   
    // Do any additional setup after loading the view.
    APSSPNativeAdRenderer *apSSPNativeAdRenderer = [[APSSPNativeAdRenderer alloc] init];
    apSSPNativeAdRenderer.apSSPNativeAdView = _apSSPNativeAdView;
    apSSPNativeAdRenderer.titleLabel = _apSSPTitleView;
    apSSPNativeAdRenderer.descLabel = _apSSPDescView;
    apSSPNativeAdRenderer.mainImageView = _apSSPMainImageView;
    apSSPNativeAdRenderer.iconImageView = _apSSPIconImageView;
    apSSPNativeAdRender.ctaLabel = _apSSPCTAView;

    // PrivacyIcon 관련 커스터마이징 옵션
    apSSPNativeAdRenderer.privacyIconVisibility = YES;
    apSSPNativeAdRenderer.privacyIconPosition = 1;
    apSSPNativeAdRenderer.privacyIconWidth = 15;
    apSSPNativeAdRenderer.privacyIconHeight = 15;
    apSSPNativeAdRenderer.privacyIconTopMargin = 2;
    apSSPNativeAdRenderer.privacyIconLeftMargin = 2;
    apSSPNativeAdRenderer.privacyIconBottomtMargin = 2;
    apSSPNativeAdRenderer.privacyIconRightMargin = 2;
    [_adPopcornSSPNativeAd setApSSPRenderer:apSSPNativeAdRenderer superView:_apSSPNativeAdView];
}

Swift

override func viewDidLoad() 
{
    super.viewDidLoad()
    apSSPNativeAdRenderer = APSSPNativeAdRenderer.init()        
    apSSPNativeAdRenderer.apSSPNativeAdView = apSSPNativeAdView
    apSSPNativeAdRenderer.titleLabel = apSSPTitleView
    apSSPNativeAdRenderer.descLabel = apSSPDescView
    apSSPNativeAdRenderer.mainImageView = apSSPMainImageView
    apSSPNativeAdRenderer.iconImageView = apSSPIconImageView
    
    // PrivacyIcon 관련 커스터마이징 옵션
    apSSPNativeAdRenderer.privacyIconPosition  = 1
    apSSPNativeAdRenderer.privacyIconTopMargin = 2
    apSSPNativeAdRenderer.privacyIconLeftMargin = 2
    apSSPNativeAdRenderer.privacyIconBottomtMargin = 2
    apSSPNativeAdRenderer.privacyIconRightMargin = 2
        
    adPopcornSSPNativeAd.setApSSPRenderer(apSSPNativeAdRenderer, superView: apSSPNativeAdView)
}

APSSPNativeAdRenderer를 생성한 뒤, 애드팝콘 SSP 네이티브 광고에서 지원하는 title, desc, mainImageView, iconImageView를 전달합니다.

단, 이 때 이 4개의 component들은 하나의 UIView 영역 안에 포함되어 있어야 하며, 해당 superview는 apSSPNativeAdView에 반드시 전달해 주어야 합니다.

APSSPNativeAdRenderer에 각 component를 세팅 후, setApSSPRenderer:superView: API를 통해 renderer와 apSSPNativeAdView를 sdk 최종적으로 전달합니다.

privacyIcon 관련 커스터마이징은 원할 경우 사용 가능하며, 위에 샘플 코드에 설정된 값이 default 값 입니다.

privacyIconPosition 은 아래와 같이 설정 가능합니다.

• TOP_LEFT = 0

• TOP_RIGHT = 1 // 기본 값

• BOTTOM_LEFT = 2

• BOTTOM_RIGHT = 3

2) 템플릿 사용

storyboard에서 생성한 ui view를 APSSPNativeAdRenderer를 사용하여 sdk에 전달한다. 단, title, description, icon, main image, cta를 설정해 줄 필요 없이 최상위 view 전달과 useTemplate 값을 YES로 설정해 주시면 됩니다.

Objective-C

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    APSSPNativeAdRenderer *apSSPNativeAdRenderer = [[APSSPNativeAdRenderer alloc] init];
    apSSPNativeAdRenderer.apSSPNativeAdView = _apSSPNativeAdView;
    apSSPNativeAdRenderer.useTemplate = YES;
    [_adPopcornSSPNativeAd setApSSPRenderer:apSSPNativeAdRenderer superView:_apSSPNativeAdView];
}

Swift

override func viewDidLoad() 
{
    super.viewDidLoad()
    apSSPNativeAdRenderer = APSSPNativeAdRenderer.init()
    apSSPNativeAdRenderer.apSSPNativeAdView = apSSPNativeAdView
    apSSPNativeAdRenderer.useTemplate = true
    adPopcornSSPNativeAd.setApSSPRenderer(apSSPNativeAdRenderer, superView: apSSPNativeAdView)
}