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

​
概要

インタースティシャル広告（Interstitial Ad）はアプリの画面全体を覆う形式で表示される広告です。ゲームのレベル切り替え、コンテンツページ切り替えなど、アプリの自然な遷移タイミングで表示するのに適しています。

​
特徴

  • 全画面を覆う没入型広告
  • ユーザーが明示的に閉じるまで維持
  • 画像および動画広告対応
  • 高い視覚的注目度
開発環境ではテストユニットIDを使用してください：PUBLIC_TEST_UNIT_ID_INTERSTITIAL

​
実装方式

Adrop React Native SDKはインタースティシャル広告を実装する2つの方式を提供します：
  1. クラス方式 - AdropInterstitialAdクラスを直接使用
  2. Hook方式 - useAdropInterstitialAd Hookを使用（推奨）

​
AdropInterstitialAdクラス

​
コンストラクタ

AdropInterstitialAdインスタンスを生成します。 
import { AdropInterstitialAd } from 'adrop-ads-react-native'

const interstitialAd = new AdropInterstitialAd(unitId)
​
unitId
string
required
広告ユニットID（コンソールで発行）

​
プロパティ

​
isLoaded
boolean
広告がロードされているかどうかを返します。
if (interstitialAd.isLoaded) {
  // 広告表示可能
}
​
unitId
string
広告ユニットIDを返します。
const unitId = interstitialAd.unitId
​
creativeId
string
現在ロードされた広告のクリエイティブIDを返します。
const creativeId = interstitialAd.creativeId
​
txId
string
現在ロードされた広告のトランザクションIDを返します。
const txId = interstitialAd.txId
​
campaignId
string
現在ロードされた広告のキャンペーンIDを返します。
const campaignId = interstitialAd.campaignId
​
listener
AdropListener
広告イベントを受信するリスナーを設定します。
interstitialAd.listener = {
  onAdReceived: (ad) => console.log('広告受信'),
  onAdFailedToReceive: (ad, errorCode) => console.log('受信失敗', errorCode),
  // ... その他のコールバック
}

​
メソッド

​
load()
() => void
広告をリクエストしてロードします。
interstitialAd.load()
​
show()
() => void
ロードされた広告を表示します。isLoadedがtrueのときに呼び出す必要があります。
if (interstitialAd.isLoaded) {
  interstitialAd.show()
}
​
destroy()
() => void
広告インスタンスを破棄してリソースを解放します。コンポーネントアンマウント時に必ず呼び出す必要があります。
useEffect(() => {
  return () => {
    interstitialAd?.destroy()
  }
}, [interstitialAd])

​
クラス方式実装例

AdropInterstitialAdクラスを直接使用する方式です。 
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { Button, StyleSheet, Text, View } from 'react-native'
import { AdropInterstitialAd, AdropListener } from 'adrop-ads-react-native'

const InterstitialAdScreen: React.FC = () => {
  const [interstitialAd, setInterstitialAd] = useState<AdropInterstitialAd>()
  const [isLoaded, setIsLoaded] = useState(false)
  const [errorCode, setErrorCode] = useState('')

  // 広告イベントリスナー設定
  const listener: AdropListener = useMemo(() => ({
    onAdReceived: (ad) => {
      console.log('インタースティシャル広告受信完了:', ad.unitId)
      setIsLoaded(true)
      setErrorCode('')
    },
    onAdFailedToReceive: (ad, error) => {
      console.log('インタースティシャル広告受信失敗:', error)
      setErrorCode(error || 'Unknown error')
      setIsLoaded(false)
    },
    onAdClicked: (ad) => {
      console.log('インタースティシャル広告クリック')
    },
    onAdImpression: (ad) => {
      console.log('インタースティシャル広告露出')
    },
    onAdWillPresentFullScreen: (ad) => {
      console.log('インタースティシャル広告表示直前')
      // ゲーム一時停止、音楽停止など
    },
    onAdDidPresentFullScreen: (ad) => {
      console.log('インタースティシャル広告表示完了')
    },
    onAdWillDismissFullScreen: (ad) => {
      console.log('インタースティシャル広告閉じる直前')
    },
    onAdDidDismissFullScreen: (ad) => {
      console.log('インタースティシャル広告閉じる')
      setIsLoaded(false)
      // ゲーム再開、次の広告事前ロードなど
    },
    onAdFailedToShowFullScreen: (ad, error) => {
      console.log('インタースティシャル広告表示失敗:', error)
      setErrorCode(error || 'Unknown error')
      setIsLoaded(false)
    },
  }), [])

  // 広告インスタンス初期化
  useEffect(() => {
    const ad = new AdropInterstitialAd('YOUR_UNIT_ID')
    ad.listener = listener
    setInterstitialAd(ad)

    // コンポーネントアンマウント時に整理
    return () => {
      ad.destroy()
    }
  }, [listener])

  // 広告ロード
  const loadAd = useCallback(() => {
    interstitialAd?.load()
  }, [interstitialAd])

  // 広告表示
  const showAd = useCallback(() => {
    if (interstitialAd?.isLoaded) {
      interstitialAd.show()
    } else {
      console.log('広告がまだロードされていません')
    }
  }, [interstitialAd])

  return (
    <View style={styles.container}>
      <Button
        title="広告ロード"
        onPress={loadAd}
      />
      <Button
        title="広告表示"
        onPress={showAd}
        disabled={!isLoaded}
      />
      {errorCode && (
        <Text style={styles.error}>エラー: {errorCode}</Text>
      )}
    </View>
  )
}

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

export default InterstitialAdScreen

​
useAdropInterstitialAd Hook

React Hookを使用してインタースティシャル広告をより簡単に実装できます。

​
Hook使用法

import { useAdropInterstitialAd } from 'adrop-ads-react-native'

const { load, show, reset, isLoaded, isOpened, isClosed, isClicked, errorCode, isReady } =
  useAdropInterstitialAd(unitId)
​
unitId
string | null
required
広告ユニットID。nullを渡すと広告が解放されます。

​
戻り値

​
load
() => void
広告をロードします。isReadyがtrueのときのみ動作します。
const handleLoad = () => {
  if (isReady) {
    load()
  }
}
​
show
() => void
ロードされた広告を表示します。
const handleShow = () => {
  if (isLoaded) {
    show()
  }
}
​
reset
() => void
広告状態を初期化して新しいインスタンスを生成します。
const handleReset = () => {
  reset()
}
​
isReady
boolean
広告インスタンスが準備されているかどうかです。
​
isLoaded
boolean
広告が正常にロードされたかどうかです。
​
isOpened
boolean
広告が画面に表示されたかどうかです。
​
isClosed
boolean
広告が閉じられたかどうかです。
​
isClicked
boolean
広告がクリックされたかどうかです。
​
errorCode
string | undefined
広告ロードまたは表示中に発生したエラーコードです。

​
Hook方式実装例

useAdropInterstitialAd Hookを使用する方式です（推奨）。 
import React, { useCallback, useMemo } from 'react'
import { Button, StyleSheet, Text, View } from 'react-native'
import { useAdropInterstitialAd } from 'adrop-ads-react-native'

const InterstitialAdScreen: React.FC = () => {
  const unitId = 'YOUR_UNIT_ID'

  const {
    load,
    show,
    reset,
    isLoaded,
    isOpened,
    isClosed,
    isClicked,
    errorCode,
    isReady
  } = useAdropInterstitialAd(unitId)

  // 広告ロード
  const handleLoad = useCallback(() => {
    if (isReady) {
      load()
    }
  }, [isReady, load])

  // 広告表示
  const handleShow = useCallback(() => {
    if (isLoaded) {
      show()
    }
  }, [isLoaded, show])

  // 広告リセット
  const handleReset = useCallback(() => {
    reset()
  }, [reset])

  return (
    <View style={styles.container}>
      <Button
        title="広告ロード"
        onPress={handleLoad}
        disabled={!isReady}
      />

      <Button
        title="広告表示"
        onPress={handleShow}
        disabled={!isLoaded}
      />

      <Button
        title="広告リセット"
        onPress={handleReset}
        disabled={!(isOpened || errorCode)}
      />

      {/* 状態表示 */}
      <View style={styles.statusContainer}>
        <Text>準備完了: {isReady ? 'はい' : 'いいえ'}</Text>
        <Text>ロード済み: {isLoaded ? 'はい' : 'いいえ'}</Text>
        <Text>表示済み: {isOpened ? 'はい' : 'いいえ'}</Text>
        <Text>閉じた: {isClosed ? 'はい' : 'いいえ'}</Text>
        <Text>クリック済み: {isClicked ? 'はい' : 'いいえ'}</Text>
      </View>

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    gap: 16,
  },
  statusContainer: {
    marginTop: 24,
    padding: 16,
    backgroundColor: '#f0f0f0',
    borderRadius: 8,
  },
  error: {
    color: 'red',
    marginTop: 16,
  },
})

export default InterstitialAdScreen

​
テストユニットID

開発およびテスト環境では必ずテストユニットIDを使用してください。 
// テスト用
const TEST_UNIT_ID = 'PUBLIC_TEST_UNIT_ID_INTERSTITIAL'

// 開発/プロダクション環境分離
const unitId = __DEV__
  ? 'PUBLIC_TEST_UNIT_ID_INTERSTITIAL'
  : 'YOUR_PRODUCTION_UNIT_ID'
プロダクションビルドでは必ず実際のユニットIDを使用する必要があります。テストユニットIDで発生した収益は精算されません。

​
次のステップ

リワード広告

リワード広告でユーザーエンゲージメント向上

バナー広告

バナー広告を実装する

ネイティブ広告

ネイティブ広告で自然な広告体験を提供

ポップアップ広告

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