1 つのリワード インタースティシャル広告を読み込む

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

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

このガイドでは、React Native ネイティブ アプリにリワード インタースティシャル広告を組み込む方法について説明します。

前提条件

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

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

Android

ca-app-pub-3940256099942544/5354046379

iOS

ca-app-pub-3940256099942544/6978759866

広告を読み込む

リワード インタースティシャル広告を読み込むには、RewardedInterstitialAd クラスの load メソッドを呼び出します。

次の例では、成功した場合はリワード インタースティシャル広告を読み込み、失敗した場合はエラーをログに記録します。

export async function loadRewardedInterstitialAd(
  adUnitId: string,
): Promise<RewardedInterstitialAd | null> {
  try {
    const ad = await RewardedInterstitialAd.load({adUnitId});
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load rewarded interstitial:', loadError.message);
    return null;
  }
}

広告イベントをリッスンする

広告を表示する前に、読み込まれた RewardedInterstitialAd インスタンスに adEventCallback リスナーを設定します。このリスナーは、広告が画面に表示されたときや、ユーザーが広告をタップしたときなど、広告のライフサイクル イベントのコールバックを受け取ります。使用可能なコールバックについては、AdEventCallback をご覧ください。

次の例では、広告イベントをリッスンするコールバックを設定しています。

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

この例では、ユーザーが広告を閉じたときや、広告の表示に失敗したときにも、destroy メソッドを呼び出しています。このプロセスにより、広告で使用されていたリソースが解放されます。

広告を表示する

キーポイント: リワード インタースティシャル広告をユーザーに表示する前に、報酬に関する明確なメッセージと、開始前に広告をスキップできる選択肢を示した導入画面を表示します。

リワード インタースティシャル広告を表示するには、読み込まれた RewardedInterstitialAd インスタンスで show を呼び出し、Reward を受け取るコールバックを渡します。

export function showRewardedInterstitialAd(
  ad: RewardedInterstitialAd,
  onRewardEarned: (reward: Reward) => void,
) {
  ad.show(onRewardEarned);
}

任意: サーバーサイド認証コールバックを検証する

サーバーサイド認証（SSV）コールバックで、ユーザー ID やカスタム リワード メタデータなどのカスタム認証パラメータがアプリで必要な場合は、広告を表示する前に、読み込まれた広告インスタンスに 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 デコードします。

サンプル全体を表示する

このセクションでは、リワード インタースティシャル広告を React Native アプリに統合する完全な例について説明します。

次の例では、広告を React Native コンポーネントに統合し、広告インスタンスを状態管理して、広告を読み込んで表示するコントロールを提供しています。

export function RewardedInterstitialSingleLoadScreen() {
  const [ad, setAd] = useState<RewardedInterstitialAd | null>(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [status, setStatus] = useState<string>('Idle');
  const [reward, setReward] = useState<string | null>(null);

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

  const handleLoad = async () => {
    setReward(null);
    setStatus('Loading Rewarded Interstitial ad...');
    const loadedAd = await loadRewardedInterstitialAd(
      REWARDED_INTERSTITIAL_AD_UNIT_ID,
    );
    if (loadedAd) {
      registerAdEvents(loadedAd);
      const onDismiss =
        loadedAd.adEventCallback?.onAdDismissedFullScreenContent;
      loadedAd.adEventCallback = {
        ...loadedAd.adEventCallback,
        onAdDismissedFullScreenContent: () => {
          onDismiss?.();
          setStatus('Ad dismissed.');
        },
      };
      setAd((prevAd) => {
        prevAd?.destroy();
        return loadedAd;
      });
      setIsLoaded(true);
      setStatus('Rewarded Interstitial ad loaded!');
    } else {
      setStatus('Failed to load Rewarded Interstitial ad.');
    }
  };

  const handleShow = () => {
    if (ad) {
      showRewardedInterstitialAd(ad, (userReward) => {
        setReward(`${userReward.amount} ${userReward.type}`);
      });
      setIsLoaded(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Rewarded Interstitial Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      {reward && <Text style={styles.rewardText}>Earned: {reward}</Text>}
      <View style={styles.buttonGroup}>
        <Button title="Load Ad" onPress={handleLoad} />
        <View style={styles.spacerSmall} />
        <Button title="Show Ad" onPress={handleShow} disabled={!isLoaded} />
      </View>
    </View>
  );
}

次のステップ

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

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