직접 설정

iOS 환경에서 네이티브 광고 레이아웃을 직접 설정할 경우 가이드입니다.

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

스토리보드에 UIView 생성 후 Custom Class을 AdPopcornSSPNativeAd로 설정합니다.

AdPopcornSSPNativeAd View 안에 사용하고자 하는 UI component를 아래 샘플과 같이 추가합니다.

AdPopcornSSPNativeAd View

2. 실제 광고 영역 추가

AdPopcornSSPNativeAd 영역 안에 실제 광고 영역 추가합니다.

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

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

아래 스크린샷과 같이 native 영역 및 title, description, icon, main image, cta 영역까지 모두 수동으로 설정하여 영역을 지정해 주신 뒤, outlet 연결 진행해 주어야 합니다.

스크린샷이 없음

3. View controller 연결

1번, 2번 과정에서 생성한 UI component를 view controller에 outlet 연결합니다.

4. UI view를 SDK 에 전달

storyboard에서 생성한 Outlet 연결한 UI view를 APSSPNativeAdRenderer를 사용하여 sdk에 전달합니다.

Objective-C

- (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