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

​
概要

リワード広告はユーザーが動画広告を最後まで視聴すると、ゲーム内通貨、ライフ、ヒントなどの報酬を提供する全画面動画広告です。

​
主な特徴

  • 全画面を占める動画広告
  • ユーザーが広告を完全に視聴した場合のみ報酬を提供
  • ユーザーが直接広告視聴を選択（例：「動画を見てライフをもらう」ボタン）
  • 報酬タイプと数量を設定可能
開発環境ではテストユニットIDを使用してください。

​
実装方法

リワード広告は2つの方式で実装できます：
  1. クラス方式 - AdropRewardedAdクラスを直接使用
  2. Hook方式 - useAdropRewardedAd Hookを使用（推奨）

​
Hook方式実装（推奨）

React Hookを使用してより簡潔でReactらしい方式で実装できます。

​
基本例

import React, { useCallback } from 'react';
import { Button, View, Text, StyleSheet } from 'react-native';
import { useAdropRewardedAd } from 'adrop-ads-react-native';

const RewardedAdScreen = () => {
  const unitId = 'YOUR_UNIT_ID'; // またはテストユニットID

  const {
    load,
    show,
    reset,
    isLoaded,
    isOpened,
    isClosed,
    isEarnRewarded,
    reward,
    errorCode,
    isReady
  } = useAdropRewardedAd(unitId);

  // コンポーネントマウント時に広告ロード
  React.useEffect(() => {
    if (isReady) {
      load();
    }
  }, [isReady, load]);

  // 広告が閉じた後に次の広告をロード
  React.useEffect(() => {
    if (isClosed) {
      console.log('広告が閉じました');
      // 次の広告を事前ロード
      reset();
      load();
    }
  }, [isClosed, reset, load]);

  // 報酬処理
  React.useEffect(() => {
    if (isEarnRewarded && reward) {
      console.log(`報酬獲得 - タイプ: ${reward.type}, 数量: ${reward.amount}`);
      grantReward(reward.type, reward.amount);
    }
  }, [isEarnRewarded, reward]);

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

  const grantReward = (type: number, amount: number) => {
    // ユーザーに報酬を支給
    console.log(`報酬支給: タイプ=${type}, 数量=${amount}`);
    // 実際の報酬支給ロジックを実装
  };

  return (
    <View style={styles.container}>
      <Button
        title="広告ロード"
        onPress={load}
        disabled={!isReady}
      />
      <Button
        title="広告を見る"
        onPress={handleShowAd}
        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',
  },
});

export default RewardedAdScreen;

​
useAdropRewardedAd Hook

Hookを使用すると広告状態を自動的に管理できます。

​
パラメータ

​
unitId
string | null
広告コントロールコンソールで発行された広告ユニットID。nullを渡すと広告インスタンスが生成されません。

​
戻り値

​
load
() => void
広告をリクエストします。
​
show
() => void
広告を表示します。
​
reset
() => void
広告状態を初期化して新しい広告インスタンスを生成します。
​
isLoaded
boolean
広告がロードされて表示可能な状態かどうか
​
isOpened
boolean
広告が画面に表示されたかどうか
​
isClosed
boolean
広告が閉じられたかどうか
​
isEarnRewarded
boolean
ユーザーが報酬を獲得したかどうか
​
reward
{ type: number, amount: number } | undefined
報酬情報（タイプと数量）
​
errorCode
string | undefined
エラーコード（エラー発生時のみ値あり）
​
isReady
boolean
広告インスタンスが準備され使用可能な状態かどうか

​
クラス方式実装

AdropRewardedAdクラスを直接使用して広告を実装できます。

​
基本例

import React, { useEffect, useState, useCallback } from 'react';
import { Button, View, Text, StyleSheet } from 'react-native';
import { AdropRewardedAd, AdropListener } from 'adrop-ads-react-native';

const RewardedAdScreen = () => {
  const [rewardedAd, setRewardedAd] = useState<AdropRewardedAd | null>(null);
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    // 1. AdropRewardedAdインスタンス生成
    const ad = new AdropRewardedAd('YOUR_UNIT_ID');

    // 2. Listener設定
    const listener: AdropListener = {
      onAdReceived: (ad) => {
        console.log('広告受信完了:', ad.unitId);
        setIsLoaded(true);
      },
      onAdFailedToReceive: (ad, errorCode) => {
        console.log('広告受信失敗:', errorCode);
        setIsLoaded(false);
      },
      onAdDidPresentFullScreen: (ad) => {
        console.log('広告画面表示:', ad.unitId);
      },
      onAdDidDismissFullScreen: (ad) => {
        console.log('広告画面閉じる:', ad.unitId);
        setIsLoaded(false);
        // 次の広告を事前ロード
        ad.load();
      },
      onAdEarnRewardHandler: (ad, type, amount) => {
        console.log(`報酬獲得 - タイプ: ${type}, 数量: ${amount}`);
        grantReward(type, amount);
      },
      onAdClicked: (ad) => {
        console.log('広告クリック:', ad.unitId);
      },
      onAdImpression: (ad) => {
        console.log('広告露出:', ad.unitId);
      },
      onAdFailedToShowFullScreen: (ad, errorCode) => {
        console.log('広告表示失敗:', errorCode);
      },
    };

    ad.listener = listener;
    setRewardedAd(ad);

    // 3. 広告ロード
    ad.load();

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

  const handleShowAd = useCallback(() => {
    if (rewardedAd && isLoaded) {
      rewardedAd.show();
    } else {
      console.log('広告がまだロードされていません');
    }
  }, [rewardedAd, isLoaded]);

  const grantReward = (type: number, amount: number) => {
    // ユーザーに報酬を支給
    console.log(`報酬支給: タイプ=${type}, 数量=${amount}`);
    // 実際の報酬支給ロジックを実装
  };

  return (
    <View style={styles.container}>
      <Button
        title="広告ロード"
        onPress={() => rewardedAd?.load()}
      />
      <Button
        title="広告を見る"
        onPress={handleShowAd}
        disabled={!isLoaded}
      />
    </View>
  );
};

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

export default RewardedAdScreen;

​
報酬処理

​
Hook方式での報酬処理

const RewardedAdScreen = () => {
  const { isEarnRewarded, reward } = useAdropRewardedAd('YOUR_UNIT_ID');

  useEffect(() => {
    if (isEarnRewarded && reward) {
      // 報酬支給処理
      console.log(`報酬獲得 - タイプ: ${reward.type}, 数量: ${reward.amount}`);
      grantReward(reward.type, reward.amount);
    }
  }, [isEarnRewarded, reward]);

  const grantReward = (type: number, amount: number) => {
    // ユーザーに報酬を支給
    // 例：ゲーム通貨追加、ライフ回復など
  };

  // ...
};

​
クラス方式での報酬処理

const listener: AdropListener = {
  onAdEarnRewardHandler: (ad, type, amount) => {
    console.log(`報酬獲得 - タイプ: ${type}, 数量: ${amount}`);
    grantReward(type, amount);
  },
  // その他のコールバック...
};

const grantReward = (type: number, amount: number) => {
  // ユーザーに報酬を支給
  // 例：ゲーム通貨追加、ライフ回復など
};

​
テスト

​
テストユニットID

開発中は常にテストユニットIDを使用してください。実際のユニットIDでテストすると無効なトラフィックと見なされアカウントが停止される可能性があります。 
// Hook方式
const unitId = __DEV__ ? 'TEST_UNIT_ID' : 'YOUR_PRODUCTION_UNIT_ID';
const rewardedAd = useAdropRewardedAd(unitId);

// クラス方式
const unitId = __DEV__ ? 'TEST_UNIT_ID' : 'YOUR_PRODUCTION_UNIT_ID';
const ad = new AdropRewardedAd(unitId);

​
Best Practices

​
1. 広告を事前ロード

ユーザー体験のために広告を事前にロードしておくことをお勧めします。 
// Hook方式
const RewardedAdScreen = () => {
  const { load, isClosed, reset, isReady } = useAdropRewardedAd('YOUR_UNIT_ID');

  // コンポーネントマウント時に広告ロード
  useEffect(() => {
    if (isReady) {
      load();
    }
  }, [isReady, load]);

  // 広告が閉じた後に次の広告を事前ロード
  useEffect(() => {
    if (isClosed) {
      reset();
      load();
    }
  }, [isClosed, reset, load]);

  // ...
};

​
2. 広告準備状態確認

広告がロードされているか確認してUIを更新します。 
const RewardedAdScreen = () => {
  const { isLoaded, show } = useAdropRewardedAd('YOUR_UNIT_ID');

  return (
    <View>
      <Button
        title={isLoaded ? "動画を見てライフをもらう" : "広告ロード中..."}
        onPress={show}
        disabled={!isLoaded}
      />
    </View>
  );
};

​
3. メモリ管理

コンポーネントアンマウント時に広告リソースを整理します。 
// Hook方式は自動的に整理
const { ... } = useAdropRewardedAd('YOUR_UNIT_ID');

// クラス方式は手動で整理が必要
useEffect(() => {
  const ad = new AdropRewardedAd('YOUR_UNIT_ID');
  // ...

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

​
関連ドキュメント

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

インタースティシャル広告実装ガイド

ポップアップ広告

ポップアップ広告実装ガイド

ネイティブ広告

ネイティブ広告実装ガイド

エラーコード

エラーコードリファレンス