ネイティブ広告 - Ad Control Help Center

概要

ネイティブ広告はアプリのデザインに合わせて広告UIを自由にカスタマイズできる広告フォーマットです。広告素材（画像、動画）、タイトル、説明、CTAボタンなどの要素を個別に配置して自然なユーザー体験を提供できます。

主な機能

完全なUIカスタマイズ：アプリのデザインシステムに合わせて広告レイアウトを自由に構成
多様なメディア対応：画像および動画広告素材対応
柔軟なクリック処理：全体クリックまたはカスタムクリック処理が可能
プロフィール情報表示：広告主プロフィールロゴおよび名前対応
バックフィル広告対応：バックフィル広告かどうか確認可能

AdropNativeAdクラス

ネイティブ広告をロードして管理するメインクラスです。

コンストラクタ

new AdropNativeAd(
  unitId: string,
  useCustomClick?: boolean,
  preferredAdChoicesPosition?: AdropAdChoicesPosition,
  contextId?: string
)

string

必須

広告ユニットID（コンソールで発行）

boolean

デフォルト:"false"

カスタムクリック処理使用有無

true：開発者が直接クリック処理を実装（ビデオ広告コントローラー使用可能）
false：AdropNativeAdViewがすべてのクリックイベントを自動処理

AdropAdChoicesPosition

デフォルト:"AdropAdChoicesPosition.topRight"

バックフィルネイティブ広告のAdChoicesマーク表示位置

string

コンテキストターゲティングに使用するコンテキストID（1.17.0+）

メソッド

メソッド	説明
`load()`	広告をリクエストしてロードします
`destroy()`	広告リソースを解放します

プロパティ

プロパティ	タイプ	説明
`isLoaded`	`boolean`	広告ロード完了有無（読み取り専用）
`unitId`	`string`	広告ユニットID（読み取り専用）
`contextId`	`string`	コンストラクタに渡したコンテキストID（読み取り専用）
`useCustomClick`	`boolean`	カスタムクリック処理使用有無（読み取り専用）
`creativeId`	`string`	広告素材ID（読み取り専用）
`txId`	`string`	トランザクションID（読み取り専用）
`campaignId`	`string`	キャンペーンID（読み取り専用）
`isBackfilled`	`boolean`	バックフィル広告かどうか（読み取り専用）
`isVideoAd`	`boolean`	ビデオ広告かどうか（読み取り専用）
`browserTarget`	`BrowserTarget`	ブラウザターゲット設定（読み取り専用）
`properties`	`AdropNativeProperties`	広告プロパティ情報（読み取り専用）
`listener`	`AdropNativeAdListener`	広告イベントリスナー

AdropNativeAdViewコンポーネント

ネイティブ広告を表示するコンテナコンポーネントです。

Props

interface Props extends ViewProps {
  nativeAd?: AdropNativeAd
}

AdropNativeAd

表示するネイティブ広告インスタンス

使用例

<AdropNativeAdView nativeAd={nativeAd} style={styles.adContainer}>
  {/* 広告要素 */}
</AdropNativeAdView>

AdropNativeAdViewは広告コンテキストを提供するため、すべての広告要素ビューはこのコンポーネント内部に配置する必要があります。

ネイティブ広告要素ビュー

AdropProfileLogoView

広告主プロフィールロゴを表示する画像コンポーネントです。

<AdropProfileLogoView style={styles.profileLogo} />

Props: Omit<ImageProps, 'source'>（React NativeのImageコンポーネントプロパティ、sourceは自動設定されます）

AdropProfileNameView

広告主プロフィール名を表示するテキストコンポーネントです。

<AdropProfileNameView style={styles.profileName} />

Props: TextProps（React NativeのTextコンポーネントプロパティ）

AdropHeadLineView

広告タイトルを表示するテキストコンポーネントです。

<AdropHeadLineView style={styles.headline} />

Props: TextProps（React NativeのTextコンポーネントプロパティ）

AdropBodyView

広告本文を表示するテキストコンポーネントです。

<AdropBodyView style={styles.body} />

Props: TextProps（React NativeのTextコンポーネントプロパティ）

AdropMediaView

広告画像または動画を表示するメディアコンポーネントです。

<AdropMediaView style={styles.media} />

Props: ViewProps（React NativeのViewコンポーネントプロパティ）

ネイティブ広告の動画クリエイティブは、必ずproperties.creative（HTMLペイロード）をWebViewでレンダリングする必要があります。properties.assetをreact-native-videoなどの独自プレイヤーに直接渡すと、SDKの動画トラッキングパイプラインを経由しなくなり、VTRが計測されず、onAdVideoStart / onAdVideoEndコールバックも呼び出されません。動画トラッキングとVTRセクションを参照してください。

AdropCallToActionView

行動誘導フレーズ（CTA）を表示するテキストコンポーネントです。

<AdropCallToActionView style={styles.cta} />

Props: TextProps（React NativeのTextコンポーネントプロパティ）

AdropAdvertiserView

広告主名を表示するテキストコンポーネントです。

<AdropAdvertiserView style={styles.advertiser} />

Props: TextProps（React NativeのTextコンポーネントプロパティ）

AdropIconView

広告アイコンを表示する画像コンポーネントです。

<AdropIconView style={styles.icon} />

Props: Omit<ImageProps, 'source'>（React NativeのImageコンポーネントプロパティ、sourceは自動設定されます）

AdropNativeAdListenerインターフェース

広告イベントを処理するリスナーインターフェースです。

interface AdropNativeAdListener {
  onAdReceived?: (ad: AdropNativeAd) => void
  onAdClicked?: (ad: AdropNativeAd) => void
  onAdImpression?: (ad: AdropNativeAd) => void
  onAdFailedToReceive?: (ad: AdropNativeAd, errorCode?: any) => void
  onAdVideoStart?: (ad: AdropNativeAd) => void
  onAdVideoEnd?: (ad: AdropNativeAd) => void
}

コールバックメソッド	説明
`onAdReceived`	広告受信成功時に呼び出されます
`onAdClicked`	広告クリック時に呼び出されます
`onAdImpression`	広告表示（インプレッション）時に呼び出されます
`onAdFailedToReceive`	広告受信失敗時に呼び出されます
`onAdVideoStart`	動画広告の再生開始時に呼び出されます
`onAdVideoEnd`	動画広告の再生終了時に呼び出されます

AdropNativePropertiesタイプ

広告プロパティ情報を含むタイプです。

type AdropNativeProperties = {
  icon?: string                      // アイコン画像URL
  cover?: string                     // カバー画像URL
  headline?: string                  // 広告タイトル
  body?: string                      // 広告本文
  creative?: string                  // 広告素材HTML（WebViewレンダリング用）
  asset?: string                     // アセット情報
  destinationURL?: string            // 遷移先URL
  advertiserURL?: string             // 広告主URL
  accountTag?: string                // アカウントタグ
  creativeTag?: string               // 素材タグ
  advertiser?: string                // 広告主名
  callToAction?: string              // 行動誘導フレーズ
  profile?: AdropNativeProfile       // プロフィール情報
  extra?: Record<string, string>     // 追加情報
  extraAssets?: Record<string, AdropNativeAsset> // メディアIDをキーとするメディア（複数メディアのクリエイティブを参照）
  isBackfilled?: boolean             // バックフィル広告かどうか
}

AdropNativeProfileタイプ

広告主プロフィール情報を含むタイプです。

type AdropNativeProfile = {
  displayName: string                // プロフィール表示名
  displayLogo: string                // プロフィールロゴ画像URL
}

実装例

以下はネイティブ広告を実装する完全な例です。

import React, { useCallback, useEffect, useMemo, useState } from 'react'
import {
  AdropBodyView,
  AdropHeadLineView,
  AdropMediaView,
  AdropNativeAd,
  AdropNativeAdView,
  AdropProfileLogoView,
  AdropProfileNameView,
} from 'adrop-ads-react-native'
import type { AdropNativeAdListener } from 'adrop-ads-react-native'
import { WebView } from 'react-native-webview'
import {
  Button,
  Dimensions,
  ScrollView,
  StyleSheet,
  Text,
  View,
  Linking,
  Platform,
} from 'react-native'

const NativeAdExample: React.FC = () => {
  const [nativeAd, setNativeAd] = useState<AdropNativeAd>()
  const [isLoaded, setIsLoaded] = useState(false)
  const [errorCode, setErrorCode] = useState('')

  // URL開きハンドラー
  const openUrl = useCallback((url: string) => {
    Linking.openURL(url).catch((err) =>
      console.error('Failed to open URL:', err)
    )
  }, [])

  // 広告イベントリスナー
  const listener = useMemo(
    (): AdropNativeAdListener => ({
      onAdReceived: (ad) => {
        console.log('広告受信:', ad.unitId, ad.properties)
        setIsLoaded(true)
        setErrorCode('')
      },
      onAdFailedToReceive: (_, error) => {
        console.log('広告受信失敗:', error)
        setErrorCode(error)
      },
      onAdClicked: (ad) => {
        console.log('広告クリック:', ad.unitId)
      },
      onAdImpression: (ad) => {
        console.log('広告表示:', ad.unitId)
      },
    }),
    []
  )

  // 広告初期化
  const initialize = useCallback(
    (unitId: string) => {
      const adropNativeAd = new AdropNativeAd(unitId)
      adropNativeAd.listener = listener

      setNativeAd((prev) => {
        prev?.destroy()
        return adropNativeAd
      })

      setIsLoaded(false)
      setErrorCode('')
    },
    [listener]
  )

  // コンポーネントマウント時に広告初期化
  useEffect(() => {
    initialize('YOUR_UNIT_ID')

    // コンポーネントアンマウント時に広告解放
    return () => {
      nativeAd?.destroy()
    }
  }, [])

  // 広告ロード
  const load = () => nativeAd?.load()

  // 広告ビューレンダリング
  const adView = useMemo(() => {
    if (!isLoaded) return null

    return (
      <AdropNativeAdView
        nativeAd={nativeAd}
        style={{
          ...styles.adContainer,
          width: Dimensions.get('window').width,
        }}
      >
        {/* プロフィール領域 */}
        <View style={styles.rowContainer}>
          <AdropProfileLogoView style={styles.profileLogo} />
          <AdropProfileNameView style={styles.profileName} />
        </View>

        {/* 広告タイトル */}
        <AdropHeadLineView style={styles.headline} />

        {/* 広告本文 */}
        <AdropBodyView style={styles.body} />

        {/* バックフィル広告または非ビデオ広告はAdropMediaView、ビデオ広告はWebView */}
        {!nativeAd?.isVideoAd || nativeAd?.isBackfilled ? (
          // バックフィル広告または非ビデオ広告：AdropMediaView使用
          <AdropMediaView style={styles.media} />
        ) : (
          // ビデオ広告：WebViewでレンダリング
          <WebView
            source={{
              html: nativeAd?.properties?.creative ?? '',
            }}
            style={styles.media}
            javaScriptEnabled={true}
            mediaPlaybackRequiresUserAction={false}
            allowsInlineMediaPlayback={true}
            scrollEnabled={false}
            onNavigationStateChange={(event) => {
              // Android WebViewイベント
              if (
                event.url &&
                event.url !== 'about:blank' &&
                !event.url.startsWith('data:')
              ) {
                openUrl(event.url)
              }
            }}
            onOpenWindow={(event) => {
              // iOS WebViewイベント（window.open）
              if (event.nativeEvent?.targetUrl) {
                openUrl(event.nativeEvent.targetUrl)
              }
            }}
          />
        )}
      </AdropNativeAdView>
    )
  }, [isLoaded, nativeAd, openUrl])

  return (
    <ScrollView>
      <View style={styles.container}>
        {/* 広告ロードボタン */}
        <View style={styles.button}>
          <Button title="広告ロード" onPress={load} />
        </View>

        {/* 広告ビュー */}
        {adView}

        {/* エラー表示 */}
        {errorCode && (
          <Text style={styles.error}>
            エラー: {errorCode}
          </Text>
        )}
      </View>
    </ScrollView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 5,
    paddingHorizontal: 16,
  },
  button: {
    marginVertical: 8,
  },
  adContainer: {
    paddingHorizontal: 16,
  },
  rowContainer: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    marginBottom: 8,
  },
  profileLogo: {
    width: 32,
    height: 32,
    marginRight: 8,
    borderRadius: 16,
  },
  profileName: {
    fontSize: 14,
    fontWeight: 'bold',
    color: 'black',
  },
  headline: {
    fontSize: 16,
    fontWeight: 'bold',
    color: 'black',
    marginTop: 8,
  },
  body: {
    fontSize: 14,
    color: 'black',
    marginVertical: 8,
  },
  media: {
    width: '100%',
    height: 360,
    marginTop: 8,
  },
  error: {
    color: 'red',
    marginVertical: 8,
  },
})

export default NativeAdExample

テストユニットID

開発およびテスト時には以下のテストユニットIDを使用してください。

プラットフォーム	フォーマット	テストユニットID
Android/iOS	ネイティブ（画像）	`PUBLIC_TEST_UNIT_ID_NATIVE`
Android/iOS	ネイティブビデオ（16:9）	`PUBLIC_TEST_UNIT_ID_NATIVE_VIDEO_16_9`
Android/iOS	ネイティブビデオ（9:16）	`PUBLIC_TEST_UNIT_ID_NATIVE_VIDEO_9_16`

プロダクション配布前に必ず実際のユニットIDに置き換えてください。

エラー処理

広告ロード失敗時にonAdFailedToReceiveコールバックでエラーコードを受け取ることができます。

主なエラーコード

エラーコード	説明
`AdropErrorCode.network`	ネットワークエラー
`AdropErrorCode.internal`	内部エラー
`AdropErrorCode.initialize`	初期化エラー
`AdropErrorCode.invalidUnit`	無効なユニットID
`AdropErrorCode.adNoFill`	表示可能な広告なし
`AdropErrorCode.adLoading`	広告ロード中
`AdropErrorCode.backfillNoFill`	バックフィル広告もなし

エラー処理の例

const listener: AdropNativeAdListener = {
  onAdFailedToReceive: (ad, errorCode) => {
    switch (errorCode) {
      case AdropErrorCode.adNoFill:
        console.log('表示可能な広告がありません - 広告領域を非表示')
        break
      case AdropErrorCode.network:
        console.log('ネットワークエラー - 再試行')
        setTimeout(() => ad.load(), 3000)
        break
      default:
        console.log('広告ロード失敗:', errorCode)
    }
  }
}

ベストプラクティス

1. リソース解放

コンポーネントアンマウント時に必ず広告リソースを解放してください。

useEffect(() => {
  const ad = new AdropNativeAd('YOUR_UNIT_ID')
  setNativeAd(ad)

  return () => {
    ad.destroy()
  }
}, [])

2. ビデオ広告およびバックフィル広告処理

ビデオ広告かどうか、およびバックフィル広告かどうかに応じて適切なレンダリング方式を選択してください。

{!nativeAd?.isVideoAd || nativeAd?.isBackfilled ? (
  <AdropMediaView style={styles.media} />
) : (
  <WebView source={{ html: nativeAd?.properties?.creative ?? '' }} />
)}

3. URL処理

WebViewでURLクリック時に外部ブラウザで開くように処理してください。

<WebView
  onNavigationStateChange={(event) => {
    if (event.url && event.url !== 'about:blank') {
      Linking.openURL(event.url)
    }
  }}
/>

4. 広告要素の選択的使用

アプリのデザインに合わせて必要な広告要素のみ選択的に使用してください。

<AdropNativeAdView nativeAd={nativeAd}>
  {/* 最小構成：メディアとタイトルのみ表示 */}
  <AdropHeadLineView style={styles.headline} />
  <AdropMediaView style={styles.media} />
</AdropNativeAdView>

動画トラッキングとVTR

Adropはネイティブ広告の動画指標 — VTR（動画完了率）、onAdVideoStart、onAdVideoEnd — を、SDKメディアコンテナ内で動画がレンダリングされる場合にのみ収集します。React Nativeでは実装例セクションのように、properties.creative（HTMLペイロード）をWebViewでレンダリングする方式がこれに該当します。これは広告のメインメディア（メディア 1）に当てはまります。複数メディアのクリエイティブのそれ以外のメディアについては、複数メディアのクリエイティブを参照してください。 properties.assetフィールドは元の画像または動画ファイルのURLを返します。これはサムネイル表示や媒体社独自分析などの補助メタデータとして公開されており、再生を直接行うためのものではありません。

動画ネイティブ広告のproperties.asset URLを独自の動画プレイヤー（react-native-video、expo-avまたはサードパーティプレイヤー）に直接渡さないでください。SDKメディアコンテナを経由しないと以下の現象が発生します。

該当面でVTR（動画完了率）が収集されません。
onAdVideoStart / onAdVideoEndコールバックが呼び出されません。
該当ユニットの動画パフォーマンス集計が欠落または0として報告されます。

クリック（onAdClicked）とインプレッション（onAdImpression）トラッキングはAdropNativeAdViewに接続されているため引き続き動作しますが、動画関連シグナルは失われます。

推奨パターン

動画クリエイティブはAdropNativeAdView内部に配置したWebViewでHTMLクリエイティブをレンダリングしてください。

{!nativeAd?.isVideoAd || nativeAd?.isBackfilled ? (
  <AdropMediaView style={styles.media} />
) : (
  <WebView
    source={{ html: nativeAd?.properties?.creative ?? '' }}
    style={styles.media}
    javaScriptEnabled
    mediaPlaybackRequiresUserAction={false}
    allowsInlineMediaPlayback
    scrollEnabled={false}
  />
)}

AdropNativeAdのisVideoAdとisBackfilledフラグを使用すると、asset URLを直接検査することなく、<AdropMediaView />（画像またはバックフィルクリエイティブ）と<WebView />（ダイレクト動画クリエイティブ）を分岐できます。

特定の面がどうしても独自プレイヤーを使う必要があり、VTRが計測されないことを許容する場合、広告をAdropNativeAdViewにバインドしたままにすることで、クリックとインプレッションのアトリビューションは引き続き確保できます。ただしその面を社内レポートで非VTRインベントリとして分類し、SDKが計測した動画パフォーマンスと混在させないでください。

複数メディアのクリエイティブ

adrop-ads-react-native 1.16.0以降が必要です。バックフィルを使う場合は、バックフィルモジュールも1.16.0に更新してください。

ネイティブユニットにメディアが2つ以上ある場合、クリエイティブにはメディアごとのファイルが含まれます。properties.extraAssetsには、広告のすべてのメディアがコンソールで設定したメディアIDをキーとして格納されています。メディア 1は常にm1で、それ以外のメディアには広告ユニット詳細画面のメディアサイズに表示されるID（例：m2、m3）が使われます。

const media2 = nativeAd.properties.extraAssets?.m2 // AdropNativeAsset | undefined

メディア 1（m1）はproperties.asset、properties.creativeと同じメディアです。これまでどおり表示し、それ以外のメディアだけを自分で描画してください。
メディアが1つのユニットのクリエイティブとバックフィル広告では、extraAssetsは空です。これらの広告は通常どおり表示してください。
メディアは順序に頼らず、IDで取得してください。
広告がダークモードで配信される場合、画像メディアもダークモード用の画像になります。
複数メディアのクリエイティブでレイアウトを確認するには、テストデバイスでクリエイティブをプレビューしてください。

AdropNativeAssetタイプ

interface AdropNativeAsset {
  id: string                         // コンソールで設定したメディアID（例：'m1'、'm2'）
  asset: string                      // 画像または動画ファイルのURL
  creative: string                   // 動画メディアを再生するHTML（トラッキングを含む）
  cover?: string                     // 動画のポスター画像URL。画像の場合はなし
  type?: 'display' | 'video'         // 画像または動画
  isVideo: boolean                   // 動画かどうか
}

メディアの表示

メディア	表示方法	配置
画像	`asset`を`Image`で表示	`AdropNativeAdView`の中
動画	`creative`を`WebView`に読み込む	`AdropNativeAdView`の外（例：すぐ下）

画像: useCustomClickの設定にかかわらず、AdropNativeAdView内のタップは広告クリックになるため、その中に置いた画像のタップも、広告のほかの部分と同じように集計されます。画像のcreative HTMLはクリックをAdropに報告しないため、読み込まないでください。
動画: asset URLではなくcreative HTMLを再生してください。HTMLに動画プレイヤーとトラッキングが含まれているため、動画指標はこのHTMLでのみ計測されます。WebViewはAdropNativeAdViewの外に配置してください。中に置くと、プレイヤーのコントロールのタップを含め、動画のタップが広告クリックとしても集計されることがあります。HTMLは事前に読み込まず、広告が画面に表示される直前に読み込んでください。
ランディングページ: ユーザーが動画をタップすると、HTMLがクリックを報告し、ランディングページを新しいウィンドウまたは同じウィンドウで開くよう要求します。要求されたURLをonOpenWindowとonShouldStartLoadWithRequestで開いてください。

インプレッションとクリック

インプレッション、クリック、動画指標は、SDKとメディアの両方が報告しても、メディア単位ではなく広告ごとに1回だけ集計されます。

イベント	集計方法
インプレッション	`AdropNativeAdView`が50%以上表示された状態が0.5秒続いたとき。動画メディアも、動画の再生が始まると広告のインプレッションを報告します。
`AdropNativeAdView`内のクリック	SDKが集計し、`onAdClicked`が呼び出されます。
動画メディアのタップ	メディアのHTMLが報告します。`onAdClicked`は呼び出されません。
動画の再生（有効視聴数、視聴完了数）	メディアのHTMLが報告します。`onAdVideoStart`と`onAdVideoEnd`は呼び出されません。

動画のどのタップがクリックとして集計されるかは、ユニットの動画コントローラー設定によって異なります。コントローラーがオフの場合は動画のすべてのタップがクリックになり、オンの場合は再生・ミュートのコントロールのタップはクリックになりません。

例

メディア 2（m2）が画像の場合はAdropNativeAdViewの中に、動画の場合はそのすぐ下に表示する例です。m2はユニットのメディアIDに置き換えてください。

import React, { useEffect, useState } from 'react'
import { Image, Linking, StyleSheet, View } from 'react-native'
import { WebView } from 'react-native-webview'
import {
    AdropCallToActionView,
    AdropHeadLineView,
    AdropMediaView,
    AdropNativeAd,
    AdropNativeAdView,
    type AdropNativeAsset,
} from 'adrop-ads-react-native'

// 動画メディアを再生します。AdropNativeAdViewの外に配置します。
const MediaItemVideo: React.FC<{ item: AdropNativeAsset }> = ({ item }) => (
    <WebView
        source={{ html: item.creative }}
        style={styles.media}
        javaScriptEnabled
        allowsInlineMediaPlayback
        mediaPlaybackRequiresUserAction={false}
        scrollEnabled={false}
        // 動画のタップ: HTMLがクリックを報告し、ランディングページを開くよう要求
        onOpenWindow={(event) => Linking.openURL(event.nativeEvent.targetUrl)}
        onShouldStartLoadWithRequest={(request) => {
            // HTML自体（about:blank）とその中のフレームはそのまま読み込む。
            // isTopFrameはiOSでのみ渡される
            if (request.url === 'about:blank' || request.isTopFrame === false) {
                return true
            }
            Linking.openURL(request.url)
            return false
        }}
    />
)

const MultiMediaNativeAd: React.FC = () => {
    const [nativeAd, setNativeAd] = useState<AdropNativeAd>()
    const [isLoaded, setIsLoaded] = useState(false)

    useEffect(() => {
        const ad = new AdropNativeAd('YOUR_UNIT_ID')
        ad.listener = {
            onAdReceived: () => setIsLoaded(true),
            onAdFailedToReceive: (_, errorCode) => console.log(errorCode),
        }
        ad.load()
        setNativeAd(ad)
        return () => ad.destroy()
    }, [])

    if (!isLoaded || !nativeAd) return null

    // メディア 2（m2）。メディアが1つのクリエイティブとバックフィル広告にはない
    const media2 = nativeAd.properties.extraAssets?.m2

    return (
        <View>
            <AdropNativeAdView nativeAd={nativeAd} style={styles.adView}>
                <AdropHeadLineView style={styles.headline} />
                {/* メディア 1（m1）は通常のネイティブ広告と同じ */}
                {!nativeAd.isVideoAd || nativeAd.isBackfilled ? (
                    <AdropMediaView style={styles.media} />
                ) : (
                    <WebView
                        source={{ html: nativeAd.properties.creative ?? '' }}
                        style={styles.media}
                        javaScriptEnabled
                        mediaPlaybackRequiresUserAction={false}
                        allowsInlineMediaPlayback
                        scrollEnabled={false}
                    />
                )}
                {/* メディア 2（m2）が画像の場合: AdropNativeAdViewの中 */}
                {media2 && !media2.isVideo && (
                    <Image source={{ uri: media2.asset }} style={styles.thumbnail} />
                )}
                <AdropCallToActionView style={styles.cta} />
            </AdropNativeAdView>

            {/* メディア 2（m2）が動画の場合: AdropNativeAdViewの外 */}
            {media2?.isVideo && <MediaItemVideo item={media2} />}
        </View>
    )
}

const styles = StyleSheet.create({
    adView: { padding: 16 },
    headline: { fontSize: 18, fontWeight: 'bold' },
    media: { width: '100%', height: 200 },
    thumbnail: { width: 120, height: 120, marginTop: 12 },
    cta: { marginTop: 12 },
})

export default MultiMediaNativeAd

AdChoicesの位置調整

バックフィルネイティブ広告で、AdChoicesマークを表示するコーナーを指定できます。AdropNativeAdコンストラクタの3番目の引数としてpreferredAdChoicesPositionを渡してください。

import { AdropNativeAd, AdropAdChoicesPosition } from 'adrop-ads-react-native'

const nativeAd = new AdropNativeAd(
  'YOUR_UNIT_ID',
  false, // useCustomClick
  AdropAdChoicesPosition.bottomRight
)

nativeAd.listener = {
  onAdReceived: (ad) => console.log('受信完了'),
  onAdFailedToReceive: (ad, errorCode) => console.log('失敗', errorCode),
}

nativeAd.load()

値	説明
`AdropAdChoicesPosition.topLeft`	左上
`AdropAdChoicesPosition.topRight`	右上（デフォルト）
`AdropAdChoicesPosition.bottomLeft`	左下
`AdropAdChoicesPosition.bottomRight`	右下

この設定はバックフィルネットワークに渡される希望位置のヒントで、バックフィルネイティブ広告にのみ適用されます — ダイレクト広告には影響しません。バックフィルネットワークがポリシー上別の位置に表示する場合があります。

バックフィル広告のプリロード (preload)

SDK 1.17.0から、AdropNativeAd.preload()でバックフィルネイティブ広告をプリロードしておくことができます。同じユニットIDと同じAdChoicesの位置でload()したネイティブ広告が、ダイレクト広告なしでバックフィル広告に切り替わると、バックフィル広告を再度リクエストせず、プリロードしておいた広告をすぐに使用します。 load()はpreloadに関係なく、まずダイレクト広告をリクエストします。ダイレクト広告を受信した場合、プリロードしておいた広告はそのまま残ります。preloadを呼び出さなければ、動作はこれまでと同じです。

動作条件

adrop-ads-react-native 1.17.0以降と、ネイティブプラットフォームのバックフィル依存関係1.17.0以降が必要です。はじめにを参照してください。
現在表示するダイレクト広告がないとサーバーからアプリに通知されている状態でのみ、バックフィル広告を受信します。それ以外の場合は、バックフィル広告をリクエストせずにAdropErrorCode.preloadSkippedで終了します。ダイレクト広告のキャンペーンがあるアプリでは正常な結果です。
アプリのインストール直後、アプリキーを変更した直後、setUIDで別のユーザーに切り替えた直後は、サーバーの応答を受信するまでAdropErrorCode.preloadSkippedで終了します。
テストユニットIDでは常にAdropErrorCode.preloadSkippedで終了します。

使用方法

ネイティブ広告がある画面を表示する直前に呼び出してください。プリロードした広告は使用されないと30分後に破棄されるため、すぐに表示する広告に対してのみ呼び出してください。結果を待ってからload()する必要はありません。まだ受信中の場合は、load()がその結果を待って使用します。 AdropNativeAd.preload()はプリロードに成功するとresolveされ、それ以外の結果（AdropErrorCode.preloadSkippedを含む）は{ code, message }でrejectされます。処理しないと、正常な結果であるSKIPPEDでも未処理のPromise rejectionの警告が発生するため、try/catchで囲むか、.catchを付けてください。

import {
  AdropAdChoicesPosition,
  AdropErrorCode,
  AdropNativeAd,
} from 'adrop-ads-react-native'

// ネイティブ広告がある画面を表示する直前に呼び出します。
const preloadFeedNativeAd = async () => {
  try {
    await AdropNativeAd.preload({
      unitId: 'YOUR_UNIT_ID',
      preferredAdChoicesPosition: AdropAdChoicesPosition.topRight, // デフォルト値
    })
    console.log('プリロード完了')
  } catch (error: any) {
    if (error?.code === AdropErrorCode.preloadSkipped) {
      // 正常な結果です。次の画面を表示する直前に再度呼び出してください。
      return
    }
    // ここでpreloadをすぐに再度呼び出さないでください。
    console.log('プリロードされませんでした:', error?.code)
  }
}

結果が不要な場合は、次のように呼び出せます。

AdropNativeAd.preload({ unitId: 'YOUR_UNIT_ID' }).catch(() => {})

プリロードしておいた広告を使用するには、load()するAdropNativeAdを、preloadに渡した値と同じpreferredAdChoicesPositionで作成してください。どちらもデフォルト値はAdropAdChoicesPosition.topRightです。

const nativeAd = new AdropNativeAd(
  'YOUR_UNIT_ID',
  false, // useCustomClick
  AdropAdChoicesPosition.topRight // preloadに渡した値
)

nativeAd.load()

プリロードした広告が使われる条件

同じユニットIDと同じAdChoicesの位置: AdChoicesの位置はバックフィル広告を受信するときに決まるため、load()する広告のpreferredAdChoicesPositionが、preloadに渡した値と同じである必要があります。異なる場合、プリロードした広告はそのまま残り、load()は通常どおりバックフィル広告をリクエストします。
一度だけ使用: プリロードした広告は、1回のload()で使用されるとなくなります。再度プリロードするには、preloadをもう一度呼び出してください。
有効期間と個数: 30分以内に使用されなかった広告は破棄されます。同じユニット・AdChoicesの位置には1個のみ保持し、ネイティブ広告は異なる組み合わせを最大5個まで保持します。5個を超えると、最も早く受信した広告から破棄します。
再度呼び出す場合: 同じユニット・AdChoicesの位置で再度呼び出しても、新たにリクエストしません。受信済みの広告がある場合は新しいリクエストなしでresolveされ、受信中の場合はそのロードの結果（成功または失敗）がそのまま伝えられます。広告を更新する用途には使用できません。ただし、その間にユーザーの同意状態が変わった場合は、既存の広告を破棄して新たに受信します。
同意状態の変更: プリロードした後にユーザーの同意状態が変わると、その広告はload()に使用されません。
resolveの意味: preload()がresolveされたということは、プリロードが終わったという意味です。その結果を待っていたload()がすでに使用している場合もあります。

失敗コード

エラーコード	値	説明
`AdropErrorCode.preloadSkipped`	`ERROR_CODE_AD_PRELOAD_SKIPPED`	ダイレクト広告が表示される可能性があるか、まだ確認されていないため、バックフィル広告をリクエストしませんでした。正常な結果のため、次の画面を表示する直前に再度呼び出してください。
`AdropErrorCode.adNoFill`	`ERROR_CODE_AD_NO_FILL`	1.17.0以降のバックフィル依存関係がないか、ユニットにバックフィルが設定されていないか、SDKがその設定をまだ受信していません。しばらくしてから再度呼び出してください。バックフィル依存関係がない場合は、引き続きこのコードで終了します。iOSでは、デバイスが対象国に属していない場合もこのコードで終了します。
`AdropErrorCode.backfillNoFill`	`ERROR_CODE_AD_BACKFILL_NO_FILL`	バックフィル広告がありません。
`AdropErrorCode.internal`	`ERROR_CODE_INTERNAL`	リクエストが中断されたか（例：Androidで受信中にActivityが終了した）、内部エラーが発生しました。後で再度呼び出してください。
`AdropErrorCode.initialize`	`ERROR_CODE_INITIALIZE`	SDKが初期化されていません。Androidでは、デバイスが対象国に属していない場合もこのコードで終了します。
`AdropErrorCode.invalidUnit`	`ERROR_CODE_INVALID_UNIT`	ユニットIDが空です。

catch内でpreloadをすぐに再度呼び出さないでください。バックフィル依存関係がない場合のように結果が変わらないと、呼び出しが際限なく繰り返されます。次の画面を表示する前など、後で再度呼び出してください。

次のステップ

バナー広告

バナー広告を実装する

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

インタースティシャル広告を実装する

ポップアップ広告

ポップアップ広告を実装する

リワード広告

リワード広告を実装する

​概要

​主な機能

​AdropNativeAdクラス

​コンストラクタ

​メソッド

​プロパティ

​AdropNativeAdViewコンポーネント

​Props

​使用例

​ネイティブ広告要素ビュー

​AdropProfileLogoView

​AdropProfileNameView

​AdropHeadLineView

​AdropBodyView

​AdropMediaView

​AdropCallToActionView

​AdropAdvertiserView

​AdropIconView

​AdropNativeAdListenerインターフェース

​AdropNativePropertiesタイプ

​AdropNativeProfileタイプ

​実装例

​テストユニットID

​エラー処理

​主なエラーコード

​エラー処理の例

​ベストプラクティス

​1. リソース解放

​2. ビデオ広告およびバックフィル広告処理

​3. URL処理

​4. 広告要素の選択的使用

​動画トラッキングとVTR

​推奨パターン

​複数メディアのクリエイティブ

​AdropNativeAssetタイプ

​メディアの表示

​インプレッションとクリック

​例

​AdChoicesの位置調整

​バックフィル広告のプリロード (preload)

​動作条件

​使用方法

​プリロードした広告が使われる条件

​失敗コード

​次のステップ

バナー広告

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

ポップアップ広告

リワード広告

概要

主な機能

AdropNativeAdクラス

コンストラクタ

メソッド

プロパティ

AdropNativeAdViewコンポーネント

Props

使用例

ネイティブ広告要素ビュー

AdropProfileLogoView

AdropProfileNameView

AdropHeadLineView

AdropBodyView

AdropMediaView

AdropCallToActionView

AdropAdvertiserView

AdropIconView

AdropNativeAdListenerインターフェース

AdropNativePropertiesタイプ

AdropNativeProfileタイプ

実装例

テストユニットID

エラー処理

主なエラーコード

エラー処理の例

ベストプラクティス

1. リソース解放

2. ビデオ広告およびバックフィル広告処理

3. URL処理

4. 広告要素の選択的使用

動画トラッキングとVTR

推奨パターン

複数メディアのクリエイティブ

AdropNativeAssetタイプ

メディアの表示

インプレッションとクリック

例

AdChoicesの位置調整

バックフィル広告のプリロード (preload)

動作条件

使用方法

プリロードした広告が使われる条件

失敗コード

次のステップ