バナー広告 - Ad Control Help Center

概要

バナー広告は画面の一部の領域に表示される長方形の広告です。AdropBannerコンポーネントを使用して簡単に実装できます。

主な特徴

画面上部、下部、または中央に固定配置可能
画像および動画広告対応
自動または手動広告ロード対応
コールバックによる広告イベント処理
広告メタデータ提供（クリエイティブID、キャンペーンIDなど）

開発環境ではテストユニットIDを使用してください：PUBLIC_TEST_UNIT_ID_320_100またはPUBLIC_TEST_UNIT_ID_320_50

AdropBannerコンポーネント

Props

string

必須

広告コントロールコンソールで生成したユニットID

ViewStyle

必須

バナーのスタイル（widthとheightが必須）

string

コンテキストターゲティングに使用するコンテキストID（1.17.0+）。マウント時の値のみ適用されます。値を変更するには、keyを変更してバナーを再マウントしてください。

boolean

デフォルト:"true"

コンポーネントがマウントされたときに自動的に広告をロードするかどうか

boolean

デフォルト:"false"

カスタムクリック処理を使用するかどうか。trueに設定すると、広告クリック時に自動的にブラウザが開きません。

{ width: number; height: number } | null

サーバーにリクエストする明示的な広告サイズ。style.widthが数値の場合、adSizeはスタイルのサイズから自動的に導出されます（{ width: style.width, height: style.height }）。style.widthが文字列（例：'100%'）の場合、adSizeはデフォルトでnullとなり、SDKがレスポンシブサイジングを使用します。通常、このpropを手動で設定する必要はありません。

(unitId: string, metadata?: AdropBannerMetadata) => void

広告受信が成功したときに呼び出されるコールバック

(unitId: string, metadata?: AdropBannerMetadata) => void

ユーザーが広告をクリックしたときに呼び出されるコールバック

(unitId: string, metadata?: AdropBannerMetadata) => void

広告が画面に表示されたときに呼び出されるコールバック

(unitId: string, errorCode?: string) => void

広告受信が失敗したときに呼び出されるコールバック

(unitId: string) => void

動画広告の再生が開始されたときに呼び出されるコールバック

(unitId: string) => void

動画広告の再生が終了したときに呼び出されるコールバック

基本的な使い方

自動ロード（推奨）

コンポーネントがマウントされたときに自動的に広告をロードします。

import React from 'react'
import { View, StyleSheet, Dimensions } from 'react-native'
import { AdropBanner } from 'adrop-ads-react-native'

const App = () => {
  const screenWidth = Dimensions.get('window').width

  return (
    <View style={styles.container}>
      {/* メインコンテンツ */}
      <View style={styles.content}>
        {/* ... */}
      </View>

      {/* バナー広告 */}
      <AdropBanner
        unitId="YOUR_UNIT_ID"
        style={{ width: screenWidth, height: 80 }}
        onAdReceived={(unitId, metadata) => {
          console.log('バナー広告受信成功', unitId, metadata)
        }}
        onAdFailedToReceive={(unitId, errorCode) => {
          console.log('バナー広告受信失敗', unitId, errorCode)
        }}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
  },
})

export default App

Refを使用した手動ロード

refを使用して任意のタイミングで広告をロードできます。

import React, { useRef } from 'react'
import { View, Button, StyleSheet, Dimensions } from 'react-native'
import { AdropBanner } from 'adrop-ads-react-native'

interface AdropBannerRef {
  load: () => void
}

const App = () => {
  const bannerRef = useRef<AdropBannerRef>(null)
  const screenWidth = Dimensions.get('window').width

  const loadBanner = () => {
    bannerRef.current?.load()
  }

  return (
    <View style={styles.container}>
      <Button title="バナー広告ロード" onPress={loadBanner} />

      <AdropBanner
        ref={bannerRef}
        unitId="YOUR_UNIT_ID"
        style={{ width: screenWidth, height: 80 }}
        autoLoad={false}
        onAdReceived={(unitId, metadata) => {
          console.log('バナー広告受信成功', unitId, metadata)
        }}
        onAdFailedToReceive={(unitId, errorCode) => {
          console.log('バナー広告受信失敗', unitId, errorCode)
        }}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
})

export default App

コールバック関数

onAdReceived

広告受信が成功したときに呼び出されます。

const handleAdReceived = (unitId: string, metadata?: AdropBannerMetadata) => {
  console.log('バナー広告受信成功')
  console.log('ユニットID:', unitId)
  console.log('クリエイティブID:', metadata?.creativeId)
  console.log('キャンペーンID:', metadata?.campaignId)
  console.log('トランザクションID:', metadata?.txId)
  console.log('遷移先URL:', metadata?.destinationURL)

  // ローディングインジケーターを非表示にするなどの処理
}

onAdClicked

ユーザーが広告をクリックしたときに呼び出されます。

const handleAdClicked = (unitId: string, metadata?: AdropBannerMetadata) => {
  console.log('バナー広告クリック')
  console.log('ユニットID:', unitId)
  console.log('遷移先URL:', metadata?.destinationURL)

  // クリック分析ロギングなどの処理
}

onAdImpression

広告が画面に表示されたときに呼び出されます。

const handleAdImpression = (unitId: string, metadata?: AdropBannerMetadata) => {
  console.log('バナー広告表示')
  console.log('ユニットID:', unitId)
  console.log('クリエイティブID:', metadata?.creativeId)

  // 表示分析ロギングなどの処理
}

onAdFailedToReceive

広告受信が失敗したときに呼び出されます。

const handleAdFailedToReceive = (unitId: string, errorCode?: string) => {
  console.log('バナー広告受信失敗')
  console.log('ユニットID:', unitId)
  console.log('エラーコード:', errorCode)

  // エラー処理と代替コンテンツ表示
  if (errorCode === AdropErrorCode.network) {
    console.log('ネットワーク接続を確認してください')
  } else if (errorCode === AdropErrorCode.adNoFill) {
    console.log('表示可能な広告がありません')
  }
}

onAdVideoStart

動画広告の再生が開始されたときに呼び出されます。

const handleAdVideoStart = (unitId: string) => {
  console.log('動画広告の再生開始')
  console.log('ユニットID:', unitId)
}

onAdVideoEnd

動画広告の再生が終了したときに呼び出されます。

const handleAdVideoEnd = (unitId: string) => {
  console.log('動画広告の再生終了')
  console.log('ユニットID:', unitId)
}

AdropBannerMetadata

広告メタデータタイプです。

type AdropBannerMetadata = {
  creativeId: string      // クリエイティブID
  txId: string           // トランザクションID
  campaignId: string     // キャンペーンID
  destinationURL: string // 遷移先URL
  browserTarget: BrowserTarget // ブラウザターゲット (EXTERNAL = 0, INTERNAL = 1)
}

この情報は広告分析、追跡、レポーティングに便利に使用できます。

広告サイズ

バナー広告はユニットに設定したサイズに合わせてスタイルのサイズを指定する必要があります。

一般的なバナーサイズ

サイズ	用途
320 x 50	小型バナー
320 x 100	中型バナー
16:9比率	動画バナー

固定サイズ使用

<AdropBanner
  unitId="YOUR_UNIT_ID"
  style={{ width: 320, height: 100 }}
/>

画面幅に合わせる

import { Dimensions } from 'react-native'

const screenWidth = Dimensions.get('window').width

<AdropBanner
  unitId="YOUR_UNIT_ID"
  style={{ width: screenWidth, height: 80 }}
/>

レスポンシブサイズ使用

<AdropBanner
  unitId="YOUR_UNIT_ID"
  style={{ width: '100%', height: 80 }}
/>

widthを文字列（'100%'など）で設定するとレスポンシブに動作しますが、数値で設定するとその値が広告サーバーに渡され、適切なサイズの広告をリクエストします。

テストユニットID

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

広告タイプ	テストユニットID	サイズ
バナー (320x50)	`PUBLIC_TEST_UNIT_ID_320_50`	320 x 50
バナー (320x100)	`PUBLIC_TEST_UNIT_ID_320_100`	320 x 100

使用例

<AdropBanner
  unitId="PUBLIC_TEST_UNIT_ID_320_100"
  style={{ width: 320, height: 100 }}
/>

エラー処理

広告ロード失敗時に適切なエラー処理を実装してください。

エラー状態管理

import React, { useState } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import { AdropBanner } from 'adrop-ads-react-native'

const App = () => {
  const [error, setError] = useState<string | null>(null)

  const handleAdReceived = () => {
    setError(null)
  }

  const handleAdFailedToReceive = (unitId: string, errorCode?: string) => {
    setError(errorCode || '不明なエラー')
  }

  return (
    <View style={styles.container}>
      <AdropBanner
        unitId="YOUR_UNIT_ID"
        style={{ width: 320, height: 100 }}
        onAdReceived={handleAdReceived}
        onAdFailedToReceive={handleAdFailedToReceive}
      />

      {error && (
        <Text style={styles.errorText}>
          広告ロード失敗: {error}
        </Text>
      )}
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  errorText: {
    marginTop: 8,
    color: 'red',
  },
})

export default App

ベストプラクティス

1. 画面の可視性

バナーが画面に表示されているときに広告をロードしてください。

import React, { useEffect, useRef } from 'react'
import { AppState } from 'react-native'

const App = () => {
  const bannerRef = useRef<{ load: () => void }>(null)
  const appState = useRef(AppState.currentState)

  useEffect(() => {
    const subscription = AppState.addEventListener('change', nextAppState => {
      if (
        appState.current.match(/inactive|background/) &&
        nextAppState === 'active'
      ) {
        // アプリがフォアグラウンドに戻ったときに広告をリフレッシュ
        bannerRef.current?.load()
      }
      appState.current = nextAppState
    })

    return () => {
      subscription.remove()
    }
  }, [])

  return (
    <AdropBanner
      ref={bannerRef}
      unitId="YOUR_UNIT_ID"
      style={{ width: 320, height: 100 }}
    />
  )
}

2. ローディングインジケーター

広告ロード中のユーザー体験を改善してください。

import React, { useState } from 'react'
import { View, ActivityIndicator, StyleSheet } from 'react-native'
import { AdropBanner } from 'adrop-ads-react-native'

const App = () => {
  const [loading, setLoading] = useState(true)

  return (
    <View style={styles.container}>
      {loading && (
        <ActivityIndicator
          style={styles.loader}
          size="small"
          color="#999"
        />
      )}

      <AdropBanner
        unitId="YOUR_UNIT_ID"
        style={{ width: 320, height: 100 }}
        onAdReceived={() => setLoading(false)}
        onAdFailedToReceive={() => setLoading(false)}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    position: 'relative',
  },
  loader: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: [{ translateX: -12 }, { translateY: -12 }],
  },
})

3. 複数バナー管理

複数のバナーを使用するときはそれぞれの状態を管理してください。

import React, { useState } from 'react'
import { View, Text } from 'react-native'
import { AdropBanner } from 'adrop-ads-react-native'

const App = () => {
  const [banner1Loaded, setBanner1Loaded] = useState(false)
  const [banner2Loaded, setBanner2Loaded] = useState(false)

  return (
    <View>
      <Text>バナー1: {banner1Loaded ? 'ロード済み' : 'ロード中'}</Text>
      <AdropBanner
        unitId="UNIT_ID_1"
        style={{ width: 320, height: 100 }}
        onAdReceived={() => setBanner1Loaded(true)}
      />

      <Text>バナー2: {banner2Loaded ? 'ロード済み' : 'ロード中'}</Text>
      <AdropBanner
        unitId="UNIT_ID_2"
        style={{ width: 320, height: 100 }}
        onAdReceived={() => setBanner2Loaded(true)}
      />
    </View>
  )
}

4. カスタムクリック処理

広告クリックを直接処理するにはuseCustomClickを使用してください。

import { Linking } from 'react-native'
import { AdropBanner, type AdropBannerMetadata } from 'adrop-ads-react-native'

const App = () => {
  const handleAdClicked = (unitId: string, metadata?: AdropBannerMetadata) => {
    console.log('広告クリック:', unitId)

    // カスタム分析ロギング
    analytics.logEvent('ad_clicked', {
      unitId,
      campaignId: metadata?.campaignId,
    })

    // 手動でブラウザを開く
    if (metadata?.destinationURL) {
      Linking.openURL(metadata.destinationURL)
    }
  }

  return (
    <AdropBanner
      unitId="YOUR_UNIT_ID"
      style={{ width: 320, height: 100 }}
      useCustomClick={true}
      onAdClicked={handleAdClicked}
    />
  )
}

完全な例

TypeScriptの例

import React, { useRef, useState } from 'react'
import {
  View,
  Text,
  Button,
  StyleSheet,
  Dimensions,
  ActivityIndicator,
} from 'react-native'
import { AdropBanner, type AdropBannerMetadata } from 'adrop-ads-react-native'

interface AdropBannerRef {
  load: () => void
}

const BannerExample = () => {
  const bannerRef = useRef<AdropBannerRef>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [metadata, setMetadata] = useState<AdropBannerMetadata | null>(null)

  const screenWidth = Dimensions.get('window').width

  const loadBanner = () => {
    setLoading(true)
    setError(null)
    bannerRef.current?.load()
  }

  const handleAdReceived = (unitId: string, metadata?: AdropBannerMetadata) => {
    console.log('バナー広告受信成功')
    console.log('ユニットID:', unitId)
    console.log('メタデータ:', metadata)

    setLoading(false)
    setError(null)
    if (metadata) {
      setMetadata(metadata)
    }
  }

  const handleAdClicked = (unitId: string, metadata?: AdropBannerMetadata) => {
    console.log('バナー広告クリック')
    console.log('ユニットID:', unitId)
    console.log('遷移先URL:', metadata?.destinationURL)
  }

  const handleAdImpression = (unitId: string, metadata?: AdropBannerMetadata) => {
    console.log('バナー広告表示')
    console.log('ユニットID:', unitId)
    console.log('クリエイティブID:', metadata?.creativeId)
  }

  const handleAdFailedToReceive = (unitId: string, errorCode?: string) => {
    console.log('バナー広告受信失敗')
    console.log('ユニットID:', unitId)
    console.log('エラーコード:', errorCode)

    setLoading(false)
    setError(errorCode || '不明なエラー')
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>バナー広告の例</Text>

      <Button title="バナー広告ロード" onPress={loadBanner} />

      <View style={styles.bannerContainer}>
        {loading && (
          <ActivityIndicator
            style={styles.loader}
            size="small"
            color="#666"
          />
        )}

        <AdropBanner
          ref={bannerRef}
          unitId="YOUR_UNIT_ID"
          style={{ width: screenWidth, height: 80 }}
          autoLoad={false}
          onAdReceived={handleAdReceived}
          onAdClicked={handleAdClicked}
          onAdImpression={handleAdImpression}
          onAdFailedToReceive={handleAdFailedToReceive}
        />

        {error && (
          <View style={styles.errorContainer}>
            <Text style={styles.errorText}>エラー: {error}</Text>
          </View>
        )}

        {metadata && (
          <View style={styles.metadataContainer}>
            <Text style={styles.metadataTitle}>広告メタデータ:</Text>
            <Text style={styles.metadataText}>
              クリエイティブID: {metadata.creativeId}
            </Text>
            <Text style={styles.metadataText}>
              キャンペーンID: {metadata.campaignId}
            </Text>
            <Text style={styles.metadataText}>
              トランザクションID: {metadata.txId}
            </Text>
          </View>
        )}
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    marginVertical: 50,
    paddingHorizontal: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  bannerContainer: {
    marginTop: 20,
    position: 'relative',
    width: '100%',
  },
  loader: {
    position: 'absolute',
    top: 40,
    left: '50%',
    transform: [{ translateX: -12 }],
    zIndex: 1,
  },
  errorContainer: {
    marginTop: 8,
    padding: 8,
    backgroundColor: '#ffebee',
    borderRadius: 4,
  },
  errorText: {
    color: '#c62828',
    textAlign: 'center',
  },
  metadataContainer: {
    marginTop: 12,
    padding: 12,
    backgroundColor: '#f5f5f5',
    borderRadius: 4,
  },
  metadataTitle: {
    fontSize: 14,
    fontWeight: 'bold',
    marginBottom: 4,
  },
  metadataText: {
    fontSize: 12,
    color: '#666',
    marginTop: 2,
  },
})

export default BannerExample

JavaScriptの例

import React, { useRef, useState } from 'react'
import {
  View,
  Text,
  Button,
  StyleSheet,
  Dimensions,
  ActivityIndicator,
} from 'react-native'
import { AdropBanner } from 'adrop-ads-react-native'

const BannerExample = () => {
  const bannerRef = useRef(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)

  const screenWidth = Dimensions.get('window').width

  const loadBanner = () => {
    setLoading(true)
    setError(null)
    bannerRef.current?.load()
  }

  const handleAdReceived = (unitId, metadata) => {
    console.log('バナー広告受信成功', unitId, metadata)
    setLoading(false)
    setError(null)
  }

  const handleAdFailedToReceive = (unitId, errorCode) => {
    console.log('バナー広告受信失敗', unitId, errorCode)
    setLoading(false)
    setError(errorCode || '不明なエラー')
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>バナー広告の例</Text>

      <Button title="バナー広告ロード" onPress={loadBanner} />

      <View style={styles.bannerContainer}>
        {loading && <ActivityIndicator style={styles.loader} />}

        <AdropBanner
          ref={bannerRef}
          unitId="YOUR_UNIT_ID"
          style={{ width: screenWidth, height: 80 }}
          autoLoad={false}
          onAdReceived={handleAdReceived}
          onAdFailedToReceive={handleAdFailedToReceive}
        />

        {error && (
          <Text style={styles.errorText}>エラー: {error}</Text>
        )}
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    marginVertical: 50,
    paddingHorizontal: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  bannerContainer: {
    marginTop: 20,
    width: '100%',
  },
  loader: {
    marginVertical: 20,
  },
  errorText: {
    marginTop: 8,
    color: 'red',
    textAlign: 'center',
  },
})

export default BannerExample

バックフィル広告

バックフィル広告を使用するには、ネイティブプラットフォーム(Android/iOS)にバックフィル依存関係が追加されている必要があります。

バックフィル広告が有効な場合、直接広告が利用できないときにSDKが自動的にバックフィル広告にフォールバックします。onAdFailedToReceiveコールバックでバックフィル関連のエラーコードを処理できます。

<AdropBanner
  unitId="YOUR_UNIT_ID"
  onAdReceived={(unitId, metadata) => {
    console.log('広告ロード完了:', metadata?.creativeId)
  }}
  onAdFailedToReceive={(unitId, errorCode) => {
    switch (errorCode) {
      case AdropErrorCode.adNoFill:
        console.log('直接広告なし、バックフィル広告をリクエスト中...')
        break
      case AdropErrorCode.backfillNoFill:
        console.log('バックフィル広告もありません')
        break
      default:
        console.log('広告ロード失敗:', errorCode)
    }
  }}
/>

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

SDK 1.17.0から、AdropBanner.preload()でバックフィルバナー広告をプリロードしておくことができます。同じユニットIDと同じサイズでロードした<AdropBanner>が、ダイレクト広告なしでバックフィル広告に切り替わると、バックフィル広告を再度リクエストせず、プリロードしておいた広告をすぐに表示します。バナーはpreloadに関係なく、まずダイレクト広告をリクエストします。ダイレクト広告が表示された場合、プリロードしておいた広告はそのまま残ります。preloadを呼び出さなければ、動作はこれまでと同じです。

動作条件

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

使用方法

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

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

// バナーがある画面を表示する直前に呼び出します。
const preloadFeedBanner = async () => {
  try {
    await AdropBanner.preload({
      unitId: 'YOUR_UNIT_ID',
      adSize: { width: 320, height: 50 }, // 省略すると320x50
    })
    console.log('プリロード完了')
  } catch (error: any) {
    if (error?.code === AdropErrorCode.preloadSkipped) {
      // 正常な結果です。次の画面を表示する直前に再度呼び出してください。
      return
    }
    // ここでpreloadをすぐに再度呼び出さないでください。
    console.log('プリロードされませんでした:', error?.code)
  }
}

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

AdropBanner.preload({ unitId: 'YOUR_UNIT_ID', adSize: { width: 320, height: 50 } }).catch(() => {})

プリロードしておいた広告を使用するには、<AdropBanner>のstyleに、preloadのadSizeと同じwidth・heightを数値で指定してください。

<AdropBanner
  unitId="YOUR_UNIT_ID"
  style={{ width: 320, height: 50 }} // preloadに渡したサイズ
/>

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

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

失敗コード

エラーコード	値	説明
`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をすぐに再度呼び出さないでください。バックフィル依存関係がない場合のように結果が変わらないと、呼び出しが際限なく繰り返されます。次の画面を表示する前など、後で再度呼び出してください。

次のステップ

ネイティブ広告

UIに合わせてカスタマイズ可能なネイティブ広告を実装する

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

画面全体を覆うインタースティシャル広告を実装する

ポップアップ広告

小さなポップアップ形式で表示される広告を実装する

リファレンス

タイプ、メソッド、エラーコードを参照する

​概要

​主な特徴

​AdropBannerコンポーネント

​Props

​基本的な使い方

​自動ロード（推奨）

​Refを使用した手動ロード

​コールバック関数

​onAdReceived

​onAdClicked

​onAdImpression

​onAdFailedToReceive

​onAdVideoStart

​onAdVideoEnd

​AdropBannerMetadata

​広告サイズ

​一般的なバナーサイズ

​固定サイズ使用

​画面幅に合わせる

​レスポンシブサイズ使用

​テストユニットID

​使用例

​エラー処理

​エラー状態管理

​ベストプラクティス

​1. 画面の可視性

​2. ローディングインジケーター

​3. 複数バナー管理

​4. カスタムクリック処理

​完全な例

​TypeScriptの例

​JavaScriptの例

​バックフィル広告

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

​動作条件

​使用方法

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

​失敗コード

​次のステップ

ネイティブ広告

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

ポップアップ広告

リファレンス

概要

主な特徴

AdropBannerコンポーネント

Props

基本的な使い方

自動ロード（推奨）

Refを使用した手動ロード

コールバック関数

onAdReceived

onAdClicked

onAdImpression

onAdFailedToReceive

onAdVideoStart

onAdVideoEnd

AdropBannerMetadata

広告サイズ

一般的なバナーサイズ

固定サイズ使用

画面幅に合わせる

レスポンシブサイズ使用

テストユニットID

使用例

エラー処理

エラー状態管理

ベストプラクティス

1. 画面の可視性

2. ローディングインジケーター

3. 複数バナー管理

4. カスタムクリック処理

完全な例

TypeScriptの例

JavaScriptの例

バックフィル広告

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

動作条件

使用方法

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

失敗コード

次のステップ