네이티브 스타일

플랫폼 선택: Android iOS Flutter

네이티브 스타일 설정을 사용하면 Google Ad Manager에서 제품 내에 지정한 네이티브 스타일을 기반으로 네이티브 광고의 렌더링을 처리할 수 있습니다. 먼저 크기 및 타겟팅을 지정합니다. 그런 다음 HTML, CSS, JavaScript를 추가하여 반응형 광고를 정의하고 모든 화면에서 고화질로 표시되는 광고를 생성합니다. 렌더링을 직접 할 필요가 없습니다. Ad Manager에서 도착 페이지에 맞는 네이티브 스타일을 자동으로 적용합니다. 네이티브 스타일은 GAMBannerView를 사용하여 배너 광고와 마찬가지로 구현됩니다. 사전에 결정된 고정 광고 크기 또는 런타임에 결정된 유동 광고 크기와 함께 사용할 수 있습니다.

기본 요건

  • Google 모바일 광고 SDK 버전 7.14.0 이상

이 가이드는 Google 모바일 광고 SDK에 대한 실무적인 이해가 있다는 것을 전제로 설명을 제공합니다. 시작하기 가이드를 진행하지 않은 경우 시작하기 가이드부터 진행하시기 바랍니다.

고정 크기

고정 크기의 네이티브 스타일을 사용하면 네이티브 광고의 너비와 높이를 설정할 수 있습니다. 고정 크기를 설정하려면 다음 단계를 따르세요.

  1. Ad Manager UI에서 광고 항목을 만들고 Size 필드 드롭다운에서 사전 정의된 크기 중 하나를 선택합니다.

  2. Interface Builder에서 GAMBannerView의 너비와 높이를 1단계에서 선택한 사전 정의된 크기와 일치하도록 설정합니다. 배너 크기 섹션에서 크기 목록과 해당 GADAdSize 상수를 확인할 수 있습니다.

고정 크기의 네이티브 스타일을 구현하는 것은 첫 번째 배너 요청의 안내를 따르는 것만큼 간단하지만, HTML, CSS, JavaScript를 유연하게 제어하여 앱에서 자연스러운 네이티브 디자인과 느낌을 배너 광고에 부여할 수 있습니다.

유동 크기

경우에 따라 고정 크기가 적합하지 않을 수 있습니다. 예를 들어 광고의 너비는 앱의 콘텐츠와 일치해야 하지만 높이는 광고의 콘텐츠에 맞게 동적으로 조정해야 할 수 있습니다. 이 경우를 처리하려면 Ad Manager UI에서 광고 크기를 Fluid로 지정하면 됩니다. 이렇게 하면 앱에서 런타임에 광고 크기를 지정합니다. SDK는 이 경우를 처리하기 위해 특수 GADAdSize 상수인 kGADAdSizeFluid를 제공합니다. 유동 광고 크기 높이는 게시자가 정의한 너비를 기반으로 하여 동적으로 결정되므로 GAMBannerView가 광고 소재의 높이에 맞게 높이를 조정할 수 있습니다.

유동 요청

다른 광고 형식과 달리 kGADAdSizeFluid 광고 크기에는 사전 정의된 너비가 없으므로 코드나 인터페이스 빌더에서 배너의 프레임 너비를 명시적으로 설정해야 합니다. 너비를 지정하지 않으면 SDK는 기본적으로 기기의 전체 너비를 기반으로 배너의 높이를 설정합니다.

kGADAdSizeFluid가 포함된 다중 크기 요청을 하면 반환된 광고가 항상 유동 컨테이너 내에 배치되고 유동 광고처럼 작동합니다. 이 유동 컨테이너에 유동이 아닌 광고 소재가 반환되는 경우 새 광고가 반환될 때마다 너비 제약 조건을 수정하지 않아도 되도록 SDK가 컨테이너에서 광고를 중앙에 배치합니다.

단일 크기 및 다중 크기 유동형 요청을 만드는 구현은 매우 유사합니다. 유일한 차이점은 다중 크기 요청의 경우 validAdSizes 속성을 설정하여 광고 요청에 유효한 광고 크기를 지정한다는 것입니다.

Swift

bannerView.validAdSizes = [nsValue(for: AdSizeFluid), nsValue(for: AdSizeBanner)]

Objective-C

_bannerView.validAdSizes = @[ NSValueFromGADAdSize(kGADAdSizeFluid),
                              NSValueFromGADAdSize(kGADAdSizeBanner) ];

전체 구현은 코드에서 다음과 같이 표시됩니다.

Swift

var bannerView: AdManagerBannerView!

override func viewDidLoad() {
super.viewDidLoad()
  // Create the GAMBannerView and set its width to a width that makes sense for your
  // app. In this example, the width is set to the width of the UIViewController's
  // root view.
  bannerView = AdManagerBannerView(adSize: AdSizeFluid)
  var frameRect = bannerView.frame
  frameRect.size.width = view.bounds.width
  bannerView.frame = frameRect

  // Uncomment this code for a multisize fluid request.
  // bannerView.validAdSizes = [nsValue(for: AdSizeFluid), nsValue(for: AdSizeBanner)]

  bannerView.adUnitID = "YOUR_AD_UNIT_ID"
  bannerView.rootViewController = self

  // Make the ad request.
  bannerView.load(AdManagerRequest())
}

Objective-C

GAMBannerView *_bannerView;

- (void)viewDidLoad {
  [super viewDidLoad];
  // Create the GAMBannerView and set its width to a width that makes sense for your
  // app. In this example, the width is set to the width of the UIViewController's
  // root view.
  _bannerView = [[GAMBannerView alloc] initWithAdSize:kGADAdSizeFluid];
  CGRect frameRect = _bannerView.frame;
  frameRect.size.width = CGRectGetWidth(self.view.bounds);
  _bannerView.frame = frameRect;

  // Uncomment this code for a multisize fluid request.
  // _bannerView.validAdSizes = @[ NSValueFromGADAdSize(kGADAdSizeFluid),
  //                               NSValueFromGADAdSize(kGADAdSizeBanner) ];

  _bannerView.adUnitID = @"YOUR_AD_UNIT_ID";
  _bannerView.rootViewController = self;

  // Make the ad request.
  [_bannerView loadRequest:[GAMRequest request]];
}

Ad Manager 유동 광고 크기의 구현 예를 확인하려면 Swift 또는 Objective-C로 작성된 iOS API 데모 앱을 다운로드하세요.

API 데모 다운로드

GADAdSizeDelegate 프로토콜

광고 크기가 변경되기 전에 배너의 높이를 알아야 할 수 있습니다. adView:willChangeAdSizeTo: 콜백은 배너 뷰가 새 GADAdSize로 변경되기 전에 대리자에게 알립니다. 배너 뷰가 새 광고 크기로 변경되기 전에 알림을 받으려면 클래스가 GADAdSizeDelegate 프로토콜을 준수해야 합니다.

다음은 배너의 새 너비와 높이를 가져오는 방법을 보여주는 adView:willChangeAdSizeTo: 콜백의 샘플 구현입니다.

Swift

// To be notified before the banner's ad size changes, your view controller class must
// conform to the GADAdSizeDelegate protocol.
bannerView.adSizeDelegate = self

// MARK: - GADAdSizeDelegate

func adView(_ bannerView: BannerView, willChangeAdSizeTo adSize: AdSize) {
  let height = adSize.size.height
  let width = adSize.size.width
}

Objective-C

// To be notified before the banner's ad size changes, your view controller class must
// conform to the GADAdSizeDelegate protocol.
_bannerView.adSizeDelegate = self;

#pragma mark - GADAdSizeDelegate

- (void)adView:(GADBannerView *)bannerView willChangeAdSizeTo:(GADAdSize)adSize {
  CGFloat height = adSize.size.height;
  CGFloat width = adSize.size.width;
}