iOS에서 네이티브 광고 템플릿 사용

더욱 자유로운 방법으로 네이티브 광고를 통합하려는 퍼블리셔는 맞춤 Audience Network 네이티브 광고 템플릿을 활용할 수 있습니다. 앱의 디자인에 맞춰 네이티브 광고의 크기, 색상, 글꼴을 맞춤 설정하세요.

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

이 가이드를 효과적으로 사용하려면 네이티브 광고를 구현하는 방법을 숙지해야 합니다.

1단계: 템플릿 구현

2단계: 추가적인 맞춤화

1단계: 템플릿 구현

• 네이티브 광고의 구현

이제 View Controller 헤더 파일(또는 Swift 사용자인 경우 Swift 파일)에서 FBAudienceNetwork를 가져오고 FBNativeAdDelegate 프로토콜을 준수한다는 것을 선언한 후 광고 유닛에 대한 인스턴스 변수를 추가합니다.

import UIKit
import FBAudienceNetwork

class ViewController: UIViewController, FBNativeAdDelegate {
  private var nativeAd: FBNativeAd?
}

#import <UIKit/UIKit.h>
@import FBAudienceNetwork;

@interface ViewController : UIViewController <FBNativeAdDelegate>

@property (nonatomic, strong) FBNativeAd *nativeAd;

@end

그런 다음, View Controller의 구현 파일에 FBNativeAd를 초기화하고 광고를 읽어들이도록 요청하는 메서드를 추가합니다.

override func viewDidLoad() {
  super.viewDidLoad()
    
  // Instantiate the ad object.
  // NOTE: the placement ID will eventually identify this as your App, you can ignore it for
  // now, while you are testing and replace it later when you have signed up.
  // While you are using this temporary code you will only get test ads and if you release
  // your code like this to the App Store your users will not receive ads (you will get a 'No Fill' error).
  let nativeAd = FBNativeAd(placementID: "YOUR_PLACEMENT_ID")
  nativeAd.delegate = self
  nativeAd.loadAd()
}

- (void)viewDidLoad 
{
  [super viewDidLoad];
  // Instantiate a NativeAd object. 
  // NOTE: the placement ID will eventually identify this as your App, you can ignore it for
  // now, while you are testing and replace it later when you have signed up.
  // While you are using this temporary code you will only get test ads and if you release
  // your code like this to the App Store your users will not receive ads (you will get a no fill error).
  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 설정을 참조하세요.

광고를 읽어들이기 위한 코드를 추가하였으므로 다음의 함수를 추가하여 광고를 읽어들이고 난 후 광고를 생성합니다.

func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
    
  if let previousNativeAd = self.nativeAd, previousNativeAd.isAdValid {
    previousNativeAd.unregisterView()
  }
    
  self.nativeAd = nativeAd

  let adView = FBNativeAdView(nativeAd: nativeAd, with: .genericHeight300)

  view.addSubview(adView)

  let size = view.bounds.size
  let xOffset: CGFloat = size.width / 2 - 160
  let yOffset: CGFloat = (size.height > size.width) ? 100 : 20
  adView.frame = CGRect(x: xOffset, y: yOffset, width: 320, height: 300)
}

- (void)nativeAdDidLoad:(FBNativeAd *)nativeAd 
{    
  self.nativeAd = nativeAd;
  [self showNativeAd];
}

- (void)showNativeAd
{
  if (self.nativeAd && self.nativeAd.isAdValid) {
    [self.nativeAd unregisterView];
  }

  FBNativeAdView *adView = [FBNativeAdView nativeAdViewWithNativeAd:self.nativeAd withType:FBNativeAdViewTypeGenericHeight300];

  [self.view addSubview:adView];

  CGSize size = self.view.bounds.size;
  CGFloat xOffset = size.width / 2 - 160;
  CGFloat yOffset = (size.height > size.width) ? 100 : 20;
  adView.frame = CGRectMake(xOffset, yOffset, 320, 300);
}

빌드 대상을 기기로 선택하고 위의 코드를 실행하면 다음과 같은 화면이 보일 것입니다.

맞춤형 광고 형식은 두 가지 템플릿으로 제공됩니다.

템플릿 보기 유형	높이	너비	포함된 속성
`FBNativeAdView TypeGenericHeight300`	300dp	유연한 너비	이미지, 아이콘, 제목, 컨텍스트, 설명 및 CTA 버튼
`FBNativeAdView TypeGenericHeight400`	400dp	유연한 너비	이미지, 아이콘, 제목, 부제, 컨텍스트, 설명 및 CTA 버튼

높이가 100과 120인 옵션으로 템플릿을 사용하여 네이티브 배너 광고를 표시하려면 FBNativeBannerAd 인스턴스를 만들고 다음과 같이 FBNativeBannerAdView 뷰 인스턴스에 표시해야 합니다.

View Controller 헤더 파일(또는 Swift 사용자인 경우 Swift 파일)에서 FBAudienceNetwork를 가져오고 FBNativeBannerAdDelegate 프로토콜을 준수한다는 것을 선언한 후 광고 유닛에 대한 인스턴스 변수를 추가합니다.

import UIKit
import FBAudienceNetwork

class ViewController: UIViewController, FBNativeBannerAdDelegate {
  private var nativeBannerAd: FBNativeBannerAd?
}

#import <UIKit/UIKit.h>
@import FBAudienceNetwork;

@interface ViewController : UIViewController <FBNativeBannerAdDelegate>

@property (nonatomic, strong) FBNativeBannerAd *nativeBannerAd;

@end

그런 다음, View Controller의 구현 파일에 FBNativeBannerAd를 초기화하고 광고를 읽어들이도록 요청하는 메서드를 추가합니다.

override func viewDidLoad() {
  super.viewDidLoad()
  
  // Instantiate a native banner ad object.
  // NOTE: the placement ID will eventually identify this as your app. You can ignore it while you are testing
  // and replace it later when you have signed up.
  // While you are using this temporary code you will only get test ads and if you release
  // your code like this to the App Store your users will not receive ads (you will get a ‘No Fill’ error).
  let nativeBannerAd = FBNativeBannerAd(placementID: "YOUR_PLACEMENT_ID")

  // Set a delegate to get notified when the ad was loaded.
  nativeBannerAd.delegate = self

  // Initiate a request to load an ad.
  nativeBannerAd.loadAd()  
}

- (void)viewDidLoad 
{
  [super viewDidLoad];

  // Instantiate a native banner ad object.
  // NOTE: the placement ID will eventually identify this as your app. You can ignore it while you are testing
  // and replace it later when you have signed up.
  // While you are using this temporary code you will only get test ads and if you release
  // your code like this to the App Store your users will not receive ads (you will get a ‘No Fill’ error).
  // your code like this to the App Store your users will not receive ads (you will get a ‘No Fill’ error).
  FBNativeBannerAd *nativeBannerAd = [[FBNativeBannerAd alloc] initWithPlacementID:@"YOUR_PLACEMENT_ID"];

  // Set a delegate to get notified when the ad was loaded.
  nativeBannerAd.delegate = self;

  // Initiate a request to load an ad.
  [nativeBannerAd loadAd];
}

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

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

광고를 읽어들이기 위한 코드를 추가하였으므로 다음의 함수를 추가하여 광고를 읽어들이고 난 후 광고를 생성합니다.

func nativeBannerAdDidLoad(_ nativeBannerAd: FBNativeBannerAd) {
  
  // 1. If there is an existing valid ad, unregister the view
  if let previousAd = self.nativeBannerAd, previousAd.isAdValid {
    previousAd.unregisterView()
  }
  
  // 2. Retain a reference to the ad object
  self.nativeBannerAd = nativeBannerAd
  
  // 3. Instantiate the ad view
  let adView = FBNativeBannerAdView(nativeBannerAd: nativeBannerAd, with: .genericHeight100)
  view.addSubview(adView)

  // 4. Set the frame of the ad view (either manually or using constraints)
  let size = view.bounds.size
  let xOffset: CGFloat = size.width / 2 - 160
  let yOffset: CGFloat = (size.height > size.width) ? 100 : 20
  adView.frame = CGRect(x: xOffset, y: yOffset, width: 320, height: 300)
}

- (void)nativeBannerAdDidLoad:(FBNativeBannerAd *)nativeBannerAd
{
  if (self.nativeBannerAd && self.nativeBannerAd.isAdValid) {
    [self.nativeBannerAd unregisterView];
  }
  
  self.nativeBannerAd = nativeBannerAd;
  
  FBNativeBannerAdView *adView = [FBNativeBannerAdView nativeBannerAdViewWithNativeBannerAd:self.nativeBannerAd
                                                                                   withType:FBNativeBannerAdViewTypeGenericHeight100];
  
  [self.view addSubview:adView];
  
  CGSize size = self.view.bounds.size;
  CGFloat xOffset = size.width / 2 - 160;
  CGFloat yOffset = (size.height > size.width) ? 100 : 20;
  adView.frame = CGRectMake(xOffset, yOffset, 320, 100);
}

맞춤형 광고 형식은 두 가지 템플릿으로 제공됩니다.

템플릿 보기 유형	높이	너비	포함된 속성
`FBNativeBannerAdView TypeGenericHeight100`	100dp	유연한 너비	아이콘, 제목, 컨텍스트 및 CTA 버튼
`FBNativeBannerAdView TypeGenericHeight120`	120dp	유연한 너비	아이콘, 제목, 컨텍스트, 설명 및 CTA 버튼

2단계: 추가적인 맞춤화

네이티브 맞춤 템플릿을 사용하면 다음 요소를 맞춤 설정할 수 있습니다.

높이
너비
배경 색상
제목 색상
제목 글꼴
설명 색상
설명 글꼴
버튼 색상
버튼 제목 색상
버튼 제목 글꼴
버튼 테두리 색상

특정 요소를 맞춤 설정하려면 앱의 레이아웃과 테마에 맞는 디자인을 사용하는 것이 좋습니다.

FBNativeAdViewAttributes 개체를 빌드하고 읽어들인 네이티브 광고를 제공하여 다음의 요소를 렌더링해야 합니다.

• 네이티브 광고의 예

func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
  
  // Instantiate the attributes to customize the view
  let attributes = FBNativeAdViewAttributes()
  attributes.backgroundColor = UIColor(white: 0.9, alpha: 1)
  attributes.buttonColor = UIColor(red: 66 / 255.0, green: 108 / 255.0, blue: 173 / 255.0, alpha: 1)
  attributes.buttonTitleColor = .white

  // Feed the attributes to the view
  let adView = FBNativeAdView(nativeAd: nativeAd, with: .genericHeight300, with: attributes)
  
  ... Rest of implementation ...
}

- (void)nativeAdDidLoad:(FBNativeAd *)nativeAd 
{
  // Instantiate the attributes to customize the view
  FBNativeAdViewAttributes *attributes = [[FBNativeAdViewAttributes alloc] init];

  attributes.backgroundColor = [UIColor colorWithRed:0.9 green:0.9 blue:0.9 alpha:1];
  attributes.buttonColor = [UIColor colorWithRed:66/255.0 green:108/255.0 blue:173/255.0 alpha:1];
  attributes.buttonTitleColor = [UIColor whiteColor];

  // Feed the attributes to the view
  FBNativeAdView *adView = [FBNativeAdView nativeAdViewWithNativeAd:nativeAd 
      withType:FBNativeAdViewTypeGenericHeight300 withAttributes:attributes];

  ... Rest of implementation ...
}

위의 코드는 다음과 같은 광고를 렌더링합니다.

func nativeBannerAdDidLoad(_ nativeBannerAd: FBNativeBannerAd) {
  
  // Instantiate the attributes to customize the view
  let attributes = FBNativeAdViewAttributes()
  attributes.backgroundColor = UIColor(white: 0.9, alpha: 1)
  attributes.buttonColor = UIColor(red: 66 / 255.0, green: 108 / 255.0, blue: 173 / 255.0, alpha: 1)
  attributes.buttonTitleColor = .white

  // Instantiate the view and feed the attributes to the initializer
  let adView = FBNativeBannerAdView(nativeBannerAd: nativeBannerAd, with: .genericHeight100, with: attributes)
  
  ... Rest of implementation ...
}

- (void)nativeBannerAdDidLoad:(FBNativeBannerAd *)nativeAd 
{
  // Instantiate the attributes to customize the view
  FBNativeAdViewAttributes *attributes = [[FBNativeAdViewAttributes alloc] init];
  attributes.backgroundColor = [UIColor colorWithRed:0.9 green:0.9 blue:0.9 alpha:1];
  attributes.buttonColor = [UIColor colorWithRed:66/255.0 green:108/255.0 blue:173/255.0 alpha:1];
  attributes.buttonTitleColor = [UIColor whiteColor];

  // Instantiate the view and feed the attributes to the initializer
  FBNativeBannerAdView *adView = [FBNativeBannerAdView nativeBannerAdViewWithNativeBannerAd :nativeAd 
      withType:FBNativeBannerAdViewTypeGenericHeight100 withAttributes:attributes];

  ... Rest of implementation ...
}

다음 단계

앱에서 여러 광고 형식을 통합하려면 Facebook 가이드를 참조하세요.

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

iOS에서 네이티브 광고 템플릿 사용

1단계: 템플릿 구현

2단계: 추가적인 맞춤화

1단계: 템플릿 구현

• 네이티브 광고의 구현

• 네이티브 배너 광고의 구현

2단계: 추가적인 맞춤화

• 네이티브 광고의 예

• 네이티브 배너 광고의 예

다음 단계