ポップアップ広告

概要

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

主要機能

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

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

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

次のステップ

ターゲティング

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

リファレンス

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

例

様々な実装例を見る

SDKガイド

AI

Android

iOS

React Native

Flutter

Web

REST API

概要

主要機能

AdropPopupAd

コンストラクタ

プロパティ

メソッド

基本的な使い方

AdropPopupListener

コールバック関数

コールバックの説明

ボタン色のカスタマイズ

色のオプション

ポップアップの位置

中央ポップアップ

下部ポップアップ

今日は表示しない

広告の再生成

エラー処理

ベストプラクティス

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

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

3. リソース管理

完全な例

バックフィル広告

次のステップ

ターゲティング

リファレンス

例

​概要

​主要機能

​AdropPopupAd

​コンストラクタ

​プロパティ

​メソッド

​基本的な使い方

​AdropPopupListener

​コールバック関数

​コールバックの説明

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

​色のオプション

​ポップアップの位置

​中央ポップアップ

​下部ポップアップ

​今日は表示しない

​広告の再生成

​エラー処理

​ベストプラクティス

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

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

​3. リソース管理

​完全な例

​バックフィル広告

​次のステップ

ターゲティング

リファレンス

例

概要

主要機能

AdropPopupAd

コンストラクタ

プロパティ

メソッド

基本的な使い方

AdropPopupListener

コールバック関数

コールバックの説明

ボタン色のカスタマイズ

色のオプション

ポップアップの位置

中央ポップアップ

下部ポップアップ

今日は表示しない

広告の再生成

エラー処理

ベストプラクティス

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

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

3. リソース管理

完全な例

バックフィル広告

次のステップ