네이티브 광고 고급형

시스템 정의 네이티브 광고 형식 표시하기

네이티브 광고가 로드되면 GADAdLoaderDelegate 프로토콜 메시지 중 하나를 통해 네이티브 광고 객체가 앱에 전송됩니다. 그런 다음 앱이 광고를 표시해야 하는데, 즉시 표시하지는 않아도 됩니다. 시스템 정의 광고 형식을 보다 쉽게 표시할 수 있도록 SDK에서 유용한 리소스를 제공합니다.

GADUnifiedNativeAdView

GADUnifiedNativeAd의 경우 '광고 보기' 클래스인 GADUnifiedNativeAdView가 있습니다. 이 클래스는 게시자가 광고를 표시하는 데 사용하는 UIView입니다. 예를 들어 GADUnifiedNativeAdView 하나에서 인스턴스 하나인 GADUnifiedNativeAd를 표시할 수 있습니다. 이 광고의 애셋을 표시하는 데 사용되는 UIView 객체 각각은 해당 GADUnifiedNativeAdView 객체의 하위 보기여야 합니다.

예를 들어 UITableView 광고를 표시했다면 셀 중 하나의 보기 계층구조가 다음과 같이 될 수 있습니다.

또한 GADUnifiedNativeAdView 클래스는 개별 애셋에 사용된 보기를 등록하는 데 사용되는 IBOutletsGADUnifiedNativeAd 개체 자체를 등록하는 메소드를 제공합니다. 이 방법으로 보기를 등록하면 다음과 같은 작업을 SDK가 자동으로 처리할 수 있습니다.

  • 클릭 기록
  • 노출 기록(첫 픽셀이 화면에 표시되는 시점)
  • AdChoices 오버레이 표시

AdChoices 오버레이

AdMob 백업 광고나 Ad Exchange 또는 애드센스를 통해 제공되는 간접 네이티브 광고의 경우 SDK가 AdChoices 오버레이를 추가합니다. 네이티브 광고 보기의 원하는 모서리 부분에 AdChoices 로고가 자동으로 삽입될 공간을 남겨두세요. 또한 AdChoices 오버레이는 아이콘을 쉽게 볼 수 있는 콘텐츠에 삽입되어야 합니다. 오버레이의 모양과 기능에 대해 자세히 알아보려면 프로그래매틱 네이티브 광고 구현 가이드라인을 참조하세요.

광고 표시

프로그래매틱 네이티브 광고를 표시할 때 광고임을 나타내는 표시를 넣어야 합니다.

코드 예

xib 파일에서 동적으로 로드된 보기를 사용하여 네이티브 광고를 표시하는 방법에 대해 알아보겠습니다. 이 방법은 여러 형식을 요청하도록 구성된 GADAdLoaders를 사용할 때 매우 유용합니다.

UIView 레이아웃

먼저 네이티브 광고 애셋을 표시할 UIViews를 레이아웃해야 합니다. 다른 xib 파일을 만들 때처럼 인터페이스 생성 도구를 사용할 수 있습니다. 다음은 네이티브 광고 레이아웃의 예입니다.

이미지의 오른쪽 상단에 있는 맞춤 클래스 값을 확인하세요. 이 값은

GADUnifiedNativeAdView로 설정되며, GADUnifiedNativeAd를 표시하는 데 사용된 광고 보기 클래스입니다.

광고의 동영상 또는 이미지를 표시하는 데 사용되는 GADMediaView의 맞춤 클래스도 설정해야 합니다.

아웃렛과 보기 연결

보기를 배치했고 레이아웃에 올바른 광고 보기 클래스를 할당했으면 생성된 UIViews에 광고 보기의 애셋 아웃렛을 연결해야 합니다. 다음은 광고용으로 생성된 UIViews에 광고 보기의 애셋 아웃렛을 연결하는 방법의 예입니다.

아웃렛 패널에서 GADUnifiedNativeAdView의 아웃렛이 인터페이스 생성 도구의 UIViews에 연결되었습니다. 따라서 어느 UIView가 어느 애셋을 표시하는지 SDK가 인식할 수 있습니다. 또한 이러한 아웃렛은 광고에서 클릭 가능한 보기를 나타냅니다.

광고 표시

레이아웃이 완성되었고 아웃렛이 연결되었으면 마지막으로, 로드된 광고를 표시하는 코드를 앱에 추가합니다. 위에 정의된 보기에 광고를 표시하는 방법은 다음과 같습니다.

Swift

// Mark: - GADUnifiedNativeAdLoaderDelegate
func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd: GADUnifiedNativeAd) {
  print("Received unified native ad: \(nativeAd)")
  refreshAdButton.isEnabled = true
  // Create and place ad in view hierarchy.
  let nibView = Bundle.main.loadNibNamed("UnifiedNativeAdView", owner: nil, options: nil)?.first
  guard let nativeAdView = nibView as? GADUnifiedNativeAdView else {
    return
  }
  setAdView(nativeAdView)

  // Associate the native ad view with the native ad object. This is
  // required to make the ad clickable.
  nativeAdView.nativeAd = nativeAd

  // Set the mediaContent on the GADMediaView to populate it with available
  // video/image asset.
  nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

  // Populate the native ad view with the native ad assets.
  // The headline is guaranteed to be present in every native ad.
  (nativeAdView.headlineView as? UILabel)?.text = nativeAd.headline

  // These assets are not guaranteed to be present. Check that they are before
  // showing or hiding them.
  (nativeAdView.bodyView as? UILabel)?.text = nativeAd.body
  nativeAdView.bodyView?.isHidden = nativeAd.body == nil

  (nativeAdView.callToActionView as? UIButton)?.setTitle(nativeAd.callToAction, for: .normal)
  nativeAdView.callToActionView?.isHidden = nativeAd.callToAction == nil

  (nativeAdView.iconView as? UIImageView)?.image = nativeAd.icon?.image
  nativeAdView.iconView?.isHidden = nativeAd.icon == nil

  (nativeAdView.starRatingView as? UIImageView)?.image = imageOfStars(fromStarRating:nativeAd.starRating)
  nativeAdView.starRatingView?.isHidden = nativeAd.starRating == nil

  (nativeAdView.storeView as? UILabel)?.text = nativeAd.store
  nativeAdView.storeView?.isHidden = nativeAd.store == nil

  (nativeAdView.priceView as? UILabel)?.text = nativeAd.price
  nativeAdView.priceView?.isHidden = nativeAd.price == nil

  (nativeAdView.advertiserView as? UILabel)?.text = nativeAd.advertiser
  nativeAdView.advertiserView?.isHidden = nativeAd.advertiser == nil

  // In order for the SDK to process touch events properly, user interaction
  // should be disabled.
  nativeAdView.callToActionView?.isUserInteractionEnabled = false
}

Objective-C

#pragma mark GADUnifiedNativeAdLoaderDelegate implementation

- (void)adLoader:(GADAdLoader *)adLoader didReceiveUnifiedNativeAd:(GADUnifiedNativeAd *)nativeAd {
  NSLog(@"Received unified native ad: %@", nativeAd);
  self.refreshButton.enabled = YES;

  // Create and place ad in view hierarchy.
  GADUnifiedNativeAdView *nativeAdView =
      [[NSBundle mainBundle] loadNibNamed:@"UnifiedNativeAdView" owner:nil options:nil].firstObject;
  [self setAdView:nativeAdView];

  // Associate the native ad view with the native ad object. This is
  // required to make the ad clickable.
  nativeAdView.nativeAd = nativeAd;

  // Set the mediaContent on the GADMediaView to populate it with available
  // video/image asset.
  nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

  // Populate the native ad view with the native ad assets.
  // The headline is guaranteed to be present in every native ad.
  ((UILabel *)nativeAdView.headlineView).text = nativeAd.headline;

  // These assets are not guaranteed to be present. Check that they are before
  // showing or hiding them.
  ((UILabel *)nativeAdView.bodyView).text = nativeAd.body;
  nativeAdView.bodyView.hidden = nativeAd.body ? NO : YES;

  [((UIButton *)nativeAdView.callToActionView)setTitle:nativeAd.callToAction
                                              forState:UIControlStateNormal];
  nativeAdView.callToActionView.hidden = nativeAd.callToAction ? NO : YES;

    ((UIImageView *)nativeAdView.iconView).image = nativeAd.icon.image;
  nativeAdView.iconView.hidden = nativeAd.icon ? NO : YES;

  ((UIImageView *)nativeAdView.starRatingView).image = [self imageForStars:nativeAd.starRating];
  nativeAdView.starRatingView.hidden = nativeAd.starRating ? NO : YES;

  ((UILabel *)nativeAdView.storeView).text = nativeAd.store;
  nativeAdView.storeView.hidden = nativeAd.store ? NO : YES;

  ((UILabel *)nativeAdView.priceView).text = nativeAd.price;
  nativeAdView.priceView.hidden = nativeAd.price ? NO : YES;

  ((UILabel *)nativeAdView.advertiserView).text = nativeAd.advertiser;
  nativeAdView.advertiserView.hidden = nativeAd.advertiser ? NO : YES;

  // In order for the SDK to process touch events properly, user interaction
  // should be disabled.
  nativeAdView.callToActionView.userInteractionEnabled = NO;
}

Google GitHub 저장소에는 Swift와 Objective-C로 작성된 네이티브 광고 고급형가 완벽하게 구현되어 있습니다.

네이티브 광고 고급형 예시 다운로드

GADMediaView

이미지 및 동영상 애셋은 GADMediaView를 통해 사용자에게 표시됩니다. 이는 xib 파일에서 정의하거나 동적으로 생성할 수 있는 UIView입니다. 다른 애셋 보기와 마찬가지로 GADNativeAdView의 보기 계층구조 내에 배치되어야 합니다.

모든 애셋 보기와 마찬가지로 미디어 보기에는 콘텐츠를 채워야 하며, 이는 GADMediaViewmediaContent 속성을 사용하여 설정됩니다. mediaContentGADUnifiedNativeAd 속성에는 GADMediaView에 전달할 수 있는 미디어 콘텐츠가 포함됩니다.

다음은 네이티브 광고 고급형 스니펫의 예입니다 (Swift | Objective-C). GADMediaViewGADMediaContentGADUnifiedNativeAd를 사용하여 네이티브 광고 애셋을 입력하는 방법이 나와 있습니다.

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Objective-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

네이티브 광고 보기의 인터페이스 생성 도구 파일에서 보기 맞춤 클래스를 GADMediaView로 설정하고 mediaView 아웃렛에 연결했는지 확인하세요.

이미지 콘텐츠 모드 변경

GADMediaView 클래스는 이미지를 표시할 때 UIView contentMode 속성을 고려합니다. GADMediaView에서 이미지가 조정되는 방식을 변경하려면 GADMediaViewUIViewContentMode 속성에서 해당하는 contentMode를 설정하세요.

예를 들어 이미지가 표시될 때 GADMediaView를 채우려면(광고에 동영상이 없음):

Swift

nativeAdView.mediaView?.contentMode = .aspectFill

Objective-C

nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;

GADMediaContent

GADMediaContent 클래스에는 GADMediaView 클래스를 사용하여 표시되는 네이티브 광고의 미디어 콘텐츠와 관련된 데이터가 포함됩니다. GADMediaView mediaContent 속성에서 설정한 경우

  • 동영상 애셋을 사용할 수 있으면 버퍼링 후 GADMediaView에서 재생되기 시작합니다. hasVideoContent를 확인하여 동영상 자산을 사용할 수 있는지 알 수 있습니다.

  • 광고에 동영상 애셋이 없으면 첫 번째 이미지 애셋이 대신 다운로드되어 GADMediaView에 배치됩니다.

미디어 콘텐츠 클래스에는 다음과 같은 속성이 있습니다.

aspectRatio
이 속성은 동영상(사용 가능한 경우) 또는 이미지의 가로 세로 비율 (너비/높이)을 나타내며 사용 가능한 미디어 콘텐츠가 없으면 0입니다.
mainImage
기본적으로 mainImage는 처음 다운로드한 이미지 애셋입니다. disableImageLoading를 사용하면 mainImagenil이며 이 속성을 직접 다운로드한 이미지에 설정해야 합니다. 사용 가능한 동영상 애셋이 없는 경우에만 이 이미지를 사용합니다.

네이티브 동영상

일부 네이티브 광고에는 이미지, 텍스트, 숫자와 함께 동영상 애셋도 포함됩니다. 동영상 애셋은 일부 광고에만 포함되며, 앱에서 이를 표시하지 않아도 됩니다.

GADVideoController

GADVideoController 클래스는 동영상 재생을 관리하고 동영상 재생 콜백을 검색하는 데 사용됩니다.

GADUnifiedNativeAd에서는 광고별로 videoController를 노출하는 GADVideoController 속성을 제공합니다.

Swift

let videoController = myUnifiedNativeAd.videoController

Objective-C

GADVideoController *videoController = myUnifiedNativeAd.videoController

이 속성은 광고에 동영상 애셋이 포함되지 않은 경우에도 nil이 되지 않습니다.

또한 앱에서 동영상 애셋의 수명 주기 중에 이벤트에 대한 알림을 받도록 GADVideoControllerGADVideoControllerDelegate를 설정할 수 있습니다. GADVideoControllerDelegate에서는 동영상 재생이 완료될 때 전송되는 단일 선택 메시지인 videoControllerDidEndVideoPlayback을 제공합니다.

다음은 재생이 종료될 때 관찰에 사용되는 GADVideoControllerDelegate의 예입니다.

Swift

class ViewController: UIViewController, GADUnifiedNativeAdLoaderDelegate,
    GADVideoControllerDelegate {

  func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd:
                GADUnifiedNativeAd) {
    ...
    nativeAd.mediaContent.videoController.delegate = self
    ...
  }
  ...
  func videoControllerDidEndVideoPlayback(_ videoController: Any!) {
    // Here apps can take action knowing video playback is finished.
    // This is handy for things like unmuting audio, and so on.
  }
}

Objective-C

@interface ViewController () <GADUnifiedNativeAdLoaderDelegate,
        GADVideoControllerDelegate>

- (void)adLoader:(GADAdLoader *)adLoader
    didReceiveNativeAd:(GADUnifiedNativeAd) *)nativeAd {
  ...
  nativeAd.mediaContent.videoController.delegate = self;
  ...
}
...

- (void)videoControllerDidEndVideoPlayback:(GADVideoController *)videoController {
  // Here apps can take action knowing video playback is finished.
  // This is handy for things like unmuting audio, and so on.
}

@end

네이티브 광고를 렌더링하는 방법은 네이티브 광고 정책 및 가이드라인을 참조하세요.

다음에 대한 의견 보내기...

도움이 필요하시나요? 지원 페이지를 방문하세요.