リワード インタースティシャル広告を設定する

プラットフォームを選択: Android iOS Unity Flutter React Native Android（以前のバージョン）

リワード インタースティシャル広告は、画面やゲームレベルの切り替え時に表示される広告に対して、アプリ内アイテムを提供できるフルスクリーン広告フォーマットです。リワード広告とは異なり、ユーザーは広告を表示するためにオプトインする必要はありません。詳しくは、AdMob のケーススタディとリワード インタースティシャル広告ユニット（ベータ版）の概要をご覧ください。

表示の遅延をなくし、画面遷移時に広告を確実に表示できるように、Google Mobile Ads SDK for React Native では広告のプリロードを使用して、バックグラウンドでの読み込み、キャッシュ、バッファの補充を管理しています。

このガイドでは、React Native アプリで広告のプリロードを使用してリワード インタースティシャル広告を統合する方法について説明します。

前提条件

先に進む前に、次のことを実施してください。

• Google Mobile Ads SDK for React Native を設定します。
• テスト広告を有効にして、次のテスト広告ユニットを使用します。

Android

ca-app-pub-3940256099942544/5354046379

iOS

ca-app-pub-3940256099942544/6978759866

広告のプリロードについて

Google Mobile Ads SDK for React Native の広告のプリロード機能により、広告の読み込みとキャッシュが自動化されます。

広告のプリロードには、次のようなメリットがあります。

• 参照管理: 広告が表示されるまで参照を維持します。
• 自動再読み込み: キャッシュから広告が取得されると、広告が読み込まれます。
• マネージド再試行: 広告の読み込みに失敗した場合に、新しい広告を読み込みます。
• 有効期限の処理: 有効期限が切れる前に広告を更新します。
• キャッシュの最適化: キャッシュの順序を最適化して、優先度の最も高い広告を配信します。

広告を手動で読み込むには、単一のリワード インタースティシャル広告を読み込むをご覧ください。

プリロードを開始する

広告のプリロードを開始するには、RewardedInterstitialAdPreloader.start メソッドを呼び出し、preloadId 値、構成設定、イベント コールバックを渡して、バッファ状態の変化をモニタリングします。

export function startRewardedInterstitialAdPreloader(
  adUnitId: string,
  preloadId: string,
  customPreloadCallback?: PreloadCallback,
): boolean {
  const started = RewardedInterstitialAdPreloader.start(
    preloadId,
    {
      request: {adUnitId},
      bufferSize: 2,
    },
    {
      // Called when an ad is preloaded into the buffer.
      onAdPreloaded: (event) => {
        console.log(
          `Rewarded interstitial ad preloaded for ${event.preloadId}`,
        );
        customPreloadCallback?.onAdPreloaded?.(event);
      },
      // Called when an ad fails to preload.
      onAdFailedToPreload: (error: LoadAdError) => {
        console.error(
          'Failed to preload rewarded interstitial ad:',
          error.message,
        );
        customPreloadCallback?.onAdFailedToPreload?.(error);
      },
      // Called when all preloaded ads in the buffer have been shown.
      onAdsExhausted: () => {
        console.log('Rewarded interstitial ad buffer exhausted.');
        customPreloadCallback?.onAdsExhausted?.();
      },
    },
  );
  return started;
}

preloadId は、広告のプリロード構成を一意に識別する文字列です。アプリで単一のプリロード設定に広告ユニット ID を使用している場合は、その広告ユニット ID をプリロード ID として使用します。アプリで同じ広告ユニット ID に複数のプリローダーが必要な場合は、プリロード ID ごとに異なる文字列を渡します。

アプリがバッファからプリロードされた広告をポーリングすると、Google Mobile Ads SDK for React Native はバックグラウンドで代替広告をリクエストしてバッファを補充します。バッファにプリロードされた広告が残っていない場合、Google Mobile Ads SDK for React Native は onAdsExhausted コールバックを呼び出します。

プリロード キャッシュの上限

Google Mobile Ads SDK for React Native では、プリロードされた広告の合計数にアプリ全体の上限が適用されます。

• デフォルトの上限: Google は、最大 6 つのプリロードされた広告をメモリに保持します。この上限は、すべてのフォーマットとプリロード ID で共有されます。
• 推奨されるバッファ: プリロード ID ごとに 2 つのプリロード広告。

アプリがアプリ全体の上限に達すると、既存の広告がキャッシュからポーリングされるか破棄されるまで、プリロードされた広告のバックグラウンド リクエストが一時停止します。また、フルスクリーン広告が画面に表示されている間も、プリロードは一時的に停止します。

ポーリングして広告を表示する

広告を表示する前に、RewardedInterstitialAdPreloader.isAdAvailable メソッドを呼び出して、広告が利用可能であることを確認します。広告を取得するには、RewardedInterstitialAdPreloader.pollAd メソッドを呼び出します。

広告を表示するには、show メソッドを呼び出します。このメソッドには、ユーザーが広告の視聴を完了したときに報酬を付与する onUserEarnedReward コールバックを指定します。広告の閉じや表示エラーなどの表示イベントをリッスンするには、show メソッドを呼び出す前に、広告インスタンスに adEventCallback プロパティを設定します。

次の例では、広告の可用性を確認し、広告を表示する前に全画面表示イベントをリッスンしています。

export function showPreloadedRewardedInterstitialAd(
  preloadId: string,
  onRewardEarned: (reward: Reward) => void,
  customAdEventCallback?: FullScreenAdEventCallback,
) {
  if (!RewardedInterstitialAdPreloader.isAdAvailable(preloadId)) {
    console.log('No preloaded rewarded interstitial ad available right now.');
    return;
  }

  const ad = RewardedInterstitialAdPreloader.pollAd(preloadId);
  if (!ad) {
    return;
  }

  ad.adEventCallback = {
    // Called when the ad is presented on screen.
    onAdShowedFullScreenContent: () => {
      console.log(
        'Preloaded rewarded interstitial ad showed full screen content.',
      );
      customAdEventCallback?.onAdShowedFullScreenContent?.();
    },
    // Called when the ad is closed by the user.
    onAdDismissedFullScreenContent: () => {
      console.log(
        'Preloaded rewarded interstitial ad dismissed full screen content.',
      );
      customAdEventCallback?.onAdDismissedFullScreenContent?.();
      ad.destroy();
    },
    // Called when presentation fails.
    onAdFailedToShowFullScreenContent: (error) => {
      console.error(
        'Failed to show preloaded rewarded interstitial ad:',
        error,
      );
      customAdEventCallback?.onAdFailedToShowFullScreenContent?.(error);
      ad.destroy();
    },
    // Called when an impression is recorded.
    onAdImpression: () => {
      console.log('Preloaded rewarded interstitial ad recorded an impression.');
      customAdEventCallback?.onAdImpression?.();
    },
    // Called when the user taps the ad.
    onAdClicked: () => {
      console.log('Preloaded rewarded interstitial ad was clicked.');
      customAdEventCallback?.onAdClicked?.();
    },
    // Called when the ad is estimated to have earned money.
    onAdPaid: (adValue) => {
      console.log(
        `Preloaded rewarded interstitial ad paid: ${adValue.amountMicros}` +
          ` ${adValue.currencyCode}`,
      );
      customAdEventCallback?.onAdPaid?.(adValue);
    },
  };

  ad.show(onRewardEarned);
}

メモリとリソースを解放するには、onAdDismissedFullScreenContent コールバックと onAdFailedToShowFullScreenContent コールバックで ad.destroy メソッドを呼び出します。

レスポンス情報を読み取る

キャッシュから広告を削除せずに、次にプリロードされる広告のレスポンス情報を検査するには、RewardedInterstitialAdPreloader.peekAdResponseInfo メソッドを呼び出します。

export function peekRewardedInterstitialAdResponseInfo(
  preloadId: string,
): ResponseInfo | null {
  const responseInfo =
    RewardedInterstitialAdPreloader.peekAdResponseInfo(preloadId);
  if (responseInfo) {
    console.log(
      'Next preloaded rewarded interstitial ad response info:',
      responseInfo,
    );
  }
  return responseInfo;
}

広告が利用可能な場合、peekAdResponseInfo メソッドは、読み込まれた広告ソースとネットワーク アダプターに関する情報を含む ResponseInfo オブジェクトを返します。

任意: SSV コールバックを検証する

サーバーサイド認証（SSV）コールバックで、ユーザー ID やカスタム リワード メタデータなどのカスタム認証パラメータがアプリで必要な場合は、show メソッドを呼び出す前に、ポーリングされた広告インスタンスに serverSideVerificationOptions プロパティを設定します。

設定した値は、SSV コールバックのクエリ パラメータに渡されます。

• userId: user_id クエリ パラメータに渡され、ユーザーを識別します。
• customData: カスタム メタデータを転送するために custom_data クエリ パラメータに渡します。

次の例では、広告を表示する前に、リワード インタースティシャル広告オブジェクトに ServerSideVerificationOptions（customData と userId）を設定しています。

export function setServerSideVerificationRewardedInterstitial(
  ad: RewardedInterstitialAd,
) {
  ad.serverSideVerificationOptions = {
    userId: 'user_123',
    customData: 'sample_custom_data',
  };
}

重要なポイント: custom_data クエリ パラメータ値はパーセント エンコード（URL エンコード）されます。サーバーで SSV コールバックを処理する場合は、処理する前にこの文字列を URL デコードします。

リソースのクリーンアップ

セッションの残りの部分で特定のプリロード ID の広告を表示する必要がなくなった場合は、RewardedInterstitialAdPreloader.destroy メソッドを呼び出します。このプロセスにより、そのプリロード ID のプリロードが停止し、未使用のプリロードされた広告がメモリから解放されます。

次の例では、プリロードを停止しています。

export function destroyRewardedInterstitialAdPreloader(preloadId: string) {
  RewardedInterstitialAdPreloader.destroy(preloadId);
}

ユーザーが広告を閉じた後、または広告の表示に失敗した後は、ポーリングされた個々の広告インスタンスを破棄します。詳しくは、広告をポーリングして表示するをご覧ください。

サンプル全体を表示する

このセクションでは、広告のプリロードの完全な実装について説明します。

次のコンポーネントの例では、マウント時にプリロードを開始し、利用可能な広告数を追跡して、プリロードされたリワード インタースティシャル広告を表示するコントロールを提供します。

export function RewardedInterstitialScreen() {
  const [numAdsAvailable, setNumAdsAvailable] = useState<number>(0);
  const [status, setStatus] = useState<string>('Preloader idle.');
  const [reward, setReward] = useState<string | null>(null);

  const refreshAdCount = () => {
    const count =
      RewardedInterstitialAdPreloader.getNumAdsAvailable(PRELOAD_ID);
    setNumAdsAvailable(count);
  };

  useEffect(() => {
    // Start preloading ads on component mount
    const started = startRewardedInterstitialAdPreloader(
      REWARDED_INTERSTITIAL_AD_UNIT_ID,
      PRELOAD_ID,
      {
        onAdPreloaded: () => {
          refreshAdCount();
          setStatus('Rewarded interstitial ad preloaded into buffer.');
        },
        onAdFailedToPreload: (error) => {
          setStatus(
            `Failed to preload rewarded interstitial ad: ${error.message}`,
          );
        },
        onAdsExhausted: () => {
          refreshAdCount();
          setStatus('Preload buffer exhausted for rewarded interstitial ads.');
        },
      },
    );
    if (started) {
      setStatus('Preloader started.');
    }

    // Clean up preloader resources on component unmount
    return () => {
      destroyRewardedInterstitialAdPreloader(PRELOAD_ID);
    };
  }, []);

  const handleShowAd = () => {
    setReward(null);
    setStatus('Showing preloaded ad...');
    showPreloadedRewardedInterstitialAd(
      PRELOAD_ID,
      (userReward) => {
        setReward(`${userReward.amount} ${userReward.type}`);
      },
      {
        onAdDismissedFullScreenContent: () => {
          setStatus('Ad dismissed.');
        },
        onAdFailedToShowFullScreenContent: (error) => {
          setStatus(`Failed to show preloaded ad: ${error.message}`);
        },
      },
    );
    refreshAdCount();
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Preload Rewarded Interstitial Ads</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <Text style={styles.status}>Ads Available: {numAdsAvailable}</Text>
      {reward && <Text style={styles.rewardText}>Earned: {reward}</Text>}
      <View style={styles.buttonGroup}>
        <Button
          title="Show Preloaded Ad"
          onPress={handleShowAd}
          disabled={numAdsAvailable === 0}
        />
      </View>
    </View>
  );
}

次のステップ

リワード インタースティシャル広告を組み込んだら、次のトピックをご覧ください。

• インプレッション単位の広告収益
• ユーザーのプライバシーと同意