メインコンテンツへスキップ

概要

ネイティブ広告は、アプリのUIに自然に統合される広告フォーマットです。広告要素(タイトル、画像、説明など)をアプリデザインに合わせて自由にカスタマイズできます。

主な特徴

  • アプリUIと完璧に統合可能なカスタムデザイン
  • 広告要素への個別アクセスと配置
  • 広告主プロフィール情報の表示オプション
  • 追加カスタムフィールドのサポート

実装方法

ネイティブ広告の実装は次の手順で進めます:
  1. 広告の読み込み
  2. カスタムビューの作成
  3. ビューのバインディング
  4. デリゲートの処理

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をキーとして使用します。

プロパティ一覧

プロパティ説明
unitIdString広告ユニットID
contextIdStringコンテキストターゲティングID
headlineString広告タイトル
bodyString広告説明
callToActionStringCTAボタンテキスト
iconStringアイコン画像URL
coverStringカバー画像URL
assetStringメイン画像/動画URL
creativeStringクリエイティブHTMLコンテンツ
creativeSizeCGSizeクリエイティブコンテンツサイズ
advertiserString広告主名
advertiserURLString広告主URL
profileAdropNativeAdProfile広告主プロフィール情報
extra[String: String]追加カスタムフィールド
accountTag[String: Any]アカウントレベルのタグデータ
creativeTag[String: Any]クリエイティブレベルのタグデータ
destinationURLString?広告遷移先URL
txIdStringトランザクションID
campaignIdStringキャンペーンID
creativeIdStringクリエイティブID
browserTargetBrowserTarget?広告クリック時のURL開き方
isLoadedBool広告が読み込まれたかどうか
isBackfilledBoolバックフィル広告かどうか

AdropNativeAdProfile

プロパティ説明
displayLogoString広告主ロゴ画像URL
displayNameString広告主表示名
linkString?広告主ページへのリンク

カスタムクリック

カスタムクリックを使用すると、デフォルトの動作(リンク先URLを開く)の代わりに、広告クリック動作を自分で処理できます。

設定

let nativeAd = AdropNativeAd(unitId: "YOUR_UNIT_ID")
nativeAd.useCustomClick = true

全体クリック領域

setIsEntireClick(_:)を使用して、AdropNativeAdView全体をクリック可能にします。
nativeAdView.setIsEntireClick(true)
useCustomClicktrueの場合、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依存性を追加する必要があります。はじめにを参照してください。

関連ドキュメント

はじめに

SDKのインストールと初期化

バナー広告

バナー広告の実装

インタースティシャル広告

インタースティシャル広告の実装

リワード広告

リワード広告の実装