Flutter 팝업 광고

팝업 지면은 전면광고와 유사하게 앱을 완전히 덮으면서 노출됩니다. 팝업 지면은 위치에 따라 하단, 중앙 두가지 타입의 UI를 제공하고 있어 원하는 기획에 맞게 선택하여 연동할 수 있습니다.

Adrop 콘솔에서 광고 유닛 생성 할 때 타입을 선택할 수 있어요.

다음 가이드를 통해 서비스에 팝업 광고를 적용할 수 있습니다.

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

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

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

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

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

   

1 단계: (선택 사항) 이벤트 리스너 선언하기

final AdropPopupListener listener = AdropPopupListener(
    onAdReceived: (ad) =>
        debugPrint('Adrop Popup Ad loaded with unitId ${ad.unitId}!'),
    onAdFailedToReceive: (ad, errorCode) => 
        debugPrint('error in ${ad.unitId} while loading: $errorCode'),
    onAdFailedToShowFullScreen: (ad, errorCode) =>
        debugPrint('error in ${ad.unitId} while showing: $errorCode'),
    onAdClicked: (ad) ({
        ad.dispose();
    }),   
    ...
);

2단계: 팝업 광고 노출하기

로컬 환경에서 배너 노출을 확인하고 싶다면, 아래의 TEST_UNIT_ID를 사용해주세요.

자세한 예시는 Github에서 확인하실 수 있습니다.

Ad type	Ad unit ID
Popup (bottom)	PUBLIC_TEST_UNIT_ID_POPUP_BOTTOM
Popup (center)	PUBLIC_TEST_UNIT_ID_POPUP_CENTER

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

  @override
  State<StatefulWidget> createState() => _YourComponentState();
}

class _YourComponentState extends State<YourComponent> {
  final AdropPopupAd rewardedAd = AdropPopupAd(
    // 0 단계에서 복사한 UNIT_ID를 입력해주세요. 테스트를 원한다면, 가이드 위의 테스트 유닛 아이디를 사용해 주세요.
    unitId: 'YOUR_UNIT_ID or TEST_UNIT_ID', 
    listener: listener,
    closeTextColor: your_color        // optional Color
    hideForTodayTextColor: your_color // optional Color
    backgroundColor: your_color       // optional Color
  );

  @override
  void initState() {
    super.initState();
    popupAd.load();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextButton(
          onPressed: () {
            final isLoaded = popupAd.isLoaded ?? false;
            if (isLoaded) {
              popupAd.show();
            } else {
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text('popup ad is loading...'))
              );
            }
          },
          child: const Text('display ad'),
        ),
      ),
    );
  }
}

팝업 광고 Dispose

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

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

적용 확인하기

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

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

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