Meta Audience Network

iOS 앱에 네이티브 광고 추가

네이티브 광고 API를 사용하면 앱에 표시되는 광고를 위한 맞춤 경험을 빌드할 수 있습니다. 표시할 준비가 된 광고를 수신하는 대신에 네이티브 광고 API를 사용하는 경우 제목, 이미지 또는 행동 유도와 같은 광고 속성 그룹이 제공되므로, 이러한 광고 속성을 사용하여 광고가 표시될 맞춤 UIView를 구성해야 합니다.

앱에서 네이티브 광고를 디자인할 때 네이티브 광고 가이드를 참조하세요.

다음과 같은 네이티브 광고 노출 위치를 구현해보겠습니다. 이를 위해서는 아래에 나열된 보기를 만들어야 합니다.

보기 #1: 광고주 아이콘

보기 #2: 광고 제목

보기 #3: Sponsored 레이블

보기 #4: 광고주 선택

보기 #5: 광고 미디어 보기

보기 #6: 소셜 컨텍스트

보기 #7: 광고 본문

보기 #8: 광고 행동 유도 버튼


1단계: Storyboard에서 네이티브 광고 보기 만들기

2단계: 네이티브 광고 읽어들이기 및 표시하기

3단계: 콘텐츠 화면 비율 확인 및 자연폭/높이 적용 방법

4단계: 노출 및 클릭 로깅 확인하기

5단계: 광고가 표시되지 않을 때 디버깅하는 방법

6단계: 자동 캐시 없이 광고 읽어들이기

7단계: 테스트 광고 통합

변경 사항의 알려진 문제 보기

1단계: Storyboard에서 네이티브 광고 보기 만들기

계속하기 전에 Audience Network 시작하기 및 iOS 시작하기 가이드를 완료했는지 확인하세요.

네이티브 광고 및 배너 광고 제작 시 최적의 사용자 경험을 위해 iOS 레이아웃 가이드라인을 따라야 합니다.

  1. iOS 시작하기 가이드에서 새 프로젝트를 만든 후 Main.storyboard를 엽니다. UIView 요소를 기본 보기 요소에 추가하고 이름을 adUIView로 지정합니다.


  2. 그런 다음 아래 이미지에 표시된 대로 adIconImageView(FBMediaView), adTitleLabel(UILabel), adCoverMediaView(FBMediaView), adSocialContext(UILabel), adCallToActionButton(UIButton), adOptionsView(FBAdOptionsView), adBodyLabel(UILabel), sponsoredLabel(UILabel)을 adUIView 아래에 추가합니다.


  3. View Controller Scene(컨트롤러 장면 보기) 근처에 빨간색 화살표가 표시될 수 있습니다. 이 화살표는 일반적으로 레이아웃에 제약 조건이 누락되었을 때 표시됩니다.


    장면에서 모든 보기 개체를 선택하고 "레이아웃 문제 해결" 아이콘을 클릭하여 누락된 제약 조건을 추가해야 할 수도 있습니다.


  4. 이제 네이티브 광고를 표시하기 위한 UI 요소를 모두 만들었으므로 View Controller 인터페이스에서 이 UI 요소들을 참조해야 합니다. 먼저 ViewController.m(Swift를 사용할 경우 ViewController.swift)을 연 다음, ViewController 개체 내부로 adUIView를 끌어옵니다. 이름을 adUIView로 지정할 수 있습니다. 그런 다음 adIconImageView, adTitleLabel, adCoverMediaView, adSocialContext, adCallToActionButton, adOptionsView, adBodyLabel, sponsoredLabel에 대해 같은 단계를 반복합니다.


  5. 프로젝트를 빌드하고 실행합니다. 다음과 같이 기기 또는 시뮬레이터에 빈 콘텐츠가 표시됩니다.

이제 네이티브 광고를 표시하기 위한 UI 요소를 모두 만들었으므로, 다음 단계에서는 네이티브 광고를 읽어들이고 콘텐츠를 UI 요소에 바인딩합니다.

2단계: 네이티브 광고 읽어들이기 및 표시하기

  1. View Controller 소스 파일에서 SDK를 가져오고, ViewController가 FBNativeAdDelegate 프로토콜을 준수함을 선언한 뒤 FBNativeAd 인스턴스 변수를 추가합니다. 
    import UIKit
import FBAudienceNetwork

class ViewController: UIViewController, FBNativeAdDelegate {
    
  private var nativeAd: FBNativeAd?
}
    #import <UIKit/UIKit.h>
@import FBAudienceNetwork;

@interface ViewController () <FBNativeAdDelegate>

@property (strong, nonatomic) FBNativeAd *nativeAd;

@end

  2. viewDidLoad 메서드에 다음의 코드를 추가하여 네이티브 광고 콘텐츠를 읽어들입니다. 
    override func viewDidLoad() {
  super.viewDidLoad()
    
  let nativeAd = FBNativeAd(placementID: "YOUR_PLACEMENT_ID")
  nativeAd.delegate = self
  nativeAd.loadAd()
}
    - (void)viewDidLoad 
{
  [super viewDidLoad];

  FBNativeAd *nativeAd = [[FBNativeAd alloc] initWithPlacementID:@"YOUR_PLACEMENT_ID"];
  nativeAd.delegate = self;
  [nativeAd loadAd];
}

    YOUR_PLACEMENT_ID에 표시되는 ID는 테스트 목적으로만 사용하는 임시 ID입니다.

    라이브 코드에서 이 임시 ID를 사용할 경우 사용자가 광고를 수신하지 않습니다(No Fill 오류 발생). 테스트 완료 후 여기로 다시 돌아와 이 임시 ID를 라이브 노출 위치 ID로 바꾸어야 합니다.

    라이브 노출 위치 ID를 생성하는 방법은 Audience Network 설정을 참조하세요.

  3. 다음 단계는 콘텐츠가 준비되면 광고를 표시하는 것입니다. nativeAdDidLoad 델리게이트 메서드를 구현하려면 ViewController가 필요합니다. 
    func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
    
  // 1. If there is an existing valid native ad, unregister the view
  if let previousNativeAd = self.nativeAd, previousNativeAd.isAdValid {
    previousNativeAd.unregisterView()
  }
    
  // 2. Retain a reference to the native ad object
  self.nativeAd = nativeAd

  // 3. Register what views will be tappable and what the delegate is to notify when a registered view is tapped
  // Here only the call-to-action button and the media view are tappable, and the delegate is the view controller
  nativeAd.registerView(
    forInteraction: adUIView,
    mediaView: adCoverMediaView,
    iconView: adIconImageView,
    viewController: self,
    clickableViews: [adCallToActionButton, adCoverMediaView]
  )
    
  // 4. Render the ad content onto the view
  adTitleLabel.text = nativeAd.advertiserName
  adBodyLabel.text = nativeAd.bodyText
  adSocialContextLabel.text = nativeAd.socialContext
  sponsoredLabel.text = nativeAd.sponsoredTranslation
  adCallToActionButton.setTitle(nativeAd.callToAction, for: .normal)
  adOptionsView.nativeAd = nativeAd
}
    - (void)nativeAdDidLoad:(FBNativeAd *)nativeAd
{
  // 1. If there is an existing valid native ad, unregister the view
  if (self.nativeAd && self.nativeAd.isAdValid) {
    [self.nativeAd unregisterView];
  }

  // 2. Retain a reference to the native ad object
  self.nativeAd = nativeAd;

  // 3. Register what views will be tappable and what the delegate is to notify when a registered view is tapped
  // Here only the call-to-action button and the media view are tappable, and the delegate is the view controller
  [self.nativeAd registerViewForInteraction:self.adUIView
                                  mediaView:self.adCoverMediaView
                                   iconView:self.adIconImageView
                             viewController:self
                             clickableViews:@[self.adCallToActionButton, self.adCoverMediaView]];

  // 4. Render the ad content onto the view
  self.adTitleLabel.text = self.nativeAd.advertiserName;
  self.adBodyLabel.text = self.nativeAd.bodyText;
  self.adSocialContextLabel.text = self.nativeAd.socialContext;
  self.sponsoredLabel.text = self.nativeAd.sponsoredTranslation;
  [self.adCallToActionButton setTitle:self.nativeAd.callToAction forState:UIControlStateNormal];
  self.adOptionsView.nativeAd = self.nativeAd; 
}

    4. 클릭 가능한 영역 제어

    사용자 환경을 개선하고 더 나은 결과를 얻으려면 항상 광고의 클릭 가능한 영역을 제어하여 의도치 않은 클릭을 피해야 합니다. 클릭할 수 없는 여백 정책에 대한 자세한 내용은 Audience Network SDK 정책을 참조하세요.



  4. 빌드 타겟으로 기기를 선택한 후 위의 코드를 실행하면 다음과 같이 표시됩니다.



시뮬레이터에서 광고를 게재할 때 테스트 광고를 보려면 설정을 테스트 모드로 변경하세요, 자세한 내용은 테스트 모드 사용 방법을 참조하세요.

3단계: 콘텐츠 화면 비율 확인 및 자연폭/높이 적용 방법

위 예에서 광고의 미디어 콘텐츠는 adCoverMediaView에 표시되며 개체 유형은 FBMediaView입니다. 이전 단계에서는 FBMediaView를 사용하여 주어진 FBNativeAd 개체에서 미디어 콘텐츠를 읽어들이는 방법을 설명했습니다. 이 보기가 커버 이미지를 수동으로 읽어들이는 과정을 대신합니다. FBMediaView를 만들 때 그 너비와 높이를 Storyboard에 설정된 자동 레이아웃 제약 조건에 따라 결정하거나 하드 코딩할 수 있습니다. 그러나 보기의 너비와 높이가 나중에 다운로드된 광고의 실제 커버 이미지에 맞지 않을 수 있습니다. 이 문제를 수정할 수 있도록 다음 예에서는 콘텐츠의 화면 비율을 확인하고 자연스러운 너비와 높이를 적용하는 방법을 보여줍니다.

  1. View Controller가 FBMediaViewDelegate 프토토콜을 준수한다고 선언합니다. 
    class ViewController: UIViewController, FBNativeAdDelegate, FBMediaViewDelegate {
  ...
}
    @interface ViewController : UIViewController <FBNativeAdDelegate, FBMediaViewDelegate>
...
@end

  2. 네이티브 광고를 읽어들인 후 FBMediaView 개체의 델리게이트를 View Controller로 설정합니다. 
    func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
  adCoverMediaView.delegate = self
}
    - (void)nativeAdDidLoad:(FBNativeAd *)nativeAd 
{
  self.adCoverMediaView.delegate = self;
}

  3. View Controller에서 mediaViewDidLoad 메서드를 구현합니다. 
    func mediaViewDidLoad(_ mediaView: FBMediaView) {
  let currentAspect = mediaView.frame.size.width / mediaView.frame.size.height
  print(currentAspect)
  
  let actualAspect = mediaView.aspectRatio
  print(actualAspect)
}
    - (void)mediaViewDidLoad:(FBMediaView *)mediaView
{
  CGFloat currentAspect = mediaView.frame.size.width / mediaView.frame.size.height;
  NSLog(@"current aspect of media view: %f", currentAspect);
  
  CGFloat actualAspect = mediaView.aspectRatio;
  NSLog(@"actual aspect of media view: %f", actualAspect);
}

    mediaView.aspectRatio가 양수 CGFloat을 반환하거나, 현재 광고가 읽어들여지지 않은 경우 0.0을 반환합니다. 이 값은 미디어 보기를 읽어들인 후에 유효합니다. 읽어들인 미디어 콘텐츠의 화면 비율에 따라 FBMediaView 개체의 너비와 높이를 설정하는 편리한 방법이 있습니다. applyNaturalWidth 또는 applyNaturalHeight를 호출하여 미디어 콘텐츠의 화면 비율에 따라 FBMediaView 개체의 너비 또는 높이를 업데이트할 수 있습니다.

4단계: 노출 및 클릭 로깅 확인하기

네이티브 광고가 닫히거나 사용자가 광고를 클릭하는 경우를 처리하기 위해 다음과 같은 함수를 추가할 수 있습니다.

func nativeAdDidClick(_ nativeAd: FBNativeAd) {
  print("Native ad was clicked.")
}

func nativeAdDidFinishHandlingClick(_ nativeAd: FBNativeAd) {
  print("Native ad did finish click handling.")
}

func nativeAdWillLogImpression(_ nativeAd: FBNativeAd) {
  print("Native ad impression is being captured.")
}
- (void)nativeAdDidClick:(FBNativeAd *)nativeAd
{
  NSLog(@"Native ad was clicked.");
}

- (void)nativeAdDidFinishHandlingClick:(FBNativeAd *)nativeAd
{
  NSLog(@"Native ad did finish click handling.");
}

- (void)nativeAdWillLogImpression:(FBNativeAd *)nativeAd
{
  NSLog(@"Native ad impression is being captured.");
}

5단계: 광고가 표시되지 않을 때 디버깅하는 방법

View Controller에 다음의 함수를 추가하고 구현하여 광고 읽어들이기 실패를 처리합니다.

func nativeAd(_ nativeAd: FBNativeAd, didFailWithError error: Error) {
  print("Native ad failed to load with error: \(error.localizedDescription)")
}
- (void)nativeAd:(FBNativeAd *)nativeAd didFailWithError:(NSError *)error
{
  NSLog(@"Native ad failed to load with error: %@", error);
}

6단계: 자동 캐시 없이 광고 읽어들이기

  1. 기본적으로 항상 미디어 캐싱을 활성화시키는 것이 좋습니다. 그러나 이 기본값은 재정의할 수 있습니다. 기본 미디어 캐싱을 다시 정의하기로 결정할 때는 매우 신중해야 합니다. 
    let nativeAd = FBNativeAd(placementID: "YOUR_PLACEMENT_ID")
nativeAd.delegate = self
nativeAd.loadAd(withMediaCachePolicy: .none)
    FBNativeAd *nativeAd = [[FBNativeAd alloc] initWithPlacementID:@"YOUR_PLACEMENT_ID"];
nativeAd.delegate = self;
[nativeAd loadAdWithMediaCachePolicy:FBNativeAdsCachePolicyNone];

  2. 먼저 네이티브 광고의 모든 미디어를 수동으로 다운로드해야 합니다 
    func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
  
  ...
  
  self.adCoverMediaView.delegate = self
  nativeAd.downloadMedia()
  self.nativeAd = nativeAd
  
  ...
}
    - (void)nativeAdDidLoad:(FBNativeAd *)nativeAd
{
  ...

  self.adCoverMediaView.delegate = self;
  [nativeAd downloadMedia];
  self.nativeAd = nativeAd;

  ...
}

  3. 그런 다음 registerViewForInteraction만 호출하고 mediaViewDidLoad 콜백 이후에 광고를 표시합니다. 요건을 충족하는 노출에 대해 모든 미디어를 읽어들이고 표시해야 합니다. 
    func mediaViewDidLoad(_ mediaView: FBMediaView) {
  guard let nativeAd = nativeAd else {
    return
  }
  
  // 1. Register what views will be tappable and what the delegate is to notify when a registered view is tapped
  // Here only the call-to-action button and the media view are tappable, and the delegate is the view controller
  nativeAd.registerView(
    forInteraction: adUIView,
    mediaView: mediaView,
    iconView: adIconImageView,
    viewController: self,
    clickableViews: [adCallToActionButton, mediaView]
  )
    
  // 2. Render the ad content onto the view
  adTitleLabel.text = nativeAd.advertiserName
  adBodyLabel.text = nativeAd.bodyText
  adSocialContextLabel.text = nativeAd.socialContext
  sponsoredLabel.text = nativeAd.sponsoredTranslation
  adCallToActionButton.setTitle(nativeAd.callToAction, for: .normal)
  adOptionsView.nativeAd = nativeAd
}
    - (void)mediaViewDidLoad:(FBMediaView *)mediaView 
{
  if (!self.nativeAd) {
    return;
  }

  // 1. Register what views will be tappable and what the delegate is to notify when a registered view is tapped
  // Here only the call-to-action button and the media view are tappable, and the delegate is the view controller
  [self.nativeAd registerViewForInteraction:self.adUIView
                                  mediaView:mediaView
                                   iconView:self.adIconImageView
                          viewController:self
                         clickableViews:@[self.adCallToActionButton, mediaView]];

  // 2. Render the ad content onto the view
  self.adTitleLabel.text = self.nativeAd.advertiserName;
  self.adBodyLabel.text = self.nativeAd.bodyText;
  self.adSocialContextLabel.text = self.nativeAd.socialContext;
  self.sponsoredLabel.text = self.nativeAd.sponsoredTranslation;
  [self.adCallToActionButton setTitle:self.nativeAd.callToAction forState:UIControlStateNormal];
  self.adOptionsView.nativeAd = self.nativeAd; 
}

다음 단계

  • 네이티브 광고 사용 방법을 보여주는 코드 샘플을 확인하세요. NativeAdSample은 SDK의 일부로 사용할 수 있으며, FBAudienceNetwork/samples 폴더에서 찾을 수 있습니다. Xcode를 사용하여 프로젝트를 열고 기기나 시뮬레이터에서 실행하세요.

추가 리소스

시작하기 가이드

Audience Network를 시작하기 위한 기술 가이드

코드 샘플

Audience Network 광고 통합 샘플

FAQ

Audience Network FAQ

네이티브 광고 템플릿

네이티브 광고를 통합하는 더욱 간편한 방법