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

​
概要

バナー広告は画面の一部領域に表示される長方形の広告です。AdropBannerViewウィジェットを使用して簡単に実装できます。

​
主な特徴

  • 画面上部、下部、または中央に固定配置可能
  • 画像および動画広告をサポート
  • コールバックによる広告イベント処理
  • 広告メタデータを提供（クリエイティブID、キャンペーンIDなど）
開発環境ではテストユニットIDを使用してください：PUBLIC_TEST_UNIT_ID_320_100

​
AdropBannerView

​
コンストラクタ

AdropBannerView({
  required String unitId,
  AdropBannerListener? listener,
})
パラメータ
パラメータタイプ必須説明
unitIdStringYアドコントロールコンソールで作成したユニットID
listenerAdropBannerListenerN広告イベントリスナー

​
プロパティ

プロパティタイプ説明
creativeSizeCreativeSize?広告クリエイティブサイズ
adSizeSize?バナービューのサイズ設定

​
メソッド

メソッド戻り値の型説明
load()Future<void>広告をロードします
dispose()Future<void>リソースを解放します

​
基本的な使い方

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

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

  @override
  State<BannerExample> createState() => _BannerExampleState();
}

class _BannerExampleState extends State<BannerExample> {
  bool isLoaded = false;
  late AdropBannerView bannerView;

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

    bannerView = AdropBannerView(
      unitId: 'YOUR_UNIT_ID',
      listener: AdropBannerListener(
        onAdReceived: (unitId, metadata) {
          debugPrint('バナー広告受信成功: $unitId');
          setState(() {
            isLoaded = true;
          });
        },
        onAdClicked: (unitId, metadata) {
          debugPrint('バナー広告クリック: $unitId');
        },
        onAdImpression: (unitId, metadata) {
          debugPrint('バナー広告表示: $unitId');
        },
        onAdFailedToReceive: (unitId, errorCode) {
          debugPrint('バナー広告受信失敗: $unitId, $errorCode');
          setState(() {
            isLoaded = false;
          });
        },
      ),
    );

    // 広告ロード
    bannerView.load();
  }

  @override
  void dispose() {
    bannerView.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('バナー広告の例')),
      body: Column(
        children: [
          // メインコンテンツ
          Expanded(
            child: Center(
              child: const Text('メインコンテンツ'),
            ),
          ),
          // バナー広告
          if (isLoaded)
            SizedBox(
              width: MediaQuery.of(context).size.width,
              height: 80,
              child: bannerView,
            ),
        ],
      ),
    );
  }
}

​
AdropBannerListener

バナー広告イベントを処理するリスナーです。

​
コールバック関数

AdropBannerListener(
  onAdReceived: (String unitId, Map<String, dynamic>? metadata) {
    // 広告受信成功
  },
  onAdClicked: (String unitId, Map<String, dynamic>? metadata) {
    // 広告クリック
  },
  onAdImpression: (String unitId, Map<String, dynamic>? metadata) {
    // 広告表示
  },
  onAdFailedToReceive: (String unitId, AdropErrorCode errorCode) {
    // 広告受信失敗
  },
)

​
コールバックの説明

コールバック説明
onAdReceived広告受信成功時に呼び出し
onAdClicked広告クリック時に呼び出し
onAdImpression広告表示時に呼び出し
onAdFailedToReceive広告受信失敗時に呼び出し

​
メタデータ

onAdReceived、onAdClicked、onAdImpressionコールバックでメタデータを受け取ることができます。 
onAdReceived: (unitId, metadata) {
  debugPrint('クリエイティブID: ${metadata?['creativeId']}');
  debugPrint('トランザクションID: ${metadata?['txId']}');
  debugPrint('キャンペーンID: ${metadata?['campaignId']}');
  debugPrint('遷移先URL: ${metadata?['destinationURL']}');
  debugPrint('クリエイティブ幅: ${metadata?['creativeSizeWidth']}');
  debugPrint('クリエイティブ高さ: ${metadata?['creativeSizeHeight']}');
}
フィールドタイプ説明
creativeIdStringクリエイティブID
txIdStringトランザクションID
campaignIdStringキャンペーンID
destinationURLString遷移先URL
creativeSizeWidthdoubleクリエイティブ幅
creativeSizeHeightdoubleクリエイティブ高さ

​
広告サイズ

バナー広告はユニットに設定したサイズに合わせてコンテナサイズを指定する必要があります。

​
一般的なバナーサイズ

サイズテストユニットID用途
320 x 50PUBLIC_TEST_UNIT_ID_320_50小型バナー
320 x 100PUBLIC_TEST_UNIT_ID_320_100中型バナー

​
固定サイズの使用

SizedBox(
  width: 320,
  height: 100,
  child: bannerView,
)

​
画面幅に合わせる

SizedBox(
  width: MediaQuery.of(context).size.width,
  height: 80,
  child: bannerView,
)

​
サイズ設定

adSizeプロパティを使用してバナービューのサイズを明示的に設定できます。 
@override
void initState() {
  super.initState();

  bannerView = AdropBannerView(
    unitId: 'YOUR_UNIT_ID',
    listener: AdropBannerListener(
      onAdReceived: (unitId, metadata) {
        setState(() {
          isLoaded = true;
        });
      },
    ),
  );

  // コンテキストが準備された後にサイズを設定
  WidgetsBinding.instance.addPostFrameCallback((_) {
    bannerView.adSize = Size(
      MediaQuery.of(context).size.width,
      80,
    );
  });
}

​
エラー処理

広告ロード失敗時に適切なエラー処理を実装してください。 
class _BannerExampleState extends State<BannerExample> {
  bool isLoaded = false;
  AdropErrorCode? errorCode;
  late AdropBannerView bannerView;

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

    bannerView = AdropBannerView(
      unitId: 'YOUR_UNIT_ID',
      listener: AdropBannerListener(
        onAdReceived: (unitId, metadata) {
          setState(() {
            isLoaded = true;
            errorCode = null;
          });
        },
        onAdFailedToReceive: (unitId, error) {
          setState(() {
            isLoaded = false;
            errorCode = error;
          });
        },
      ),
    );

    bannerView.load();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        if (isLoaded)
          SizedBox(
            width: MediaQuery.of(context).size.width,
            height: 80,
            child: bannerView,
          )
        else if (errorCode != null)
          Text('広告ロード失敗: ${errorCode?.code}'),
      ],
    );
  }

  @override
  void dispose() {
    bannerView.dispose();
    super.dispose();
  }
}

​
ベストプラクティス

​
1. リソースの解放

バナービューが不要になったら必ずdispose()を呼び出してください。 
@override
void dispose() {
  bannerView.dispose();
  super.dispose();
}

​
2. 広告の更新

必要に応じて広告を更新できます。 
void refreshAd() {
  setState(() {
    isLoaded = false;
  });
  bannerView.load();
}

​
3. 条件付きレンダリング

広告がロードされるまでバナー領域を非表示にするか、プレースホルダーを表示してください。 
Widget buildBanner() {
  if (isLoaded) {
    return SizedBox(
      width: MediaQuery.of(context).size.width,
      height: 80,
      child: bannerView,
    );
  } else if (isLoading) {
    return const SizedBox(
      height: 80,
      child: Center(child: CircularProgressIndicator()),
    );
  } else {
    return const SizedBox.shrink();
  }
}

​
4. 複数バナーの管理

複数のバナーを使用する場合は、それぞれの状態を管理してください。 
class _MultiBannerState extends State<MultiBanner> {
  late AdropBannerView topBanner;
  late AdropBannerView bottomBanner;
  bool isTopLoaded = false;
  bool isBottomLoaded = false;

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

    topBanner = AdropBannerView(
      unitId: 'TOP_UNIT_ID',
      listener: AdropBannerListener(
        onAdReceived: (_, __) => setState(() => isTopLoaded = true),
      ),
    );

    bottomBanner = AdropBannerView(
      unitId: 'BOTTOM_UNIT_ID',
      listener: AdropBannerListener(
        onAdReceived: (_, __) => setState(() => isBottomLoaded = true),
      ),
    );

    topBanner.load();
    bottomBanner.load();
  }

  @override
  void dispose() {
    topBanner.dispose();
    bottomBanner.dispose();
    super.dispose();
  }

  // ...
}

​
完全な例

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

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

  @override
  State<BannerAdPage> createState() => _BannerAdPageState();
}

class _BannerAdPageState extends State<BannerAdPage> {
  static const double bannerHeight = 80;
  bool isLoaded = false;
  bool isLoading = false;
  AdropErrorCode? errorCode;
  late AdropBannerView bannerView;

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

    bannerView = AdropBannerView(
      unitId: 'PUBLIC_TEST_UNIT_ID_320_100', // テストユニットID
      listener: AdropBannerListener(
        onAdReceived: (unitId, metadata) {
          debugPrint('広告受信成功');
          debugPrint('クリエイティブID: ${metadata?['creativeId']}');
          debugPrint('キャンペーンID: ${metadata?['campaignId']}');
          debugPrint('クリエイティブサイズ: ${bannerView.creativeSize?.width}x${bannerView.creativeSize?.height}');
          setState(() {
            isLoaded = true;
            isLoading = false;
            errorCode = null;
          });
        },
        onAdClicked: (unitId, metadata) {
          debugPrint('広告クリック: ${metadata?['destinationURL']}');
        },
        onAdImpression: (unitId, metadata) {
          debugPrint('広告表示: ${metadata?['creativeId']}');
        },
        onAdFailedToReceive: (unitId, error) {
          debugPrint('広告受信失敗: $error');
          setState(() {
            isLoaded = false;
            isLoading = false;
            errorCode = error;
          });
        },
      ),
    );

    WidgetsBinding.instance.addPostFrameCallback((_) {
      bannerView.adSize = Size(
        MediaQuery.of(context).size.width,
        bannerHeight,
      );
    });
  }

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

  @override
  void dispose() {
    bannerView.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('バナー広告の例'),
      ),
      body: SafeArea(
        child: Column(
          children: [
            // ロードボタン
            Padding(
              padding: const EdgeInsets.all(16),
              child: ElevatedButton(
                onPressed: isLoading ? null : loadAd,
                child: Text(isLoading ? 'ロード中...' : 'バナー広告をロード'),
              ),
            ),

            // 状態表示
            if (errorCode != null)
              Padding(
                padding: const EdgeInsets.all(16),
                child: Text(
                  'エラー: ${errorCode?.code}',
                  style: const TextStyle(color: Colors.red),
                ),
              ),

            // メインコンテンツ
            const Expanded(
              child: Center(
                child: Text('メインコンテンツ領域'),
              ),
            ),

            // バナー広告
            Container(
              width: MediaQuery.of(context).size.width,
              height: bannerHeight,
              color: Colors.grey[200],
              child: isLoaded
                  ? bannerView
                  : isLoading
                      ? const Center(child: CircularProgressIndicator())
                      : const Center(child: Text('広告領域')),
            ),
          ],
        ),
      ),
    );
  }
}

​
次のステップ

ネイティブ広告

UIに合わせてカスタマイズ可能なネイティブ広告を実装する

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

全画面を覆うインタースティシャル広告を実装する

ポップアップ広告

ポップアップ形式の広告を実装する

リファレンス

タイプ、メソッド、エラーコードを参照する