バナー広告は、画面の一部領域に表示される長方形の広告です。UIKitとSwiftUIの両方で使用できます。
主な特徴
- 画面の上部、下部、または中央に固定配置可能
- 画像および動画広告に対応
- UIKitおよびSwiftUIの両方をサポート
- デリゲートによる広告イベント処理
開発環境ではテストユニットIDを使用してください: PUBLIC_TEST_UNIT_ID_320_100
UIKit実装
UIKit環境ではAdropBannerクラスを使用してバナー広告を実装します。
基本実装
import UIKit
import AdropAds
class ViewController: UIViewController {
private var banner: AdropBanner?
override func viewDidLoad() {
super.viewDidLoad()
// 1. バナーインスタンスの生成
banner = AdropBanner(unitId: "YOUR_UNIT_ID")
// 2. デリゲートの設定
banner?.delegate = self
// 3. ビュー階層に追加
if let bannerView = banner {
view.addSubview(bannerView)
// 4. Auto Layoutの設定
bannerView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
bannerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
bannerView.widthAnchor.constraint(equalToConstant: 320),
bannerView.heightAnchor.constraint(equalToConstant: 100)
])
}
// 5. 広告の読み込み
banner?.load()
}
deinit {
// 6. メモリ解放前にバナーを削除
banner?.removeFromSuperview()
banner = nil
}
}
// MARK: - AdropBannerDelegate
extension ViewController: AdropBannerDelegate {
func onAdReceived(_ banner: AdropBanner) {
print("バナー広告受信成功")
}
func onAdFailedToReceive(_ banner: AdropBanner, _ errorCode: AdropErrorCode) {
print("バナー広告受信失敗: \(errorCode)")
}
func onAdImpression(_ banner: AdropBanner) {
print("バナー広告表示")
}
func onAdClicked(_ banner: AdropBanner) {
print("バナー広告クリック")
}
}
AdropBannerの初期化
let banner = AdropBanner(unitId: "YOUR_UNIT_ID")
広告の読み込み
バナーを画面に追加した後、load()メソッドを呼び出して広告をリクエストします。
バナーが画面に表示されているタイミングでload()を呼び出してください。画面に表示されていない状態で読み込むと、インプレッションが正確に測定されない可能性があります。
Context IDの設定
コンテキストターゲティングのためにContext IDを設定できます。
banner?.contextId = "article_123"
SwiftUI実装
SwiftUI環境ではAdropBannerRepresentedを使用してバナー広告を実装します。
基本実装
import SwiftUI
import AdropAds
struct ContentView: View {
var body: some View {
VStack {
Spacer()
Text("メインコンテンツ")
Spacer()
// バナー広告
AdropBannerRepresented(unitId: "YOUR_UNIT_ID")
.frame(width: 320, height: 100)
}
}
}
デリゲート処理
デリゲートを通じて広告イベントを処理できます。
import SwiftUI
import AdropAds
struct ContentView: View {
@StateObject private var bannerDelegate = BannerDelegate()
var body: some View {
VStack {
Spacer()
if bannerDelegate.isLoaded {
Text("広告読み込み完了")
}
AdropBannerRepresented(
unitId: "YOUR_UNIT_ID",
delegate: bannerDelegate
)
.frame(width: 320, height: 100)
}
}
}
// デリゲートの実装
class BannerDelegate: NSObject, ObservableObject, AdropBannerDelegate {
@Published var isLoaded = false
func onAdReceived(_ banner: AdropBanner) {
print("バナー広告受信成功")
isLoaded = true
}
func onAdFailedToReceive(_ banner: AdropBanner, _ errorCode: AdropErrorCode) {
print("バナー広告受信失敗: \(errorCode)")
isLoaded = false
}
func onAdImpression(_ banner: AdropBanner) {
print("バナー広告表示")
}
func onAdClicked(_ banner: AdropBanner) {
print("バナー広告クリック")
}
}
Context IDの設定
AdropBannerRepresented(
unitId: "YOUR_UNIT_ID",
contextId: "article_123"
)
.frame(width: 320, height: 100)
Objective-C実装
Objective-C環境でバナー広告を実装する方法です。
基本実装
@import AdropAds;
@interface ViewController () <AdropBannerDelegate>
@property (nonatomic, strong) AdropBanner *banner;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 1. バナーインスタンスの生成
self.banner = [[AdropBanner alloc] initWithUnitId:@"YOUR_UNIT_ID"];
// 2. デリゲートの設定
self.banner.delegate = self;
// 3. ビュー階層に追加
[self.view addSubview:self.banner];
// 4. Auto Layoutの設定
self.banner.translatesAutoresizingMaskIntoConstraints = NO;
[NSLayoutConstraint activateConstraints:@[
[self.banner.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
[self.banner.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor],
[self.banner.widthAnchor constraintEqualToConstant:320],
[self.banner.heightAnchor constraintEqualToConstant:100]
]];
// 5. 広告の読み込み
[self.banner load];
}
- (void)dealloc {
[self.banner removeFromSuperview];
self.banner = nil;
}
#pragma mark - AdropBannerDelegate
- (void)onAdReceived:(AdropBanner *)banner {
NSLog(@"バナー広告受信成功");
}
- (void)onAdFailedToReceive:(AdropBanner *)banner :(AdropErrorCode)errorCode {
NSLog(@"バナー広告受信失敗: %ld", (long)errorCode);
}
- (void)onAdImpression:(AdropBanner *)banner {
NSLog(@"バナー広告表示");
}
- (void)onAdClicked:(AdropBanner *)banner {
NSLog(@"バナー広告クリック");
}
@end
Context IDの設定
self.banner.contextId = @"article_123";
デリゲートメソッド
AdropBannerDelegateプロトコルは広告のライフサイクルイベントを処理します。
onAdReceived (必須)
広告受信が成功したときに呼び出されます。
func onAdReceived(_ banner: AdropBanner) {
print("バナー広告受信成功")
// 広告ローディングインジケータを非表示にするなどの処理
}
onAdFailedToReceive (必須)
広告受信が失敗したときに呼び出されます。
func onAdFailedToReceive(_ banner: AdropBanner, _ errorCode: AdropErrorCode) {
print("バナー広告受信失敗: \(errorCode)")
// エラー処理および代替コンテンツの表示
}
エラータイプを示すコード。詳細はリファレンスを参照してください。
onAdImpression (オプション)
広告が画面に表示されたときに呼び出されます。
func onAdImpression(_ banner: AdropBanner) {
print("バナー広告表示")
// インプレッション分析ロギングなどの処理
}
onAdClicked (オプション)
ユーザーが広告をクリックしたときに呼び出されます。
func onAdClicked(_ banner: AdropBanner) {
print("バナー広告クリック")
// クリック分析ロギングなどの処理
}
広告サイズ
バナー広告は、ユニットに設定したサイズに合わせてビューのサイズを指定する必要があります。
一般的なバナーサイズ
| サイズ | 用途 |
|---|
| 320 x 50 | 小型バナー |
| 16:9比率 | 動画バナー |
UIKit
bannerView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
bannerView.widthAnchor.constraint(equalToConstant: 320),
bannerView.heightAnchor.constraint(equalToConstant: 100)
])
SwiftUI
AdropBannerRepresented(unitId: "YOUR_UNIT_ID")
.frame(width: 320, height: 100)
ベストプラクティス
1. メモリ管理
ビューコントローラが解放されるときにバナーも一緒に削除してください。
deinit {
banner?.removeFromSuperview()
banner = nil
}
2. 画面の可視性
バナーが画面に表示されるときに広告を読み込んでください。
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
banner?.load()
}
3. 再利用
同じバナーインスタンスを再利用するには、load()を再度呼び出してください。
func refreshAd() {
banner?.load()
}
4. エラー処理
広告読み込み失敗時に適切なエラー処理を実装してください。
func onAdFailedToReceive(_ banner: AdropBanner, _ errorCode: AdropErrorCode) {
switch errorCode {
case .networkError:
print("ネットワークエラー: 接続を確認してください")
case .noFill:
print("表示可能な広告がありません")
default:
print("広告読み込み失敗: \(errorCode)")
}
}
テストユニットID
開発およびテスト時には以下のテストユニットIDを使用してください。
| 広告タイプ | テストユニットID | サイズ |
|---|
| バナー (320x50) | PUBLIC_TEST_UNIT_ID_320_50 | 320 x 50 |
| バナー (320x100) | PUBLIC_TEST_UNIT_ID_320_100 | 320 x 100 |
| カルーセルバナー | PUBLIC_TEST_UNIT_ID_CAROUSEL | 可変 |
| バナービデオ (16:9) | PUBLIC_TEST_UNIT_ID_BANNER_VIDEO_16_9 | 16:9比率 |
| バナービデオ (9:16) | PUBLIC_TEST_UNIT_ID_BANNER_VIDEO_9_16 | 9:16比率 |
使用例
let banner = AdropBanner(unitId: AdropUnitId.PUBLIC_TEST_UNIT_ID_320_100)
次のステップ