ネイティブ広告は、アプリのUIに自然に統合される広告フォーマットです。広告要素(タイトル、画像、説明など)をアプリデザインに合わせて自由にカスタマイズできます。
主な特徴
- アプリUIと完璧に統合可能なカスタムデザイン
- 広告要素への個別アクセスと配置
- 広告主プロフィール情報の表示オプション
- 追加カスタムフィールドのサポート
実装方法
ネイティブ広告の実装は次の手順で進めます:
- 広告の読み込み
- カスタムビューの作成
- ビューのバインディング
- デリゲートの処理
1. 広告の読み込み
AdropNativeAdインスタンスを生成して広告を読み込みます。
import AdropAds
class MyViewController: UIViewController {
private var nativeAd: AdropNativeAd?
override func viewDidLoad() {
super.viewDidLoad()
// ネイティブ広告の生成
nativeAd = AdropNativeAd(unitId: "YOUR_NATIVE_UNIT_ID")
nativeAd?.delegate = self
// 広告の読み込み
nativeAd?.load()
}
}
Context IDの設定
コンテキストターゲティングのためにContext IDを設定できます。
// contextIdは読み取り専用 — イニシャライザで設定
let nativeAd = AdropNativeAd(unitId: "YOUR_UNIT_ID", contextId: "article_123")
開発中はテストユニットIDを使用してください。テストユニットIDセクションを参照してください。
2. カスタムビューの作成
ストーリーボードまたはコードでネイティブ広告ビューを構成します。
UIKit (Storyboard/XIB)
ストーリーボードでAdropNativeAdViewを生成し、広告要素をIBOutletとして接続します。
import AdropAds
class NativeAdViewCell: UITableViewCell {
@IBOutlet weak var nativeAdView: AdropNativeAdView!
@IBOutlet weak var iconImageView: UIImageView!
@IBOutlet weak var headlineLabel: UILabel!
@IBOutlet weak var bodyLabel: UILabel!
@IBOutlet weak var mediaView: UIView!
@IBOutlet weak var callToActionButton: UIButton!
// 広告主プロフィール (オプション)
@IBOutlet weak var advertiserLogoImageView: UIImageView!
@IBOutlet weak var advertiserNameLabel: UILabel!
func configure(with ad: AdropNativeAd) {
// ビューのバインディング (次のセクション参照)
}
}
UIKit (コード)
import AdropAds
class NativeAdView: UIView {
let nativeAdView = AdropNativeAdView()
let iconImageView = UIImageView()
let headlineLabel = UILabel()
let bodyLabel = UILabel()
let mediaView = UIView()
let callToActionButton = UIButton()
override init(frame: CGRect) {
super.init(frame: frame)
setupViews()
}
private func setupViews() {
addSubview(nativeAdView)
nativeAdView.addSubview(iconImageView)
nativeAdView.addSubview(headlineLabel)
nativeAdView.addSubview(bodyLabel)
nativeAdView.addSubview(mediaView)
nativeAdView.addSubview(callToActionButton)
// Auto Layoutの設定
// ...
}
}
3. ビューのバインディング
AdropNativeAdViewに広告要素をバインディングして広告データを表示します。
func configure(with ad: AdropNativeAd) {
// 各要素をAdropNativeAdViewにバインディング
nativeAdView.setIconView(iconImageView)
nativeAdView.setHeadLineView(headlineLabel)
nativeAdView.setBodyView(bodyLabel)
nativeAdView.setMediaView(mediaView)
nativeAdView.setCallToActionView(callToActionButton)
// 広告主プロフィール (オプション)
if let advertiserLogoView = advertiserLogoImageView,
let advertiserNameView = advertiserNameLabel {
nativeAdView.setProfileLogoView(advertiserLogoView)
nativeAdView.setProfileNameView(advertiserNameView)
}
// 広告データの設定 (自動的にバインドされたビューに表示)
nativeAdView.setNativeAd(ad)
}
バインディングメソッド
| メソッド | 説明 | 必須 |
|---|
setIconView(_:onClick:) | アイコン画像ビューの設定. onClick: ((AdropNativeAd?, UIView) -> Void)? = nil | オプション |
setHeadLineView(_:onClick:) | タイトルラベルの設定. onClick: ((AdropNativeAd?, UIView) -> Void)? = nil | オプション |
setBodyView(_:) | 説明ラベルの設定 | オプション |
setMediaView(_:) | メイン画像/動画ビューの設定 | オプション |
setCallToActionView(_:onClick:) | CTAボタンの設定. onClick: ((AdropNativeAd?, UIView) -> Void)? = nil | オプション |
setAdvertiserView(_:onClick:) | 広告主ビューの設定. onClick: ((AdropNativeAd?, UIView) -> Void)? = nil | オプション |
setProfileLogoView(_:onClick:) | 広告主ロゴ画像ビューの設定. onClick: ((AdropNativeAd?, UIView) -> Void)? = nil | オプション |
setProfileNameView(_:onClick:) | 広告主名ラベルの設定. onClick: ((AdropNativeAd?, UIView) -> Void)? = nil | オプション |
setNativeAd(_:) | 広告データの設定 | 必須 |
onClickクロージャは、ユーザーがバインドされたビューをタップしたときに呼び出されます。現在のAdropNativeAd?インスタンスとタップされたUIViewをパラメータとして受け取ります。指定しない場合、デフォルトのクリック動作(リンク先URLを開く)が使用されます。
広告主プロフィールを表示するには、Adropコンソールで該当広告ユニットの広告主プロフィール表示を有効にする必要があります。
4. デリゲートの処理
AdropNativeAdDelegateを実装して広告イベントを処理します。
extension MyViewController: AdropNativeAdDelegate {
// 広告受信成功
func onAdReceived(_ nativeAd: AdropNativeAd) {
print("ネイティブ広告受信成功")
// 広告データにアクセス
print("タイトル: \(nativeAd.headline)")
print("説明: \(nativeAd.body)")
print("CTA: \(nativeAd.callToAction)")
// ビューに広告をバインディング
configureNativeAdView(with: nativeAd)
}
// 広告受信失敗
func onAdFailedToReceive(_ nativeAd: AdropNativeAd, _ errorCode: AdropErrorCode) {
print("ネイティブ広告受信失敗: \(errorCode)")
}
// 広告クリック (オプション)
func onAdClicked(_ nativeAd: AdropNativeAd) {
print("ネイティブ広告クリック")
}
// 広告表示 (オプション)
func onAdImpression(_ nativeAd: AdropNativeAd) {
print("ネイティブ広告表示")
}
}
デリゲートメソッド
| メソッド | 必須 | 説明 |
|---|
onAdReceived(_:) | 必須 | 広告読み込み成功時に呼び出される |
onAdFailedToReceive(_:_:) | 必須 | 広告読み込み失敗時に呼び出される |
onAdClicked(_:) | オプション | ユーザーが広告をクリックしたときに呼び出される |
onAdImpression(_:) | オプション | 広告が表示されたときに呼び出される |
クロージャコールバック
デリゲートの代わりにクロージャベースのコールバックを使用できます。
let nativeAd = AdropNativeAd(unitId: "YOUR_UNIT_ID")
nativeAd.onAdReceived = { ad in
print("ネイティブ広告受信成功")
}
nativeAd.onAdFailedToReceive = { ad, errorCode in
print("ネイティブ広告受信失敗: \(errorCode)")
}
nativeAd.onAdImpression = { ad in
print("ネイティブ広告表示")
}
nativeAd.onAdClicked = { ad in
print("ネイティブ広告クリック")
}
デリゲートとクロージャの両方を設定すると、両方が呼び出されます。
広告プロパティ
AdropNativeAdオブジェクトを通じて広告データにアクセスできます。
基本プロパティ
// 広告受信成功時
func onAdReceived(_ nativeAd: AdropNativeAd) {
// タイトル
print("タイトル: \(nativeAd.headline)")
// 説明
print("説明: \(nativeAd.body)")
// CTAボタンテキスト
print("CTA: \(nativeAd.callToAction)")
// メイン画像/動画
print("メディアURL: \(nativeAd.asset)")
}
広告主プロフィール
// 広告主情報(profileおよびそのプロパティはnon-optional)
let profile = nativeAd.profile
print("広告主ロゴ: \(profile.displayLogo)")
print("広告主名: \(profile.displayName)")
// プロフィールリンク(オプション — 広告主ページへのリンク)
if let link = profile.link {
print("プロフィールリンク: \(link)")
}
カスタムフィールド
Adropコンソールで設定した追加テキスト項目にアクセスできます。
// 追加テキスト項目(extraはnon-optional [String: String])
let extra = nativeAd.extra
if !extra.isEmpty {
// 例: 価格情報
if let price = extra["price"] {
print("価格: \(price)")
}
// 例: 割引率
if let discount = extra["discount"] {
print("割引率: \(discount)")
}
// 例: 評価
if let rating = extra["rating"] {
print("評価: \(rating)")
}
}
extraフィールドは、Adropコンソールの広告ユニット設定で定義した追加テキスト項目IDをキーとして使用します。
プロパティ一覧
| プロパティ | 型 | 説明 |
|---|
unitId | String | 広告ユニットID |
contextId | String | コンテキストターゲティングID |
headline | String | 広告タイトル |
body | String | 広告説明 |
callToAction | String | CTAボタンテキスト |
icon | String | アイコン画像URL |
cover | String | カバー画像URL |
asset | String | メイン画像/動画URL |
creative | String | クリエイティブHTMLコンテンツ |
creativeSize | CGSize | クリエイティブコンテンツサイズ |
advertiser | String | 広告主名 |
advertiserURL | String | 広告主URL |
profile | AdropNativeAdProfile | 広告主プロフィール情報 |
extra | [String: String] | 追加カスタムフィールド |
accountTag | [String: Any] | アカウントレベルのタグデータ |
creativeTag | [String: Any] | クリエイティブレベルのタグデータ |
destinationURL | String? | 広告遷移先URL |
txId | String | トランザクションID |
campaignId | String | キャンペーンID |
creativeId | String | クリエイティブID |
browserTarget | BrowserTarget? | 広告クリック時のURL開き方 |
isLoaded | Bool | 広告が読み込まれたかどうか |
isBackfilled | Bool | バックフィル広告かどうか |
AdropNativeAdProfile
| プロパティ | 型 | 説明 |
|---|
displayLogo | String | 広告主ロゴ画像URL |
displayName | String | 広告主表示名 |
link | String? | 広告主ページへのリンク |
カスタムクリック
カスタムクリックを使用すると、デフォルトの動作(リンク先URLを開く)の代わりに、広告クリック動作を自分で処理できます。
let nativeAd = AdropNativeAd(unitId: "YOUR_UNIT_ID")
nativeAd.useCustomClick = true
全体クリック領域
setIsEntireClick(_:)を使用して、AdropNativeAdView全体をクリック可能にします。
nativeAdView.setIsEntireClick(true)
useCustomClickがtrueの場合、setNativeAd(_:)でsetIsEntireClick(true)が自動的に呼び出されます。
手動クリック
performClick()を使用して手動でクリックイベントをトリガーします。
nativeAdView.performClick()
URLを開く
open(_:useInAppBrowser:)を使用してプログラムでURLを開きます。
// リンク先URLを開く
nativeAd.open(nativeAd.destinationURL)
// アプリ内ブラウザで開く
nativeAd.open(nativeAd.destinationURL, useInAppBrowser: true)
ベストプラクティス
エラー処理
広告読み込み失敗時に代替UIを表示してユーザー体験を維持してください。
func onAdFailedToReceive(_ nativeAd: AdropNativeAd, _ errorCode: AdropErrorCode) {
print("ネイティブ広告受信失敗: \(errorCode)")
// 広告領域を非表示
nativeAdContainerView.isHidden = true
// または代替コンテンツを表示
showFallbackContent()
}
テストユニットID
開発およびテスト時には次のテストユニットIDを使用してください。
| 広告タイプ | テストユニットID |
|---|
| ネイティブ (画像) | PUBLIC_TEST_UNIT_ID_NATIVE |
| ネイティブビデオ (16:9) | PUBLIC_TEST_UNIT_ID_NATIVE_VIDEO_16_9 |
| ネイティブビデオ (9:16) | PUBLIC_TEST_UNIT_ID_NATIVE_VIDEO_9_16 |
// テスト広告の読み込み
nativeAd = AdropNativeAd(unitId: AdropUnitId.PUBLIC_TEST_UNIT_ID_NATIVE)
実際の配信時には、必ずAdropコンソールで作成した実際のユニットIDを使用してください。
バックフィル広告
バックフィル広告が有効な場合、ダイレクト広告がない時に自動的にバックフィル広告がロードされます。isBackfilledプロパティでバックフィル広告かどうかを確認できます。
class ViewController: UIViewController, AdropNativeAdDelegate {
private var nativeAd: AdropNativeAd?
func onAdReceived(_ nativeAd: AdropNativeAd) {
if nativeAd.isBackfilled {
print("バックフィル広告がロードされました")
} else {
print("ダイレクト広告がロードされました")
}
}
func onAdFailedToReceive(_ nativeAd: AdropNativeAd, _ errorCode: AdropErrorCode) {
switch errorCode {
case .ERROR_CODE_AD_NO_FILL:
print("ダイレクト広告なし、バックフィル広告をリクエスト中...")
case .ERROR_CODE_AD_BACKFILL_NO_FILL:
print("バックフィル広告もありません")
// 広告領域を非表示にする
default:
print("広告ロード失敗: \(errorCode)")
}
}
}
バックフィル広告を使用するには、AdropAds-Backfill依存性を追加する必要があります。はじめにを参照してください。
関連ドキュメント
インタースティシャル広告
インタースティシャル広告の実装