이 페이지는 Cloud Translation API를 통해 번역되었습니다.

앱 오프닝 광고

앱 오프닝 광고는 앱 로드 화면에서 수익을 올리려는 게시자를 위해 개발된 특별한 광고 형식입니다. 앱 오프닝 광고는 언제든지 닫을 수 있으며 사용자가 앱을 포그라운드로 가져올 때 표시되도록 설계되었습니다.

앱 오프닝 광고는 사용자가 앱을 사용 중임을 알 수 있도록 작은 브랜딩 영역을 자동으로 표시합니다. 앱 오프닝 광고는 다음과 같이 게재됩니다.

기본 요건

Flutter 플러그인 0.13.6 이상
시작하기를 완료합니다. Flutter 앱에는 이미 Google 모바일 광고 Flutter 플러그인이 있어야 합니다.

항상 테스트 광고로 테스트

앱을 빌드하고 테스트할 때는 운영 중인 실제 광고 대신 테스트 광고를 사용하세요. 이렇게 하지 않으면 계정이 정지될 수 있습니다.

테스트 광고를 로드하는 가장 쉬운 방법은 Android 및 iOS 보상형 광고 전용 테스트 광고 단위 ID를 사용하는 것입니다.

Android

ca-app-pub-3940256099942544/9257395921

iOS

ca-app-pub-3940256099942544/5575463023

이 ID는 모든 요청에 대해 테스트 광고를 반환하도록 특별히 구성되었으며, 코딩, 테스트 및 디버깅 중에 앱에서 자유롭게 사용할 수 있습니다. 앱을 게시하기 전에 이 ID를 자체 광고 단위 ID로 바꿔야 합니다.

구현

앱 오프닝 광고를 통합하는 기본 단계는 다음과 같습니다.

게재하려는 광고를 로드하는 유틸리티 클래스를 생성합니다.
광고를 로드합니다.
콜백을 등록하고 광고를 표시합니다.
포그라운드 이벤트 중에 광고를 표시하려면 AppStateEventNotifier.appStateStream를 구독합니다.

유틸리티 클래스 만들기

광고를 로드할 새 클래스(AppOpenAdManager)를 만듭니다. 이 클래스는 플랫폼별로 로드된 광고 및 광고 단위 ID를 추적하는 인스턴스 변수를 관리합니다.

import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'dart:io' show Platform;

class AppOpenAdManager {
  
  String adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/9257395921'
    : 'ca-app-pub-3940256099942544/5575463023';
  
  AppOpenAd? _appOpenAd;
  bool _isShowingAd = false;

  /// Load an AppOpenAd.
  void loadAd() {
    // We will implement this below.
  }

  /// Whether an ad is available to be shown.
  bool get isAdAvailable {
    return _appOpenAd != null;
  }
}

광고 로드

사용자가 앱을 열기 전에 앱 오프닝 광고가 준비된 상태여야 합니다. 광고를 표시하려면 광고를 요청하는 유틸리티 클래스를 먼저 구현하세요.

광고는 AppOpenAd 클래스의 load 메서드를 사용하여 로드됩니다. 로드 메서드가 작동하려면 광고 단위 ID, 방향 모드, AdRequest 객체, 광고 로드에 성공하거나 실패할 때 호출되는 완료 핸들러가 필요합니다. 로드된 AppOpenAd 객체는 완료 핸들러의 매개변수로 제공됩니다. 다음 예는 AppOpenAd를 로드하는 방법을 보여줍니다.

public class AppOpenAdManager {
  ...

  /// Load an AppOpenAd.
  void loadAd() {
    AppOpenAd.load(
      adUnitId: adUnitId,
      adRequest: AdRequest(),
      adLoadCallback: AppOpenAdLoadCallback(
        onAdLoaded: (ad) {
          _appOpenAd = ad;
        },
        onAdFailedToLoad: (error) {
          print('AppOpenAd failed to load: $error');
          // Handle the error.
        },
      ),
    );
  }
}

광고 표시 및 전체 화면 콜백 처리

광고를 표시하기 전에 수신하려는 각 광고 이벤트의 FullScreenContentCallback을 등록합니다.

public class AppOpenAdManager {
  ...

  public void showAdIfAvailable() {
    if (!isAdAvailable) {
      print('Tried to show ad before available.');
      loadAd();
      return;
    }
    if (_isShowingAd) {
      print('Tried to show ad while already showing an ad.');
      return;
    }
    // Set the fullScreenContentCallback and show the ad.
    _appOpenAd!.fullScreenContentCallback = FullScreenContentCallback(
      onAdShowedFullScreenContent: (ad) {
        _isShowingAd = true;
        print('$ad onAdShowedFullScreenContent');
      },
      onAdFailedToShowFullScreenContent: (ad, error) {
        print('$ad onAdFailedToShowFullScreenContent: $error');
        _isShowingAd = false;
        ad.dispose();
        _appOpenAd = null;
      },
      onAdDismissedFullScreenContent: (ad) {
        print('$ad onAdDismissedFullScreenContent');
        _isShowingAd = false;
        ad.dispose();
        _appOpenAd = null;
        loadAd();
      },
    );
  }
}

사용자가 앱 오프닝 광고를 클릭하여 앱을 떠났다가 돌아온 경우 동일한 사용자에게 앱 오프닝 광고가 다시 표시되지 않게 하세요.

앱 포그라운드 이벤트 수신

앱 포그라운드 이벤트 알림을 받으려면 AppStateEventNotifier.appStateStream를 구독하고 foreground 이벤트를 수신 대기해야 합니다.

import 'package:app_open_example/app_open_ad_manager.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

/// Listens for app foreground events and shows app open ads.
class AppLifecycleReactor {
  final AppOpenAdManager appOpenAdManager;

  AppLifecycleReactor({required this.appOpenAdManager});

  void listenToAppStateChanges() {
    AppStateEventNotifier.startListening();
    AppStateEventNotifier.appStateStream
        .forEach((state) => _onAppStateChanged(state));
  }

  void _onAppStateChanged(AppState appState) {
    // Try to show an app open ad if the app is being resumed and
    // we're not already showing an app open ad.
    if (appState == AppState.foreground) {
      appOpenAdManager.showAdIfAvailable();
    }
  }
}

이제 AppLifecycleReactor를 초기화하고 앱 수명 주기 변경을 수신 대기할 수 있습니다. 예를 들어 홈페이지에서 다음을 실행합니다.

import 'package:app_open_example/app_open_ad_manager.dart';
import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

import 'app_lifecycle_reactor.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App Open Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'App Open Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

/// Example home page for an app open ad.
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  late AppLifecycleReactor _appLifecycleReactor;

  @override
  void initState() {
    super.initState();
    
    AppOpenAdManager appOpenAdManager = AppOpenAdManager()..loadAd();
    _appLifecycleReactor = AppLifecycleReactor(
      appOpenAdManager: appOpenAdManager);
  }

광고 만료 고려

만료된 광고가 표시되지 않도록 하려면 AppOpenAdManager에 타임스탬프를 추가하여 광고가 로드된 후 경과한 시간을 확인해야 합니다. 그런 다음 이 타임스탬프를 이용해 광고가 여전히 유효한지 확인하세요.

/// Utility class that manages loading and showing app open ads.
class AppOpenAdManager {
  ...
  
  /// Maximum duration allowed between loading and showing the ad.
  final Duration maxCacheDuration = Duration(hours: 4);

  /// Keep track of load time so we don't show an expired ad.
  DateTime? _appOpenLoadTime;
  
  ...

  /// Load an AppOpenAd.
  void loadAd() {
    AppOpenAd.load(
      adUnitId: adUnitId,
      orientation: AppOpenAd.orientationPortrait,
      adRequest: AdRequest(),
      adLoadCallback: AppOpenAdLoadCallback(
        onAdLoaded: (ad) {
          print('$ad loaded');
          _appOpenLoadTime = DateTime.now();
          _appOpenAd = ad;
        },
        onAdFailedToLoad: (error) {
          print('AppOpenAd failed to load: $error');
        },
      ),
    );
  }

  /// Shows the ad, if one exists and is not already being shown.
  ///
  /// If the previously cached ad has expired, this just loads and caches a
  /// new ad.
  void showAdIfAvailable() {
    if (!isAdAvailable) {
      print('Tried to show ad before available.');
      loadAd();
      return;
    }
    if (_isShowingAd) {
      print('Tried to show ad while already showing an ad.');
      return;
    }
    if (DateTime.now().subtract(maxCacheDuration).isAfter(_appOpenLoadTime!)) {
      print('Maximum cache duration exceeded. Loading another ad.');
      _appOpenAd!.dispose();
      _appOpenAd = null;
      loadAd();
      return;
    }
    // Set the fullScreenContentCallback and show the ad.
    _appOpenAd!.fullScreenContentCallback = FullScreenContentCallback(...);
    _appOpenAd!.show();
  }
}

콜드 스타트 및 로드 화면

지금까지 이 문서에서는 메모리에 일시중지된 상태로 있는 앱을 사용자가 포그라운드로 가져올 때만 앱 오프닝 광고가 게재된다고 가정했습니다. '콜드 스타트'는 앱이 실행되었지만 실행되기 전에 앱이 일시중지 상태로 메모리에 있지 않은 경우 발생합니다.

콜드 스타트의 한 예는 사용자가 앱을 처음으로 열 때입니다. 콜드 스타트 상황에서는 즉시 표시할 수 있도록 미리 로드해둔 앱 오프닝 광고가 없습니다. 광고를 요청하고 광고를 수신하는 시점 사이에 지연 시간이 발생하면 사용자가 그 잠깐 동안 앱을 사용하다가 갑작스럽게 광고가 게재되며 불편을 겪을 수 있습니다. 이는 사용자 경험에 악영향을 미치므로 피해야 합니다.

콜드 스타트가 발생할 때 앱 오프닝 광고를 사용하는 바람직한 방법은 게임 또는 앱 애셋을 로드하기 위한 로드 화면을 사용하고 해당 로드 화면에만 광고를 표시하는 것입니다. 앱에서 로드가 완료되고 사용자에게 앱의 주요 콘텐츠가 표시된 후에는 광고가 게재되지 않아야 합니다.

권장사항

앱 오프닝 광고를 사용하면 앱을 처음 실행할 때와 앱을 전환하는 동안 앱의 로드 화면으로 수익을 창출할 수 있지만, 사용자가 앱을 사용하는 데 불편하지 않도록 권장사항을 고려하는 것이 중요합니다. 이러한 권장사항은 다음과 같습니다.

사용자가 앱을 몇 번 사용한 후에 첫 앱 오프닝 광고를 게재하세요.
사용자가 앱이 로드되기를 기다리는 동안 앱 오프닝 광고를 게재하세요.
앱 오프닝 광고 아래에 로드 화면이 있고 광고가 닫히기 전에 화면 로드가 완료되면 onAdDismissedFullScreenContent 이벤트 핸들러로 로드 화면을 닫는 것이 좋습니다.

GitHub의 전체 예

앱 오프닝 광고