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

​
概要

ポップアップ広告は、画面中央または下部にポップアップ形式で表示される広告です。「今日は表示しない」機能をサポートし、ユーザーエクスペリエンスを向上させることができます。

​
主要機能

  • 画面中央または下部の位置選択可能
  • 「今日は表示しない」機能サポート
  • ボタン色のカスタマイズ可能
  • 画像広告サポート
開発環境ではテストユニットIDを使用してください:
  • 下部: PUBLIC_TEST_UNIT_ID_POPUP_BOTTOM
  • 中央: PUBLIC_TEST_UNIT_ID_POPUP_CENTER

​
AdropPopupAd

​
コンストラクタ

AdropPopupAd({
  required String unitId,
  AdropPopupListener? listener,
  Color? closeTextColor,
  Color? hideForTodayTextColor,
  Color? backgroundColor,
})
パラメータ
パラメータタイプ必須説明
unitIdStringYAdControlコンソールで作成したユニットID
listenerAdropPopupListenerN広告イベントリスナー
closeTextColorColorN閉じるボタンのテキスト色
hideForTodayTextColorColorN「今日は表示しない」ボタンのテキスト色
backgroundColorColorNボタンの背景色

​
プロパティ

プロパティタイプ説明
isLoadedbool広告ロード完了の有無
unitIdString広告ユニットID
creativeIdStringクリエイティブID
txIdStringトランザクションID
campaignIdStringキャンペーンID
destinationURLString遷移先URL

​
メソッド

メソッド戻り値の型説明
load()Future<void>広告をロードします
show()Future<void>広告を画面に表示します
close()Future<void>広告を閉じます
dispose()Future<void>リソースを解放します

​
基本的な使い方

import 'package:flutter/material.dart';
import 'package:adrop_ads_flutter/adrop_ads_flutter.dart';

class PopupExample extends StatefulWidget {
  const PopupExample({super.key});

  @override
  State<PopupExample> createState() => _PopupExampleState();
}

class _PopupExampleState extends State<PopupExample> {
  bool isLoaded = false;
  AdropPopupAd? popupAd;

  @override
  void initState() {
    super.initState();
    _createPopupAd();
  }

  void _createPopupAd() {
    popupAd = AdropPopupAd(
      unitId: 'YOUR_UNIT_ID',
      listener: AdropPopupListener(
        onAdReceived: (ad) {
          debugPrint('ポップアップ広告ロード成功: ${ad.creativeId}');
          setState(() {
            isLoaded = true;
          });
        },
        onAdFailedToReceive: (ad, errorCode) {
          debugPrint('ポップアップ広告ロード失敗: $errorCode');
        },
        onAdClicked: (ad) {
          debugPrint('ポップアップ広告クリック');
        },
        onAdImpression: (ad) {
          debugPrint('ポップアップ広告表示');
        },
        onAdDidPresentFullScreen: (ad) {
          debugPrint('ポップアップ広告が表示されました');
        },
        onAdDidDismissFullScreen: (ad) {
          debugPrint('ポップアップ広告が閉じられました');
        },
        onAdFailedToShowFullScreen: (ad, errorCode) {
          debugPrint('ポップアップ広告表示失敗: $errorCode');
        },
      ),
    );
  }

  void loadAd() {
    popupAd?.load();
  }

  void showAd() {
    if (isLoaded) {
      popupAd?.show();
    }
  }

  @override
  void dispose() {
    popupAd?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('ポップアップ広告の例')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: loadAd,
              child: const Text('広告をロード'),
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: isLoaded ? showAd : null,
              child: const Text('広告を表示'),
            ),
          ],
        ),
      ),
    );
  }
}

​
AdropPopupListener

ポップアップ広告イベントを処理するリスナーです。

​
コールバック関数

AdropPopupListener(
  onAdReceived: (AdropAd ad) {
    // 広告ロード成功
  },
  onAdClicked: (AdropAd ad) {
    // 広告クリック
  },
  onAdImpression: (AdropAd ad) {
    // 広告表示
  },
  onAdWillPresentFullScreen: (AdropAd ad) {
    // 広告が表示される直前 (iOS専用)
  },
  onAdDidPresentFullScreen: (AdropAd ad) {
    // 広告が表示されました
  },
  onAdWillDismissFullScreen: (AdropAd ad) {
    // 広告が閉じられる直前 (iOS専用)
  },
  onAdDidDismissFullScreen: (AdropAd ad) {
    // 広告が閉じられました
  },
  onAdFailedToReceive: (AdropAd ad, AdropErrorCode errorCode) {
    // 広告ロード失敗
  },
  onAdFailedToShowFullScreen: (AdropAd ad, AdropErrorCode errorCode) {
    // 広告表示失敗
  },
)

​
コールバックの説明

コールバック説明
onAdReceived広告ロード成功時に呼び出されます
onAdClicked広告クリック時に呼び出されます
onAdImpression広告表示時に呼び出されます
onAdWillPresentFullScreen広告が表示される直前に呼び出されます (iOS専用)
onAdDidPresentFullScreen広告が表示された後に呼び出されます
onAdWillDismissFullScreen広告が閉じられる直前に呼び出されます (iOS専用)
onAdDidDismissFullScreen広告が閉じられた後に呼び出されます
onAdFailedToReceive広告ロード失敗時に呼び出されます
onAdFailedToShowFullScreen広告表示失敗時に呼び出されます

​
ボタン色のカスタマイズ

ポップアップ広告の閉じるボタンと「今日は表示しない」ボタンの色をカスタマイズできます。 
popupAd = AdropPopupAd(
  unitId: 'YOUR_UNIT_ID',
  // 閉じるボタンのテキスト色
  closeTextColor: Colors.white,
  // 「今日は表示しない」ボタンのテキスト色
  hideForTodayTextColor: Colors.white,
  // ボタンの背景色
  backgroundColor: Colors.black87,
  listener: AdropPopupListener(
    onAdReceived: (ad) {
      setState(() {
        isLoaded = true;
      });
    },
  ),
);

​
色のオプション

パラメータ説明デフォルト値
closeTextColor閉じるボタンのテキスト色システムデフォルト
hideForTodayTextColor「今日は表示しない」ボタンのテキスト色システムデフォルト
backgroundColorボタンの背景色システムデフォルト

​
ポップアップの位置

ポップアップ広告の位置は、AdControlコンソールでユニット作成時に設定します。

​
中央ポップアップ

画面中央にポップアップが表示されます。お知らせ、イベント通知などに適しています。 
// 中央ポップアップ用ユニットIDを使用
popupAd = AdropPopupAd(
  unitId: 'YOUR_CENTER_POPUP_UNIT_ID',
  listener: AdropPopupListener(...),
);

​
下部ポップアップ

画面下部にポップアップが表示されます。アプリ起動時のバナー形式の通知に適しています。 
// 下部ポップアップ用ユニットIDを使用
popupAd = AdropPopupAd(
  unitId: 'YOUR_BOTTOM_POPUP_UNIT_ID',
  listener: AdropPopupListener(...),
);

​
今日は表示しない

ユーザーが「今日は表示しない」を選択すると、そのデバイスで当日の深夜まで広告が表示されません。
「今日は表示しない」状態で広告をロードすると、adHideForTodayエラーが返されます。
onAdFailedToReceive: (ad, errorCode) {
  if (errorCode == AdropErrorCode.adHideForToday) {
    debugPrint('ユーザーが今日は表示しないを選択しました。');
    // 広告の代わりに他のコンテンツを表示
  }
}

​
広告の再生成

ポップアップ広告は一度きりです。一度表示された広告は再度表示できないため、新しい広告をロードするにはインスタンスを再生成する必要があります。 
class _PopupState extends State<PopupWidget> {
  bool isLoaded = false;
  bool isShown = false;
  AdropPopupAd? popupAd;

  @override
  void initState() {
    super.initState();
    _createPopupAd();
  }

  void _createPopupAd() {
    popupAd?.dispose();
    popupAd = AdropPopupAd(
      unitId: 'YOUR_UNIT_ID',
      backgroundColor: Colors.black87,
      listener: AdropPopupListener(
        onAdReceived: (ad) {
          setState(() {
            isLoaded = true;
          });
        },
        onAdDidDismissFullScreen: (ad) {
          setState(() {
            isShown = true;
          });
          // 次回表示のため新しい広告を準備
          _createPopupAd();
          popupAd?.load();
        },
      ),
    );

    setState(() {
      isLoaded = false;
      isShown = false;
    });
  }

  @override
  void dispose() {
    popupAd?.dispose();
    super.dispose();
  }
}

​
エラー処理

class _PopupState extends State<PopupWidget> {
  bool isLoaded = false;
  AdropErrorCode? errorCode;
  AdropPopupAd? popupAd;

  void _createPopupAd() {
    popupAd = AdropPopupAd(
      unitId: 'YOUR_UNIT_ID',
      listener: AdropPopupListener(
        onAdReceived: (ad) {
          setState(() {
            isLoaded = true;
            errorCode = null;
          });
        },
        onAdFailedToReceive: (ad, error) {
          setState(() {
            isLoaded = false;
            errorCode = error;
          });
          _handleError(error);
        },
        onAdFailedToShowFullScreen: (ad, error) {
          setState(() {
            errorCode = error;
          });
          _handleError(error);
        },
      ),
    );
  }

  void _handleError(AdropErrorCode error) {
    switch (error) {
      case AdropErrorCode.network:
        debugPrint('ネットワークエラーが発生しました。');
        break;
      case AdropErrorCode.adNoFill:
        debugPrint('表示する広告がありません。');
        break;
      case AdropErrorCode.adHideForToday:
        debugPrint('ユーザーが今日は表示しないを選択しました。');
        break;
      case AdropErrorCode.adShown:
        debugPrint('すでに表示された広告です。');
        break;
      default:
        debugPrint('エラー発生: ${error.code}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
          onPressed: popupAd?.load,
          child: const Text('広告をロード'),
        ),
        ElevatedButton(
          onPressed: isLoaded ? popupAd?.show : null,
          child: const Text('広告を表示'),
        ),
        if (errorCode != null)
          Text(
            'エラー: ${errorCode?.code}',
            style: const TextStyle(color: Colors.red),
          ),
      ],
    );
  }
}

​
ベストプラクティス

​
1. アプリ起動時にポップアップを表示

アプリ起動時にお知らせやイベントをポップアップで表示します。 
class SplashScreen extends StatefulWidget {
  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  AdropPopupAd? popupAd;

  @override
  void initState() {
    super.initState();
    _loadPopupAd();
  }

  void _loadPopupAd() {
    popupAd = AdropPopupAd(
      unitId: 'YOUR_UNIT_ID',
      listener: AdropPopupListener(
        onAdReceived: (ad) {
          // 広告がロードされたら表示
          popupAd?.show();
        },
        onAdFailedToReceive: (ad, errorCode) {
          // 広告ロード失敗時はすぐにメイン画面へ移動
          if (errorCode != AdropErrorCode.adHideForToday) {
            _navigateToMain();
          }
        },
        onAdDidDismissFullScreen: (ad) {
          // ポップアップが閉じられた後、メイン画面へ移動
          _navigateToMain();
        },
      ),
    );
    popupAd?.load();
  }

  void _navigateToMain() {
    Navigator.of(context).pushReplacement(
      MaterialPageRoute(builder: (_) => const MainScreen()),
    );
  }

  @override
  void dispose() {
    popupAd?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: CircularProgressIndicator(),
      ),
    );
  }
}

​
2. テーマに合った色を使用

アプリのテーマに合わせてボタンの色を設定します。 
void _createPopupAd() {
  final isDarkMode = Theme.of(context).brightness == Brightness.dark;

  popupAd = AdropPopupAd(
    unitId: 'YOUR_UNIT_ID',
    closeTextColor: isDarkMode ? Colors.white : Colors.black,
    hideForTodayTextColor: isDarkMode ? Colors.white70 : Colors.black54,
    backgroundColor: isDarkMode ? Colors.grey[800] : Colors.grey[200],
    listener: AdropPopupListener(...),
  );
}

​
3. リソース管理

使用していない広告インスタンスは必ず解放してください。 
@override
void dispose() {
  popupAd?.dispose();
  super.dispose();
}

​
完全な例

import 'package:flutter/material.dart';
import 'package:adrop_ads_flutter/adrop_ads_flutter.dart';

class PopupAdPage extends StatefulWidget {
  const PopupAdPage({super.key});

  @override
  State<PopupAdPage> createState() => _PopupAdPageState();
}

class _PopupAdPageState extends State<PopupAdPage> {
  bool isLoaded = false;
  bool isLoading = false;
  bool isShown = false;
  AdropErrorCode? errorCode;
  AdropPopupAd? popupAd;

  @override
  void initState() {
    super.initState();
    _createPopupAd();
  }

  void _createPopupAd() {
    popupAd?.dispose();
    popupAd = AdropPopupAd(
      unitId: 'PUBLIC_TEST_UNIT_ID_POPUP_BOTTOM', // テストユニットID
      closeTextColor: Colors.white,
      hideForTodayTextColor: Colors.white70,
      backgroundColor: Colors.black87,
      listener: AdropPopupListener(
        onAdReceived: (ad) {
          debugPrint('広告ロード成功');
          debugPrint('クリエイティブID: ${ad.creativeId}');
          debugPrint('キャンペーンID: ${ad.campaignId}');
          setState(() {
            isLoaded = true;
            isLoading = false;
            errorCode = null;
          });
        },
        onAdClicked: (ad) {
          debugPrint('広告クリック: ${ad.destinationURL}');
        },
        onAdImpression: (ad) {
          debugPrint('広告表示: ${ad.creativeId}');
        },
        onAdWillPresentFullScreen: (ad) {
          debugPrint('広告表示予定');
        },
        onAdDidPresentFullScreen: (ad) {
          debugPrint('広告が表示されました');
        },
        onAdWillDismissFullScreen: (ad) {
          debugPrint('広告が閉じられる予定');
        },
        onAdDidDismissFullScreen: (ad) {
          debugPrint('広告が閉じられました');
          setState(() {
            isShown = true;
          });
        },
        onAdFailedToReceive: (ad, error) {
          debugPrint('広告ロード失敗: $error');
          setState(() {
            isLoaded = false;
            isLoading = false;
            errorCode = error;
          });
        },
        onAdFailedToShowFullScreen: (ad, error) {
          debugPrint('広告表示失敗: $error');
          setState(() {
            errorCode = error;
          });
        },
      ),
    );

    setState(() {
      isLoaded = false;
      isShown = false;
      errorCode = null;
    });
  }

  void loadAd() {
    setState(() {
      isLoading = true;
      errorCode = null;
    });
    popupAd?.load();
  }

  void showAd() {
    if (isLoaded) {
      popupAd?.show();
    }
  }

  @override
  void dispose() {
    popupAd?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ポップアップ広告の例'),
      ),
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // ロードボタン
              ElevatedButton(
                onPressed: isLoading ? null : loadAd,
                child: Text(isLoading ? 'ロード中...' : '広告をロード'),
              ),
              const SizedBox(height: 16),

              // 表示ボタン
              ElevatedButton(
                onPressed: isLoaded ? showAd : null,
                child: const Text('広告を表示'),
              ),
              const SizedBox(height: 16),

              // リセットボタン
              TextButton(
                onPressed: (isShown || errorCode != null)
                    ? () => _createPopupAd()
                    : null,
                child: const Text('リセット'),
              ),
              const SizedBox(height: 24),

              // ステータス表示
              Text('ロード済み: ${isLoaded ? "はい" : "いいえ"}'),
              Text('表示済み: ${isShown ? "はい" : "いいえ"}'),

              // エラー表示
              if (errorCode != null) ...[
                const SizedBox(height: 16),
                Text(
                  'エラー: ${errorCode?.code}',
                  style: const TextStyle(color: Colors.red),
                ),
                if (errorCode == AdropErrorCode.adHideForToday)
                  const Text(
                    '(ユーザーが今日は表示しないを選択しました)',
                    style: TextStyle(color: Colors.grey, fontSize: 12),
                  ),
              ],
            ],
          ),
        ),
      ),
    );
  }
}

​
次のステップ

バックフィル広告

バックフィル広告を処理する方法を学ぶ

ターゲティング

カスタマイズされた広告のためのターゲティング設定

リファレンス

型、メソッド、エラーコードを参照する

例

様々な実装例を見る