ネイティブ広告は、アプリの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を設定できます。
nativeAd?.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.setAdvertiserLogoView(advertiserLogoView)
nativeAdView.setAdvertiserNameView(advertiserNameView)
}
// 広告データの設定 (自動的にバインドされたビューに表示)
nativeAdView.setNativeAd(ad)
}
バインディングメソッド
| メソッド | 説明 | 必須 |
|---|
setIconView(_:) | アイコン画像ビューの設定 | オプション |
setHeadLineView(_:) | タイトルラベルの設定 | オプション |
setBodyView(_:) | 説明ラベルの設定 | オプション |
setMediaView(_:) | メイン画像/動画ビューの設定 | オプション |
setCallToActionView(_:) | CTAボタンの設定 | オプション |
setAdvertiserLogoView(_:) | 広告主ロゴ画像ビューの設定 | オプション |
setAdvertiserNameView(_:) | 広告主名ラベルの設定 | オプション |
setNativeAd(_:) | 広告データの設定 | 必須 |
広告主プロフィールを表示するには、Adropコンソールで該当広告ユニットの広告主プロフィール表示を有効にする必要があります。
4. デリゲートの処理
AdropNativeAdDelegateを実装して広告イベントを処理します。
extension MyViewController: AdropNativeAdDelegate {
// 広告受信成功
func onAdReceived(_ nativeAd: AdropNativeAd) {
print("ネイティブ広告受信成功")
// 広告データにアクセス
if let headline = nativeAd.headline {
print("タイトル: \(headline)")
}
if let body = nativeAd.body {
print("説明: \(body)")
}
if let cta = nativeAd.callToAction {
print("CTA: \(cta)")
}
// ビューに広告をバインディング
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(_:) | オプション | 広告が表示されたときに呼び出される |
広告プロパティ
AdropNativeAdオブジェクトを通じて広告データにアクセスできます。
基本プロパティ
// 広告受信成功時
func onAdReceived(_ nativeAd: AdropNativeAd) {
// タイトル
if let headline = nativeAd.headline {
print("タイトル: \(headline)")
}
// 説明
if let body = nativeAd.body {
print("説明: \(body)")
}
// CTAボタンテキスト
if let callToAction = nativeAd.callToAction {
print("CTA: \(callToAction)")
}
// メイン画像/動画
if let asset = nativeAd.asset {
print("メディアURL: \(asset)")
}
}
広告主プロフィール
// 広告主情報
if let profile = nativeAd.profile {
if let logo = profile.displayLogo {
print("広告主ロゴ: \(logo)")
}
if let name = profile.displayName {
print("広告主名: \(name)")
}
}
カスタムフィールド
Adropコンソールで設定した追加テキスト項目にアクセスできます。
// 追加テキスト項目
if let extra = nativeAd.extra {
// 例: 価格情報
if let price = extra["price"] {
print("価格: \(price)")
}
// 例: 割引率
if let discount = extra["discount"] {
print("割引率: \(discount)")
}
// 例: 評価
if let rating = extra["rating"] {
print("評価: \(rating)")
}
}
extraフィールドは、Adropコンソールの広告ユニット設定で定義した追加テキスト項目IDをキーとして使用します。
プロパティ一覧
| プロパティ | 型 | 説明 |
|---|
headline | String? | 広告タイトル |
body | String? | 広告説明 |
callToAction | String? | CTAボタンテキスト |
asset | String? | メイン画像/動画URL |
profile | AdropProfile? | 広告主プロフィール情報 |
extra | [String: String]? | 追加カスタムフィールド |
テストユニット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を使用してください。
関連ドキュメント
