ポップアップ広告 - Ad Control Help Center

概要

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

主要機能

画面中央または下部の位置選択可能
「今日は表示しない」機能サポート
ボタン色のカスタマイズ可能
画像広告サポート

開発環境ではテストユニット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,
})

パラメータ

パラメータ	タイプ	必須	説明
`unitId`	`String`	Y	Ad Controlコンソールで作成したユニットID
`listener`	`AdropPopupListener`	N	広告イベントリスナー
`closeTextColor`	`Color`	N	閉じるボタンのテキスト色
`hideForTodayTextColor`	`Color`	N	「今日は表示しない」ボタンのテキスト色
`backgroundColor`	`Color`	N	ボタンの背景色

プロパティ

プロパティ	タイプ	説明
`isLoaded`	`bool`	広告ロード完了の有無
`unitId`	`String`	広告ユニットID
`creativeId`	`String`	クリエイティブID
`txId`	`String`	トランザクションID
`campaignId`	`String`	キャンペーンID
`destinationURL`	`String`	遷移先URL
`browserTarget`	`BrowserTarget?`	ブラウザターゲット（外部または内部）

メソッド

メソッド	戻り値の型	説明
`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) {
    // 広告表示失敗
  },
  onAdVideoStart: (AdropAd ad) {
    // 動画広告の再生開始
  },
  onAdVideoEnd: (AdropAd ad) {
    // 動画広告の再生終了
  },
)

コールバックの説明

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

ボタン色のカスタマイズ

ポップアップ広告の閉じるボタンと「今日は表示しない」ボタンの色をカスタマイズできます。

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`	ボタンの背景色	システムデフォルト

ポップアップの位置

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

中央ポップアップ

画面中央にポップアップが表示されます。お知らせ、イベント通知などに適しています。

// 中央ポップアップ用ユニット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),
                  ),
              ],
            ],
          ),
        ),
      ),
    );
  }
}

バックフィル広告

バックフィル広告が有効な場合、ダイレクト広告がない時に自動的にバックフィル広告がロードされます。エラーコードを使ってバックフィル関連の状態を処理できます。

popupAd = AdropPopupAd(
  unitId: 'YOUR_UNIT_ID',
  listener: AdropPopupListener(
    onAdReceived: (ad) {
      debugPrint('広告ロード完了: ${ad.creativeId}');
    },
    onAdFailedToReceive: (ad, errorCode) {
      switch (errorCode) {
        case AdropErrorCode.adNoFill:
          debugPrint('ダイレクト広告なし');
          break;
        case AdropErrorCode.backfillNoFill:
          debugPrint('バックフィル広告もありません');
          break;
        default:
          debugPrint('広告ロード失敗: ${errorCode.code}');
      }
    },
  ),
);

バックフィル広告を使用するには、ネイティブプラットフォームにバックフィル依存性を追加する必要があります。はじめにを参照してください。

次のステップ

ターゲティング

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

リファレンス

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

例

様々な実装例を見る

​概要

​主要機能

​AdropPopupAd

​コンストラクタ

​プロパティ

​メソッド

​基本的な使い方

​AdropPopupListener

​コールバック関数

​コールバックの説明

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

​色のオプション

​ポップアップの位置

​中央ポップアップ

​下部ポップアップ

​今日は表示しない

​広告の再生成

​エラー処理

​ベストプラクティス

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

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

​3. リソース管理

​完全な例

​バックフィル広告

​次のステップ

ターゲティング

リファレンス

例

概要

主要機能

AdropPopupAd

コンストラクタ

プロパティ

メソッド

基本的な使い方

AdropPopupListener

コールバック関数

コールバックの説明

ボタン色のカスタマイズ

色のオプション

ポップアップの位置

中央ポップアップ

下部ポップアップ

今日は表示しない

広告の再生成

エラー処理

ベストプラクティス

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

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

3. リソース管理

完全な例

バックフィル広告

次のステップ