バナー広告 - 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が必須）

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)
    }
  }}
/>

次のステップ

ネイティブ広告

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

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

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

ポップアップ広告

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

リファレンス

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

​概要

​主な特徴

​AdropBannerコンポーネント

​Props

​基本的な使い方

​自動ロード（推奨）

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

​コールバック関数

​onAdReceived

​onAdClicked

​onAdImpression

​onAdFailedToReceive

​onAdVideoStart

​onAdVideoEnd

​AdropBannerMetadata

​広告サイズ

​一般的なバナーサイズ

​固定サイズ使用

​画面幅に合わせる

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

​テストユニットID

​使用例

​エラー処理

​エラー状態管理

​ベストプラクティス

​1. 画面の可視性

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

​3. 複数バナー管理

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

​完全な例

​TypeScriptの例

​JavaScriptの例

​バックフィル広告

​次のステップ

ネイティブ広告

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

ポップアップ広告

リファレンス

概要

主な特徴

AdropBannerコンポーネント

Props

基本的な使い方

自動ロード（推奨）

Refを使用した手動ロード

コールバック関数

onAdReceived

onAdClicked

onAdImpression

onAdFailedToReceive

onAdVideoStart

onAdVideoEnd

AdropBannerMetadata

広告サイズ

一般的なバナーサイズ

固定サイズ使用

画面幅に合わせる

レスポンシブサイズ使用

テストユニットID

使用例

エラー処理

エラー状態管理

ベストプラクティス

1. 画面の可視性

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

3. 複数バナー管理

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

完全な例

TypeScriptの例

JavaScriptの例

バックフィル広告

次のステップ