FAN(Facebook Audience Network)

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

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

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

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

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

UI 배치와 관련한 상세한 가이드는 FAN 공식 홈페이지의 아래 주소에서 확인하시기 바랍니다.

https://developers.facebook.com/docs/audience-network/ios-native

3. UI component를 SDK에 매칭

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

storyboard에서 생성한 UI view를 APFANNativeBannerAdRenderer 를 사용하여 sdk에 전달한다.

Objective-C

#import <AdPopcornSSP/AdPopcornSSPNativeAd.h>	
#import "FANAdapter.h"

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    APFANNativeAdRenderer *apFANNativeAdRenderer = [[APFANNativeAdRenderer alloc] init];
    apFANNativeAdRenderer.adUIView = _adFANUIView;
    apFANNativeAdRenderer.adIconImageView = _adIconImageView;
    apFANNativeAdRenderer.adTitleLable = _adTitleLabel;
    apFANNativeAdRenderer.adBodyLabel = _adBodyLabel;
    apFANNativeAdRenderer.adSponsoredLabel = _sponsoredLabel;
    apFANNativeAdRenderer.adCoverMediaView = _adCoverMediaView;
    apFANNativeAdRenderer.adSocialContextLabel = _adSocialContextLabel;
    apFANNativeAdRenderer.adChoicesView = _adChoicesView;
    apFANNativeAdRenderer.adCallToActionButton = _adCallToActionButton;
    [_adPopcornSSPNativeAd setFANNativeRenderer:apFANNativeAdRenderer superView:_adFANUIView];}

Swift

override func viewDidLoad() 
{
    super.viewDidLoad()
    apFANNativeAdRenderer = APFANNativeAdRenderer.init()
    apFANNativeAdRenderer.adUIView = _adFANUIView
    apFANNativeAdRenderer.adIconImageView = _adIconImageView
    apFANNativeAdRenderer.adTitleLable = _adTitleLabel
    apFANNativeAdRenderer.adBodyLabel = _adBodyLabel
    apFANNativeAdRenderer.adSponsoredLabel = _sponsoredLabel
    apFANNativeAdRenderer.adCoverMediaView = _adCoverMediaView
    apFANNativeAdRenderer.adSocialContextLabel = _adSocialContextLabel
    apFANNativeAdRenderer.adChoicesView = _adChoicesView
    apFANNativeAdRenderer.adCallToActionButton = _adCallToActionButton
    adPopcornSSPNativeAd.setFANNativeRenderer(apFANNativeAdRenderer, superView: _adFANUIView)
}

APFANNativeAdRenderer를 생성한 뒤, FAN 네이티브 광고에서 지원하는 ui componenet를 전달하여 준다. 단, 이 때 모든 UI component들은 하나의 UIView 영역 안에 포함되어 있어야 하며, 해당 superview는 adUIView 에 반드시 전달해 주어야 합니다.

FANNativeAd의 경우 adCoverMediaView(FBMediaView)를 필수로 포함해야 광고가 정상적으로 노출됩니다.

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