시스템 정의 네이티브 광고 형식 표시
네이티브 광고가 로드되면 앱에서 GADAdLoaderDelegate
프로토콜 메시지 중 하나를 통해
네이티브 광고 객체를 수신합니다. 그런 다음 앱이 광고를 표시해야 하지만,
즉시 표시할 필요는 없습니다.
SDK에서는 시스템 정의 광고 형식을 보다 쉽게 표시할 수 있도록 몇 가지 유용한 리소스를 제공합니다.
GADNativeAdView
GADNativeAd
의 경우 해당하는 '광고 보기' 클래스인
GADNativeAdView
가
있습니다.
이 광고 보기 클래스는 게시자가 광고를 표시하는 데 사용해야 하는 UIView
입니다.
예를 들어 단일 GADNativeAdView
는 GADNativeAd
의 단일 인스턴스를 표시할 수 있습니다. 이 광고의 애셋을 표시하는 데 사용되는 각 UIView
객체는
해당 GADNativeAdView
객체의 하위 보기여야 합니다.
예를 들어 UITableView
에 광고를 표시했다면 셀 중 하나의 뷰 계층 구조는 다음과 같을 수 있습니다.
또한 GADNativeAdView
클래스는 개별 애셋에 사용되는 보기를 등록하는 데 사용되는 IBOutlets
와 GADNativeAd
객체 자체를 등록하는 메서드도 제공합니다. 이 방법으로 뷰를 등록하면 다음과 같은 작업을 SDK가 자동으로 처리할 수 있습니다.
- 클릭수 기록
- 노출 기록 (첫 픽셀이 화면에 표시되는 시점)
- AdChoices 오버레이 표시
AdChoices 오버레이
간접 네이티브 광고 (백업 광고 Ad Manager 또는 Ad Exchange나 애드센스를 통해 게재됨)의 경우 SDK가 AdChoices 오버레이를 추가합니다. 네이티브 광고 보기에서 원하는 모서리 부분에 AdChoices 로고가 자동으로 삽입될 공간을 남겨두세요. 또한 AdChoices 오버레이가 아이콘을 쉽게 볼 수 있는 콘텐츠에 게재되는지 확인하세요. 오버레이의 모양과 기능에 대해 자세히 알아보려면 프로그래매틱 네이티브 광고 구현 가이드라인을 참고하세요.
프로그래매틱 네이티브 광고의 광고 표시
프로그래매틱 네이티브 광고를 표시할 때 이 보기가 광고임을 나타내는 광고 표시를 표시해야 합니다. 이 페이지에서 정책 가이드라인을 참고하세요.
코드 예시
xib 파일에서 동적으로 로드된 보기를 사용하여 네이티브 광고를 표시하는
방법을 살펴보겠습니다. 이 방법은 여러 형식을 요청하도록 구성된 GADAdLoaders
를 사용할 때 매우 유용할 수 있습니다.
UIView 배치
첫 번째 단계는 네이티브 광고 애셋을 표시할 UIViews
를 배치하는 것입니다.
다른 xib 파일을 만들 때처럼
인터페이스 생성 도구를 사용할 수 있습니다. 네이티브 광고의 레이아웃은
다음과 같습니다.
이미지의 오른쪽 상단에 있는 Custom Class 값에 주목하세요. 이 설정은
GADNativeAdView
.
GADNativeAd
를 표시하는 데 사용된 광고 보기 클래스입니다.
광고의 동영상 또는 이미지를 표시하는 데 사용되는
GADMediaView
의 맞춤 클래스도 설정해야 합니다.
아웃렛을 뷰에 연결
보기를 배치했고 올바른 광고 보기 클래스를 레이아웃에 할당했으면
생성된 UIViews
에 광고 보기의 애셋 아웃렛을 연결합니다.
다음은 광고용으로 생성된 UIViews
에 광고 보기의 애셋 아웃렛을 연결하는 방법입니다.
아웃렛 패널에서 GADNativeAdView
의 아웃렛이 인터페이스 생성 도구의
UIViews
에 연결되었습니다. 이를 통해 어느 UIView
가 어느 애셋을 표시하는지 SDK가 인식할 수 있습니다.
또한 이러한 아웃렛은 광고에서 클릭 가능한 보기를
나타냅니다.
광고 표시
레이아웃이 완료되고 아웃렛이 연결되었으면 마지막 단계는 로드된 광고를 표시하는 코드를 앱에 추가하는 것입니다. 위에서 정의한 보기에 광고를 표시하는 방법은 다음과 같습니다.
Swift
// Mark: - GADNativeAdLoaderDelegate func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd: GADNativeAd) { print("Received native ad: \(nativeAd)") refreshAdButton.isEnabled = true // Create and place ad in view hierarchy. let nibView = Bundle.main.loadNibNamed("NativeAdView", owner: nil, options: nil)?.first guard let nativeAdView = nibView as? GADNativeAdView else { return } setAdView(nativeAdView) // Set ourselves as the native ad delegate to be notified of native ad events. nativeAd.delegate = self // Populate the native ad view with the native ad assets. // The headline and mediaContent are guaranteed to be present in every native ad. (nativeAdView.headlineView as? UILabel)?.text = nativeAd.headline nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent // This app uses a fixed width for the GADMediaView and changes its height to match the aspect // ratio of the media it displays. if let mediaView = nativeAdView.mediaView, nativeAd.mediaContent.aspectRatio > 0 { let heightConstraint = NSLayoutConstraint( item: mediaView, attribute: .height, relatedBy: .equal, toItem: mediaView, attribute: .width, multiplier: CGFloat(1 / nativeAd.mediaContent.aspectRatio), constant: 0) heightConstraint.isActive = true } // 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 // Associate the native ad view with the native ad object. This is // required to make the ad clickable. // Note: this should always be done after populating the ad views. nativeAdView.nativeAd = nativeAd }
Objective-C
#pragma mark GADNativeAdLoaderDelegate implementation - (void)adLoader:(GADAdLoader *)adLoader didReceiveNativeAd:(GADNativeAd *)nativeAd { NSLog(@"Received native ad: %@", nativeAd); self.refreshButton.enabled = YES; // Create and place ad in view hierarchy. GADNativeAdView *nativeAdView = [[NSBundle mainBundle] loadNibNamed:@"NativeAdView" owner:nil options:nil].firstObject; [self setAdView:nativeAdView]; // 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; // Associate the native ad view with the native ad object. This is // required to make the ad clickable. nativeAdView.nativeAd = nativeAd; }
Google GitHub 저장소에는 Swift 및 Objective-C로 작성된 네이티브 맞춤 렌더링 광고가 완전히 구현되어 있습니다.
Google Ad Manager 맞춤 렌더링 예시 다운로드
GADMediaView
이미지 및 동영상 애셋은 GADMediaView
를 통해
사용자에게 표시됩니다.
xib 파일에서 정의하거나 동적으로 생성할 수 있는 UIView
입니다.
다른 애셋 보기와 마찬가지로 GADNativeAdView
의 보기 계층 구조 내에
배치되어야 합니다.
모든 애셋 보기와 마찬가지로 미디어 보기에는 콘텐츠를 채워야 합니다. 이는 GADMediaView
의 mediaContent
속성을 사용하여 설정됩니다. GADNativeAd
의 mediaContent
속성에는 GADMediaView
에 전달할 수 있는 미디어 콘텐츠가 포함됩니다.
다음은
맞춤 렌더링 예
(Swift
| Objective-C)
GADNativeAd
의 GADMediaContent
를 사용하여
GADMediaView
에 네이티브 광고 애셋을 채우는 방법을 보여주는 스니펫입니다.
Swift
nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent
Objective-C
nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;
네이티브 광고 보기의 인터페이스 빌더 파일에서
보기 맞춤 클래스를 GADMediaView
로 설정하고
이 클래스를 mediaView
아웃렛에 연결했는지 확인하세요.
이미지 콘텐츠 모드 변경
GADMediaView
클래스는 이미지를 표시할 때 UIView
contentMode
속성을 따릅니다. GADMediaView
에서 이미지의 크기가 조정되는 방식을 변경하려면 GADMediaView
의 contentMode
속성에서 상응하는 UIViewContentMode
를 설정하여 이 작업을 실행하세요.
예를 들어 이미지가 표시될 때 GADMediaView
를 채우려면 (광고에 동영상이 없음):
Swift
nativeAdView.mediaView?.contentMode = .aspectFill
Objective-C
nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;
GADMediaContent
GADMediaContent
클래스에는 GADMediaView
클래스를 사용하여 표시되는 네이티브 광고의
미디어 콘텐츠와 관련된 데이터가 포함됩니다. GADMediaView
mediaContent
속성에 설정된 경우:
동영상 애셋을 사용할 수 있으면 버퍼링 후
GADMediaView
안에서 재생되기 시작합니다.hasVideoContent
를 확인하면 동영상 애셋을 사용할 수 있는지 알 수 있습니다.광고에 동영상 애셋이 없으면
mainImage
애셋이 대신 다운로드되어GADMediaView
에 배치됩니다.
다음 단계
사용자 개인 정보 보호에 관해 자세히 알아보세요.