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

​
概要

ポップアップ広告は、特定のタイミングで画面に表示される広告フォーマットです。アプリ起動時、コンテンツ読み込み完了後、特定イベント時などに表示できます。ユーザーは閉じるボタンをタップするか、「今日は表示しない」を選択して閉じることができます。

​
特徴

  • 画面の中央または下部に表示されるポップアップ形式
  • 画像・動画広告のサポート
  • 閉じる、ディム（背景）クリック、「今日は表示しない」オプション
  • 背景色、テキスト色などのカスタマイズ可能
  • 非侵入的でありながら効果的な広告体験
開発時はテストユニットIDを使用してください。テストユニットIDセクションを参照してください。

​
実装手順

ポップアップ広告は4つのステップで実装します：
  1. 初期化 - AdropPopupAdインスタンスを作成
  2. リスナー設定 - 広告イベントを受け取るリスナーを設定
  3. 広告ロード - 広告をリクエストして受信
  4. 広告表示 - 画面に広告を表示

​
基本実装

​
AdropPopupAdクラス

AdropPopupAdはポップアップ広告を管理するメインクラスです。 
import AdropPopupAd, { AdropPopupAdColors } from 'adrop-ads-react-native';

const popupAd = new AdropPopupAd(
  unitId: string,
  colors?: AdropPopupAdColors,
  useCustomClick?: boolean
);

​
コンストラクタパラメータ

​
unitId
string
required
ポップアップ広告ユニットID。広告管理コンソールで作成したユニットIDを使用してください。
​
colors
AdropPopupAdColors
ポップアップ広告の色をカスタマイズするオプション。
  • closeTextColor: 閉じるボタンのテキスト色
  • hideForTodayTextColor: 「今日は表示しない」のテキスト色
  • backgroundColor: ポップアップの背景（ディム）色
​
useCustomClick
boolean
default:"false"
カスタムクリック処理を使用するかどうか。trueに設定すると、広告クリック時にデフォルトブラウザを開かずにonAdClickedコールバックのみが呼び出されます。

​
基本的な使用方法

import React, { useEffect, useState, useMemo } from 'react';
import { Button, View } from 'react-native';
import AdropPopupAd, { AdropListener } from 'adrop-ads-react-native';

const App: React.FC = () => {
  const [popupAd, setPopupAd] = useState<AdropPopupAd>();
  const [isLoaded, setIsLoaded] = useState(false);

  const listener: AdropListener = useMemo(() => ({
    onAdReceived: (ad: AdropPopupAd) => {
      console.log('ポップアップ広告を受信しました');
      setIsLoaded(true);
    },
    onAdFailedToReceive: (_: AdropPopupAd, errorCode: any) => {
      console.log('ポップアップ広告の受信に失敗しました:', errorCode);
    },
    onAdClicked: (ad: AdropPopupAd) => {
      console.log('ポップアップ広告がクリックされました');
      // クリック時にポップアップを閉じる
      ad.close();
    },
  }), []);

  useEffect(() => {
    // 1. ポップアップ広告を作成
    const ad = new AdropPopupAd('YOUR_POPUP_UNIT_ID');
    ad.listener = listener;
    setPopupAd(ad);

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

    // アンマウント時にクリーンアップ
    return () => {
      ad.destroy();
    };
  }, [listener]);

  // 3. 広告を表示
  const showAd = () => {
    if (popupAd && isLoaded) {
      popupAd.show();
    }
  };

  return (
    <View>
      <Button
        title="ポップアップ広告を表示"
        onPress={showAd}
        disabled={!isLoaded}
      />
    </View>
  );
};

export default App;

​
AdropListenerインターフェース

ポップアップ広告のイベントを受け取るリスナーインターフェースです。

​
必須コールバック

​
onAdReceived
(ad: AdropPopupAd) => void
広告の受信に成功した時に呼び出されます。この時点でshow()を呼び出すことができます。
​
onAdFailedToReceive
(ad: AdropPopupAd, errorCode?: any) => void
広告の受信に失敗した時に呼び出されます。エラーコードで失敗の理由を確認できます。

​
オプションコールバック

​
onAdImpression
(ad: AdropPopupAd) => void
広告のインプレッションが記録された時に呼び出されます。
​
onAdClicked
(ad: AdropPopupAd) => void
ユーザーが広告をクリックした時に呼び出されます。このコールバック内でad.close()を呼び出してポップアップを閉じることができます。
​
onAdWillPresentFullScreen
(ad: AdropPopupAd) => void
ポップアップ広告が表示される直前に呼び出されます。
​
onAdDidPresentFullScreen
(ad: AdropPopupAd) => void
ポップアップ広告が表示された直後に呼び出されます。
​
onAdWillDismissFullScreen
(ad: AdropPopupAd) => void
ポップアップ広告が閉じられる直前に呼び出されます。
​
onAdDidDismissFullScreen
(ad: AdropPopupAd) => void
ポップアップ広告が閉じられた直後に呼び出されます。次の広告をプリロードするのに適したタイミングです。
​
onAdFailedToShowFullScreen
(ad: AdropPopupAd, errorCode?: any) => void
広告の表示に失敗した時に呼び出されます。エラーコードで失敗の理由を確認できます。

​
リスナー実装例

const listener: AdropListener = useMemo(() => ({
  // 広告受信成功
  onAdReceived: (ad: AdropPopupAd) => {
    console.log('ポップアップ広告を受信しました');
    console.log('クリエイティブID:', ad.creativeId);
    console.log('キャンペーンID:', ad.campaignId);
    // 広告の準備ができたら自動表示
    ad.show();
  },

  // 広告受信失敗
  onAdFailedToReceive: (ad: AdropPopupAd, errorCode?: any) => {
    console.log('ポップアップ広告の受信に失敗しました:', errorCode);
  },

  // 広告インプレッション
  onAdImpression: (ad: AdropPopupAd) => {
    console.log('ポップアップ広告のインプレッション');
    console.log('TX ID:', ad.txId);
    console.log('遷移先URL:', ad.destinationURL);
  },

  // 広告クリック
  onAdClicked: (ad: AdropPopupAd) => {
    console.log('ポップアップ広告がクリックされました:', ad.destinationURL);
    // クリック時にポップアップを閉じる
    ad.close();
  },

  // ポップアップ表示直前
  onAdWillPresentFullScreen: (ad: AdropPopupAd) => {
    console.log('ポップアップ広告を表示します');
  },

  // ポップアップ表示完了
  onAdDidPresentFullScreen: (ad: AdropPopupAd) => {
    console.log('ポップアップ広告が表示されました');
  },

  // ポップアップ閉じる直前
  onAdWillDismissFullScreen: (ad: AdropPopupAd) => {
    console.log('ポップアップ広告を閉じます');
  },

  // ポップアップ閉じる完了
  onAdDidDismissFullScreen: (ad: AdropPopupAd) => {
    console.log('ポップアップ広告が閉じられました');
    // 次の広告をプリロード
    loadNextAd();
  },

  // ポップアップ表示失敗
  onAdFailedToShowFullScreen: (ad: AdropPopupAd, errorCode?: any) => {
    console.log('ポップアップ広告の表示に失敗しました:', errorCode);
  },
}), []);

​
メソッド

​
load()

広告をリクエストしてロードします。 
popupAd.load();

​
show()

ロードされた広告を表示します。onAdReceivedコールバックが呼び出された後にのみ呼び出すことができます。 
popupAd.show();
広告がロードされている場合（isLoaded === true）にのみshow()を呼び出してください。

​
close()

現在表示されているポップアップ広告を閉じます。主にonAdClickedコールバック内で使用されます。 
popupAd.close();

​
destroy()

広告インスタンスをクリーンアップし、リソースを解放します。コンポーネントのアンマウント時に必ず呼び出してください。 
useEffect(() => {
  const ad = new AdropPopupAd('YOUR_UNIT_ID');
  setPopupAd(ad);

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

​
広告プロパティ

ポップアップ広告オブジェクトで使用可能なプロパティ：
​
unitId
string
広告ユニットID
​
isLoaded
boolean
広告がロードされているかどうか
​
creativeId
string
現在表示されている広告のクリエイティブID
​
destinationURL
string
広告クリック時の遷移先URL
​
txId
string
トランザクションID（広告インプレッション追跡用）
​
campaignId
string
キャンペーンID

​
カスタマイズ

​
色設定

AdropPopupAdColorsタイプを使用してポップアップ広告の色をカスタマイズできます。 
import AdropPopupAd, { AdropPopupAdColors } from 'adrop-ads-react-native';

// 色オプションを定義
const customColors: AdropPopupAdColors = {
  closeTextColor: '#FFFFFF',                    // 閉じるボタンの色
  hideForTodayTextColor: '#456789',             // 「今日は表示しない」の色
  backgroundColor: 'rgba(53, 255, 63, 0.3)',    // 背景（ディム）色
};

// ポップアップ広告作成時に色を適用
const popupAd = new AdropPopupAd(
  'YOUR_POPUP_UNIT_ID',
  customColors
);

​
AdropPopupAdColorsタイプ

​
closeTextColor
string
閉じるボタンのテキスト色。HEXカラーコードまたはRGBA形式をサポート。
​
hideForTodayTextColor
string
「今日は表示しない」のテキスト色。HEXカラーコードまたはRGBA形式をサポート。
​
backgroundColor
string
ポップアップの背景（ディム）色。HEXカラーコードまたはRGBA形式をサポート。透明度を調整できます。

​
カスタムクリック処理

広告クリック時にデフォルトブラウザを開く代わりにカスタム処理を行うには、useCustomClickパラメータを使用します。 
const listener: AdropListener = useMemo(() => ({
  onAdReceived: (ad: AdropPopupAd) => {
    ad.show();
  },
  onAdFailedToReceive: (_: AdropPopupAd, errorCode: any) => {
    console.log('広告の受信に失敗しました:', errorCode);
  },
  onAdClicked: (ad: AdropPopupAd) => {
    // カスタムクリック処理
    console.log('広告がクリックされました:', ad.destinationURL);

    // URLを希望どおりに処理
    // 例：アプリ内ブラウザで開く
    openInAppBrowser(ad.destinationURL);

    // ポップアップを閉じる
    ad.close();
  },
}), []);

// useCustomClickをtrueに設定
const popupAd = new AdropPopupAd(
  'YOUR_POPUP_UNIT_ID',
  undefined,  // colors
  true        // useCustomClick
);
popupAd.listener = listener;

​
テストユニットID

開発およびテスト中は以下のテストユニットIDを使用してください。
広告タイプテストユニットID
ポップアップ（下部画像）PUBLIC_TEST_UNIT_ID_POPUP_BOTTOM
ポップアップ（中央画像）PUBLIC_TEST_UNIT_ID_POPUP_CENTER
ポップアップ動画（下部16:9）PUBLIC_TEST_UNIT_ID_POPUP_BOTTOM_VIDEO_16_9
ポップアップ動画（下部9:16）PUBLIC_TEST_UNIT_ID_POPUP_BOTTOM_VIDEO_9_16
ポップアップ動画（中央16:9）PUBLIC_TEST_UNIT_ID_POPUP_CENTER_VIDEO_16_9
ポップアップ動画（中央9:16）PUBLIC_TEST_UNIT_ID_POPUP_CENTER_VIDEO_9_16

​
テスト広告の使用例

import { Platform } from 'react-native';

// 開発環境と本番環境を分離
const POPUP_UNIT_ID = __DEV__
  ? 'PUBLIC_TEST_UNIT_ID_POPUP_BOTTOM'  // テストユニットID
  : 'YOUR_PRODUCTION_UNIT_ID';           // 本番ユニットID

const popupAd = new AdropPopupAd(POPUP_UNIT_ID);
本番リリース時は、広告管理コンソールで作成した実際のユニットIDを使用してください。

​
エラー処理

広告のロードまたは表示の失敗時にエラーコードを確認して適切に対処してください。 
const listener: AdropListener = {
  onAdFailedToReceive: (ad: AdropPopupAd, errorCode?: any) => {
    console.error('広告の受信に失敗しました:', errorCode);

    switch (errorCode) {
      case 'NETWORK_ERROR':
        // ネットワークエラーを処理
        console.log('ネットワーク接続を確認してください');
        break;
      case 'NO_FILL':
        // 広告在庫不足
        console.log('表示可能な広告がありません');
        break;
      case 'INVALID_UNIT_ID':
        // 無効なユニットID
        console.log('広告ユニットIDを確認してください');
        break;
      default:
        console.log('広告をロードできません');
    }
  },

  onAdFailedToShowFullScreen: (ad: AdropPopupAd, errorCode?: any) => {
    console.error('広告の表示に失敗しました:', errorCode);

    // 後でリトライ
    setTimeout(() => {
      ad.load();
    }, 30000); // 30秒後にリトライ
  },
};

​
ベストプラクティス

​
1. 適切な表示タイミング

ポップアップ広告は以下のタイミングで最も効果的です： 
// 良い例：アプリ起動時
useEffect(() => {
  const ad = new AdropPopupAd('YOUR_UNIT_ID');
  ad.listener = {
    onAdReceived: (ad) => ad.show(),
    onAdFailedToReceive: (_, error) => console.log(error),
  };
  ad.load();

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

// 良い例：コンテンツ読み込み完了後
const onContentLoaded = () => {
  if (shouldShowPopupAd()) {
    popupAd?.show();
  }
};

// 良い例：特定イベント完了時
const onAchievementUnlocked = () => {
  popupAd?.show();
};

// 悪い例：ユーザーの作業中
const onUserTyping = () => {
  popupAd?.show(); // ユーザー体験を損なう
};

​
2. 頻度制限

ポップアップ広告を頻繁に表示しすぎないようにしてください。 
import AsyncStorage from '@react-native-async-storage/async-storage';

const LAST_SHOWN_KEY = 'popup_ad_last_shown';
const MINIMUM_INTERVAL = 3600000; // 1時間（ミリ秒）

// 広告を表示できるかチェック
const canShowAd = async (): Promise<boolean> => {
  try {
    const lastShown = await AsyncStorage.getItem(LAST_SHOWN_KEY);
    if (!lastShown) return true;

    const currentTime = Date.now();
    const lastShownTime = parseInt(lastShown, 10);

    return currentTime - lastShownTime >= MINIMUM_INTERVAL;
  } catch (error) {
    return true;
  }
};

// 広告表示を記録
const recordAdShown = async () => {
  try {
    await AsyncStorage.setItem(LAST_SHOWN_KEY, Date.now().toString());
  } catch (error) {
    console.error('広告表示の記録エラー:', error);
  }
};

// 使用方法
const showAdIfAllowed = async () => {
  if (await canShowAd()) {
    popupAd?.show();
    await recordAdShown();
  }
};

​
3. 広告のプリロード

より良いユーザー体験のために広告をプリロードしてください。 
const [isAdReady, setIsAdReady] = useState(false);

useEffect(() => {
  // アプリ起動時にプリロード
  const ad = new AdropPopupAd('YOUR_UNIT_ID');
  ad.listener = {
    onAdReceived: () => setIsAdReady(true),
    onAdFailedToReceive: (_, error) => console.log(error),
  };
  ad.load();

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

// 希望のタイミングで即座に表示
const showPopupNow = () => {
  if (isAdReady) {
    popupAd?.show();
  }
};

​
4. メモリ管理

コンポーネントのアンマウント時に必ず広告をクリーンアップしてください。 
useEffect(() => {
  const ad = new AdropPopupAd('YOUR_UNIT_ID');
  setPopupAd(ad);

  // クリーンアップ関数
  return () => {
    ad.destroy();
  };
}, []);

​
5. クリック時にポップアップを閉じる

より良いユーザー体験のために、広告クリック時にポップアップを閉じてください。 
const listener: AdropListener = {
  onAdClicked: (ad: AdropPopupAd) => {
    console.log('広告がクリックされました:', ad.destinationURL);
    // クリック時に自動的にポップアップを閉じる
    ad.close();
  },
};

​
トラブルシューティング

​
広告が表示されない

  • SDKが初期化されているか確認
  • ユニットIDが正しいか確認
  • ネットワーク接続を確認
  • テスト環境ではテストユニットIDを使用
  • エラーコードを確認して原因を特定
  • 広告在庫が不足している場合は後でリトライ
  • ネイティブSDKが正しく統合されているか確認
  • onAdReceivedコールバックの後にshow()が呼び出されているか確認
  • isLoadedプロパティで広告がロードされているか確認
  • ネイティブモジュールが正しく接続されているか確認

​
メモリリーク

// 良い例：クリーンアップ関数を使用
useEffect(() => {
  const ad = new AdropPopupAd('YOUR_UNIT_ID');
  setPopupAd(ad);

  return () => {
    ad.destroy();  // 必ず呼び出す
  };
}, []);

// 悪い例：クリーンアップなし
useEffect(() => {
  const ad = new AdropPopupAd('YOUR_UNIT_ID');
  setPopupAd(ad);
  // destroy()を呼び出さない - メモリリーク！
}, []);

​
関連ドキュメント

はじめに

SDKのインストールと初期化

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

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

リワード広告

リワード広告の実装

バナー広告

バナー広告の実装