배너 광고는 앱 레이아웃의 일부를 차지하는 직사각형 광고입니다. 사용자가 앱과 상호작용하는 동안 배너 광고가 화면의 상단이나 하단에 앵커 형식으로 표시되거나 스크롤할 때 인라인 형식으로 콘텐츠와 함께 화면에 표시됩니다. 배너 광고 광고는 일정 시간이 지나면 자동으로 새로고침될 수 있습니다. 배너 광고 개요를 참고하세요. 를 참조하세요.
이 가이드에서는 앵커 광고 적응형 배너 광고, 이렇게 하면 각 기기의 광고 크기를 최적화하여 실적을 극대화할 수 있습니다. 지정할 수 있습니다.
앵커 적응형 배너
앵커 적응형 배너 광고는 일반 광고가 아닌 고정된 가로세로 비율의 광고입니다. 고정 크기 광고를 사용할 수 있습니다. 가로세로 비율은 업계 표준 320x50과 유사합니다. 한 번 사용할 수 있는 전체 너비를 지정하면 해당 위치에 최적화된 높이의 광고가 반환됩니다. 지정할 수 있습니다. 최적의 높이는 광고를 새로고침할 때 주변 뷰가 이동하지 않아도 됩니다.
기본 요건
- 시작 가이드를 모두 읽어보세요.
항상 테스트 광고로 테스트
앱을 빌드하고 테스트할 때는 만들 수 있습니다. 이렇게 하지 않으면 계정이 정지될 수 있습니다.
테스트 광고를 로드하는 가장 쉬운 방법은 iOS용 테스트 전용 광고 단위 ID를 사용하는 것입니다. 배너:
/21775744923/example/adaptive-banner
이 ID는 모든 요청에 대해 테스트 광고를 반환하도록 특별히 구성되었으며, 코딩, 테스트, 디버깅 중에 앱에서 자유롭게 사용할 수 있습니다. 앱을 게시하기 전에 이 ID를 자체 광고 단위 ID로 바꿔야 합니다.
모바일 광고 SDK의 테스트 광고가 작동하는 방식을 자세히 알아보려면 테스트 광고를 참고하세요.
GAMBannerView 만들기
배너 광고는 GAMBannerView
에 표시됩니다.
개체이므로 배너 광고를 통합하기 위한 첫 번째 단계는 GAMBannerView
뷰 계층 구조에 배치해야 합니다 이 작업은 일반적으로 프로그래매틱 방식으로 또는
사용할 수 있습니다.
프로그래매틱 방식
GAMBannerView
는 직접 인스턴스화할 수도 있습니다.
다음 예에서는 GAMBannerView
를 만듭니다.
Swift
import GoogleMobileAds
import UIKit
class ViewController: UIViewController {
var bannerView: GAMBannerView!
override func viewDidLoad() {
super.viewDidLoad()
let viewWidth = view.frame.inset(by: view.safeAreaInsets).width
// Here the current interface orientation is used. Use
// GADLandscapeAnchoredAdaptiveBannerAdSizeWithWidth or
// GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth if you prefer to load an ad of a
// particular orientation,
let adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
bannerView = GAMBannerView(adSize: adaptiveSize)
addBannerViewToView(bannerView)
}
func addBannerViewToView(_ bannerView: GAMBannerView) {
bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)
// This example doesn't give width or height constraints, as the provided
// ad size gives the banner an intrinsic content size to size the view.
view.addConstraints(
[NSLayoutConstraint(item: bannerView,
attribute: .bottom,
relatedBy: .equal,
toItem: view.safeAreaLayoutGuide,
attribute: .bottom,
multiplier: 1,
constant: 0),
NSLayoutConstraint(item: bannerView,
attribute: .centerX,
relatedBy: .equal,
toItem: view,
attribute: .centerX,
multiplier: 1,
constant: 0)
])
}
}
SwiftUI
GAMBannerView
를 사용하려면 UIViewRepresentable
를 만듭니다.
private struct BannerView: UIViewRepresentable {
let adSize: GADAdSize
init(_ adSize: GADAdSize) {
self.adSize = adSize
}
func makeUIView(context: Context) -> UIView {
// Wrap the GADBannerView in a UIView. GADBannerView automatically reloads a new ad when its
// frame size changes; wrapping in a UIView container insulates the GADBannerView from size
// changes that impact the view returned from makeUIView.
let view = UIView()
view.addSubview(context.coordinator.bannerView)
return view
}
func updateUIView(_ uiView: UIView, context: Context) {
context.coordinator.bannerView.adSize = adSize
}
func makeCoordinator() -> BannerCoordinator {
return BannerCoordinator(self)
}
GAMBannerView
의 초기화 및 동작을 관리하려면 다음을 만듭니다.
Coordinator
:
class BannerCoordinator: NSObject, GADBannerViewDelegate {
private(set) lazy var bannerView: GADBannerView = {
let banner = GADBannerView(adSize: parent.adSize)
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(GADRequest())
banner.delegate = self
return banner
}()
let parent: BannerView
init(_ parent: BannerView) {
self.parent = parent
}
뷰의 너비를 가져오려면 GeometryReader
를 사용합니다. 이 클래스는 현재 기기 방향에 적합한 광고 크기를 계산합니다. 이
frame
는 광고 크기에서 계산된 높이로 설정됩니다.
var body: some View {
GeometryReader { geometry in
let adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(geometry.size.width)
VStack {
Spacer()
BannerView(adSize)
.frame(height: adSize.size.height)
}
}
Objective-C
이 경우에는 제공된 광고 크기가 보기의 크기를 조정하는 고유한 콘텐츠 크기를 제공하므로 너비 또는 높이 제한 조건을 지정하지 않습니다.
@import GoogleMobileAds;
@interface ViewController ()
@property(nonatomic, strong) GAMBannerView *bannerView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Here safe area is taken into account, hence the view frame is used after the
// view has been laid out.
CGRect frame = UIEdgeInsetsInsetRect(self.view.frame, self.view.safeAreaInsets);
CGFloat viewWidth = frame.size.width;
// Here the current interface orientation is used. If the ad is being preloaded
// for a future orientation change or different orientation, the function for the
// relevant orientation should be used.
GADAdSize adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
// In this case, we instantiate the banner with desired ad size.
self.bannerView = [[GAMBannerView alloc] initWithAdSize:adaptiveSize];
[self addBannerViewToView:self.bannerView];
}
- (void)addBannerViewToView:(UIView *)bannerView {
bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:bannerView];
// This example doesn't give width or height constraints, as the provided
// ad size gives the banner an intrinsic content size to size the view.
[self.view addConstraints:@[
[NSLayoutConstraint constraintWithItem:bannerView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view.safeAreaLayoutGuide
attribute:NSLayoutAttributeBottom
multiplier:1
constant:0],
[NSLayoutConstraint constraintWithItem:bannerView
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterX
multiplier:1
constant:0]
]];
}
@end
인터페이스 빌더
스토리보드 또는 xib 파일에 GAMBannerView
를 추가할 수 있습니다. 이
메서드를 사용하는 경우 배너에 위치 제한만 추가해야 합니다. 예를 들어
화면 하단에 적응형 배너를 표시할 때 하단
을 배치하고 배너 보기의 크기를
centerX
드림
제약 조건이 슈퍼뷰의 centerX
과 같아야 합니다.
배너의 광고 크기는 계속해서 프로그래매틱 방식으로 설정됩니다.
Swift
bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
Objective-C
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
광고 로드
GAMBannerView
가 배치되고 속성이 배치되면
이제 광고를 로드하세요. loadRequest:
를 호출하려면
GAMRequest
객체:
Swift
override func viewDidLoad() {
super.viewDidLoad()
// Set the ad unit ID and view controller that contains the GAMBannerView.
bannerView.adUnitID = "/21775744923/example/adaptive-banner"
bannerView.rootViewController = self
bannerView.load(GAMRequest())
}
SwiftUI
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(GADRequest())
Objective-C
- (void)viewDidLoad {
[super viewDidLoad];
// Set the ad unit ID and view controller that contains the GAMBannerView.
self.bannerView.adUnitID = @"/21775744923/example/adaptive-banner";
self.bannerView.rootViewController = self;
[self.bannerView loadRequest:[GAMRequest request]];
}
GAMRequest 객체는 단일 광고 요청을 나타냅니다. 타겟팅 정보와 같은 속성을 포함할 수 있습니다.
광고가 로드되지 않는 경우 광고 단위가 새로고침되도록 설정한 상태이면 Google 모바일 광고 SDK에서 Ad Manager에서 지정한 새로고침 빈도를 있습니다. 새로고침을 사용 설정하지 않았다면 새로 요청해야 합니다.
광고 이벤트
GADBannerViewDelegate
를 사용하면 수명 주기 이벤트를 수신 대기할 수 있습니다.
예를 들어 광고가 닫히거나 사용자가 앱을 떠날 때
이를 해결할 수 있습니다.
배너 이벤트 등록
배너 광고 이벤트에 등록하려면 다음에서 delegate
속성을 설정합니다.
GAMBannerView
를
GADBannerViewDelegate
프로토콜 일반적으로는 배너 광고를 구현하는 클래스가 대리자 클래스로도 작동하며, 이 경우 delegate
속성을 self
로 설정할 수 있습니다.
Swift
import GoogleMobileAds
import UIKit
class ViewController: UIViewController, GADBannerViewDelegate {
var bannerView: GAMBannerView!
override func viewDidLoad() {
super.viewDidLoad()
// ...
bannerView.delegate = self
}
}
SwiftUI
banner.delegate = self
Objective-C
@import GoogleMobileAds;
@interface ViewController () <GADBannerViewDelegate>
@property(nonatomic, strong) GAMBannerView *bannerView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// ...
self.bannerView.delegate = self;
}
배너 이벤트 구현
GADBannerViewDelegate
의 각 메서드는 선택사항으로 표시되어 있으므로
원하는 메서드만 구현하면 됩니다. 이 예에서는 각 메서드를 구현합니다.
그리고 다음과 같이 콘솔에 메시지를 기록합니다.
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
print("bannerViewDidReceiveAd")
}
func bannerView(_ bannerView: GADBannerView, didFailToReceiveAdWithError error: Error) {
print("bannerView:didFailToReceiveAdWithError: \(error.localizedDescription)")
}
func bannerViewDidRecordImpression(_ bannerView: GADBannerView) {
print("bannerViewDidRecordImpression")
}
func bannerViewWillPresentScreen(_ bannerView: GADBannerView) {
print("bannerViewWillPresentScreen")
}
func bannerViewWillDismissScreen(_ bannerView: GADBannerView) {
print("bannerViewWillDIsmissScreen")
}
func bannerViewDidDismissScreen(_ bannerView: GADBannerView) {
print("bannerViewDidDismissScreen")
}
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
NSLog(@"bannerViewDidReceiveAd");
}
- (void)bannerView:(GADBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error {
NSLog(@"bannerView:didFailToReceiveAdWithError: %@", [error localizedDescription]);
}
- (void)bannerViewDidRecordImpression:(GADBannerView *)bannerView {
NSLog(@"bannerViewDidRecordImpression");
}
- (void)bannerViewWillPresentScreen:(GADBannerView *)bannerView {
NSLog(@"bannerViewWillPresentScreen");
}
- (void)bannerViewWillDismissScreen:(GADBannerView *)bannerView {
NSLog(@"bannerViewWillDismissScreen");
}
- (void)bannerViewDidDismissScreen:(GADBannerView *)bannerView {
NSLog(@"bannerViewDidDismissScreen");
}
배너 대리자 메서드의 구현을 보려면 광고 대리자 예를 참고하세요. iOS API 데모 앱입니다.
사용 사례
다음은 이러한 광고 이벤트 메서드의 몇 가지 사용 사례입니다.
광고가 수신되면 뷰 계층 구조에 배너 추가
GAMBannerView
를 지연하는 것이 좋습니다.
뷰 계층 구조를 변경할 수 없습니다. 그러려면
bannerViewDidReceiveAd:
이벤트의 경우:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
// Add banner to view and add constraints.
addBannerViewToView(bannerView)
}
Objective-C
- (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView {
// Add bannerView to view and add constraints as above.
[self addBannerViewToView:self.bannerView];
}
배너 광고에 애니메이션 효과 추가
다음 예와 같이 반환된 배너 광고에 bannerViewDidReceiveAd:
이벤트를 사용하여 애니메이션 효과를 줄 수도 있습니다.
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
bannerView.alpha = 0
UIView.animate(withDuration: 1, animations: {
bannerView.alpha = 1
})
}
Objective-C
- (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView {
bannerView.alpha = 0;
[UIView animateWithDuration:1.0 animations:^{
bannerView.alpha = 1;
}];
}
앱 일시중지 및 재개
GADBannerViewDelegate
프로토콜에는 다음과 같은 이벤트를 알리는 메서드가 있습니다.
클릭으로 인해 오버레이가 표시되거나 닫히는 시점이 포함됩니다. 원하는 경우
광고로 인한 것인지 여부를 추적하고,
GADBannerViewDelegate
메서드를 사용하여 지도 가장자리에
패딩을 추가할 수 있습니다.
모든 유형의 오버레이 표시나 외부 브라우저 호출을 포착하려는 경우(
광고 클릭에서 발생한 단어만 얻고자 하므로 앱은
UIViewController
또는 UIApplication
에서 동등한 메서드를 지원합니다. 이 테이블은
는
GADBannerViewDelegate
메서드:
GADBannerViewDelegate 메서드 | iOS 메서드 |
---|---|
bannerViewWillPresentScreen: |
UIViewController의 viewWillDisappear: |
bannerViewWillDismissScreen: |
UIViewController의 viewWillAppear: |
bannerViewDidDismissScreen: |
UIViewController의 viewDidAppear: |
수동 노출수 집계
특별한 이유가 있는 경우 수동으로 Ad Manager에 노출 핑을 보낼 수
노출수가 기록되어야 하는 조건 이렇게 하려면 광고를 로드하기 전에 먼저 수동 노출을 위한 GAMBannerView
를 사용 설정하세요.
Swift
bannerView.enableManualImpressions = true
Objective-C
self.bannerView.enableManualImpressions = YES;
광고가 반환되어 화면에 표시된 것이 확인되면 수동으로 노출을 실행할 수 있습니다.
Swift
bannerView.recordImpression()
Objective-C
[self.bannerView recordImpression];
앱 이벤트
앱 이벤트를 사용하면 앱 코드에 메시지를 보낼 수 있는 광고를 만들 수 있습니다. 이 메시지를 기반으로 앱에서 조치를 취할 수 있습니다.
GADAppEventDelegate
를 사용하여 Ad Manager 관련 앱 이벤트를 수신할 수 있습니다.
이러한 이벤트는 광고가 게재되기 전이라도 광고 주기 중에 언제든지 발생할 수 있습니다.
GADBannerViewDelegate
객체의 bannerViewDidReceiveAd:
가 호출됩니다.
Swift
// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.
// Called when the banner receives an app event.
optional public func bannerView(_ banner: GAMBannerView,
didReceiveAppEvent name: String, withInfo info: String?)
Objective-C
// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.
@optional
// Called when the banner receives an app event.
- (void)bannerView:(GAMBannerView *)banner
didReceiveAppEvent:(NSString *)name
withInfo:(NSString *)info;
앱 이벤트 메서드는 뷰 컨트롤러에서 구현할 수 있습니다.
Swift
import GoogleMobileAds
class ViewController: UIViewController, GADAppEventDelegate {}
Objective-C
@import GoogleMobileAds;
@interface ViewController : UIViewController <GADAppEventDelegate> {}
@end
광고 요청을 하기 전에 appEventDelegate
속성을 사용하여 대리자를 설정해야 합니다.
Swift
bannerView.appEventDelegate = self
Objective-C
self.bannerView.appEventDelegate = self;
다음은 앱의 배경색을 변경하는 방법을 보여주는 예입니다. 다음과 같이 앱 이벤트를 통해 색상을 지정합니다.
Swift
func bannerView(_ banner: GAMBannerView, didReceiveAppEvent name: String,
withInfo info: String?) {
if name == "color" {
guard let info = info else { return }
switch info {
case "green":
// Set background color to green.
view.backgroundColor = UIColor.green
case "blue":
// Set background color to blue.
view.backgroundColor = UIColor.blue
default:
// Set background color to black.
view.backgroundColor = UIColor.black
}
}
}
Objective-C
- (void)bannerView:(GAMBannerView *)banner
didReceiveAppEvent:(NSString *)name
withInfo:(NSString *)info {
if ([name isEqual:@"color"]) {
if ([info isEqual:@"green"]) {
// Set background color to green.
self.view.backgroundColor = [UIColor greenColor];
} else if ([info isEqual:@"blue"]) {
// Set background color to blue.
self.view.backgroundColor = [UIColor blueColor];
} else {
// Set background color to black.
self.view.backgroundColor = [UIColor blackColor];
}
}
}
여기 보이는 광고 소재는 색상 앱 이벤트 메시지를
appEventDelegate
:
<html>
<head>
<script src="//www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Send a color=green event when ad loads.
admob.events.dispatchAppEvent("color", "green");
document.getElementById("ad").addEventListener("click", function() {
// Send a color=blue event when ad is clicked.
admob.events.dispatchAppEvent("color", "blue");
});
});
</script>
<style>
#ad {
width: 320px;
height: 50px;
top: 0px;
left: 0px;
font-size: 24pt;
font-weight: bold;
position: absolute;
background: black;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div id="ad">Carpe diem!</div>
</body>
</html>
앱 이벤트 구현을 보려면 Ad Manager 앱 이벤트 예시를 iOS API 데모 앱
추가 리소스
GitHub의 예
- 고정된 적응형 배너 광고의 예: Swift | SwiftUI | Objective-C
- 고급 기능 데모: Swift | Objective-C
다음 단계
접을 수 있는 배너
접을 수 있는 배너 광고는 처음에 더 큰 크기로 게재되는 배너 광고입니다. 오버레이되며, 광고를 더 작은 크기로 접는 버튼이 있습니다. 이를 사용하여 실적을 더욱 최적화해 보세요. 자세한 내용은 접을 수 있는 배너 광고를 참조하세요.
인라인 적응형 배너
인라인 적응형 배너는 앵커 적응형 배너에 비해 더 크고 더 긴 배너입니다. 배너 광고 이 배너는 높이가 가변적이며 기기 화면 높이만큼 높을 수도 있습니다. 적응형 배너 광고보다 인라인 적응형 배너가 권장되는 경우 스크롤 가능한 콘텐츠에 배너 광고를 배치하는 앱 자세한 내용은 인라인 적응형 배너 배너를 참고해 자세히 알아보세요.