Flutter 배너 광고

배너 광고는 서비스 화면 내에 띠 형태의 이미지 광고를 노출하는 형식입니다. 기기 화면의 상단 또는 하단 등 특정 영역에 노출되며, 유저가 서비스를 이용하는 동안 화면에 노출이 유지됩니다.

다음 가이드를 통해, 서비스에 배너 광고를 노출할 수 있습니다.

이미 등록된 광고 유닛이 있다면 1단계 부터 진행하세요.

0 단계: 콘솔에서 광고 유닛 등록하기

자세한 가이드는, 광고 유닛 생성 가이드를 참고해 주세요.

1. Adrop 콘솔에서 배너 광고 유닛을 생성합니다.

   
2. 광고 유닛 리스트에서 생성된 유닛 아이디를 복사합니다.

   

1 단계 : 배너 광고 노출하기

로컬 환경에서 배너 노출을 확인하고 싶다면, 하단의 TEST_UNIT_ID를 사용해주세요. 자세한 예시는 여기서 확인하실 수 있습니다.

Ad type	Ad unit ID
Banner (375X80)	PUBLIC_TEST_UNIT_ID_375_80
Banner (320X50)	PUBLIC_TEST_UNIT_ID_320_50
Banner (320X100)	PUBLIC_TEST_UNIT_ID_320_100

class YourComponentState extends State<YourComponent> {
  
  final unitId = "YOUR UNIT ID or TEST UNIT ID";
  bool isLoaded = false;
  AdropBannerView? bannerView;

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

    bannerView = AdropBannerView(
      unitId: unitId,
      listener: AdropBannerListener(
        onAdReceived: (unitId) {
          setState(() {
            isLoaded = true;
          });
        },
        onAdFailedToReceive: (unitId, error) {
          setState(() {
            isLoaded = false;
          });
        },
      ),
    );
    bannerView!.load();
  }
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextButton(
            onPressed: () {
              bannerView!.load();
            },
            child: const Text('Reload Ad!'),
        ),
        bannerView != null && isLoaded ?
          SizedBox(
              width: screenWidth,
              height: 80,
              child: bannerView,
          ) : Container(),
      ],
    );
  }
}

배너 광고 Dispose

AdropBannerView에 더 이상 액세스할 필요가 없으면 다음과 같이 Dispose해야 합니다.

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

적용 확인하기

console에서 발급받은 unitId가 한 번이라도 request 가 들어가면 성공적으로 연결됩니다.

광고 유닛에 연결된 광고가 없다면, 배너가 랜더링 되지 않습니다. 따라서 배너가 정상적으로 랜더링 되는지 확인하고 싶으면, TEST_UNIT_ID 를 사용해 주세요.

TEST_UNIT_ID 를 사용하면 배너 랜더링 확인은 할 수 있지만, console과 연결되지는 않습니다. 따라서 성공적인 연결을 확인하려면 콘솔에 등록한 광고 유닛의 아이디를 적용해 주시고, 하단 이미지 처럼 콘솔을 확인해 주세요.