Reklamy wyświetlane przy otwarciu aplikacji

Wybierz platformę: Android iOS Unity Flutter Android (starsza wersja)

Reklamy wyświetlane przy otwarciu aplikacji to specjalny format reklam przeznaczony dla wydawców, którzy chcą zarabiać na ekranach wczytywania aplikacji. Reklamy wyświetlane przy otwarciu aplikacji można zamknąć w każdej chwili. Są one zaprojektowane tak, aby wyświetlać się, gdy użytkownicy otwierają aplikację na pierwszym planie.

Reklamy wyświetlane przy otwarciu aplikacji automatycznie wyświetlają nieduże pole z oznaczeniem marki, dzięki czemu użytkownicy wiedzą, że znajdują się w Twojej aplikacji. Oto przykład reklamy wyświetlanej przy otwarciu aplikacji:

Wymagania wstępne

Zanim przejdziesz dalej, wykonaj te czynności:

• Zainstaluj wtyczkę Flutter w wersji 0.13.6 lub nowszej.
• Skonfiguruj Google Mobile Ads Flutter Plugin. Aplikacja Flutter musi mieć zaimportowany pakiet Google Mobile Ads Flutter Plugin.

Zawsze przeprowadzaj testy z użyciem reklam testowych

Podczas tworzenia i testowania aplikacji używaj reklam testowych, a nie aktywnych reklam produkcyjnych. Jeśli tego nie zrobisz, Twoje konto może zostać zawieszone.

Najłatwiejszym sposobem wczytywania reklam testowych jest użycie naszych specjalnych identyfikatorów testowych jednostek reklamowych dla reklam z nagrodą na Androida i iOS:

• /21775744923/example/app-open

Zostały one specjalnie skonfigurowane tak, aby zwracać reklamy testowe w przypadku każdego żądania. Możesz ich swobodnie używać we własnych aplikacjach podczas kodowania, testowania i debugowania. Pamiętaj, aby przed opublikowaniem aplikacji zastąpić je własnym identyfikatorem jednostki reklamowej.

Implementacja

Główne etapy integracji reklam wyświetlanych przy otwarciu aplikacji:

1. Utwórz klasę pomocniczą, która wczytuje reklamę, zanim będzie trzeba ją wyświetlić.
2. Wczytaj reklamę.
3. Zarejestruj się, aby otrzymywać wywołania zwrotne, i wyświetlaj reklamę.
4. Zasubskrybuj AppStateEventNotifier.appStateStream, aby wyświetlać reklamy podczas zdarzeń przełączenia aplikacji na pierwszy plan.

Tworzenie klasy pomocniczej

Aby wczytać reklamę, utwórz nową klasę o nazwie AppOpenAdManager. Ta klasa zarządza zmienną instancji, aby śledzić wczytaną reklamę i identyfikator jednostki reklamowej na każdej platformie.

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

class AppOpenAdManager {
  
  String adUnitId = '/21775744923/example/app-open';
  
  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;
  }
}

Wczytywanie reklamy

Reklama wyświetlana przy otwarciu aplikacji musi być gotowa, zanim użytkownicy wejdą do aplikacji. Zaimplementuj klasę pomocniczą, aby wysyłać żądania reklamy, zanim będzie trzeba ją wyświetlić.

Reklamę wczytuje się za pomocą metody loadWithAdManagerAdRequest w klasie AppOpenAd. Metoda wczytywania wymaga identyfikatora jednostki reklamowej, trybu orientacji, obiektu AdManagerAdRequest i procedury obsługi zakończenia, która jest wywoływana, gdy wczytywanie reklamy się powiedzie lub nie. Wczytany obiekt AppOpenAd jest podawany jako parametr w procedurze obsługi zakończenia. Poniższy przykład pokazuje, jak wczytać AppOpenAd.

public class AppOpenAdManager {
  ...

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

Wyświetlanie reklamy i obsługa wywołań zwrotnych na pełnym ekranie

Przed wyświetleniem reklamy zarejestruj obiekt FullScreenContentCallback dla każdego zdarzenia reklamy, które chcesz śledzić.

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();
      },
    );
  }
}

Jeśli użytkownik wróci do aplikacji po jej opuszczeniu przez kliknięcie reklamy wyświetlanej przy otwarciu aplikacji, upewnij się, że nie zobaczy kolejnej reklamy tego typu.

Nasłuchiwanie zdarzeń przełączenia aplikacji na pierwszy plan

Aby otrzymywać powiadomienia o zdarzeniach przełączenia aplikacji na pierwszy plan, musisz zasubskrybować AppStateEventNotifier.appStateStream i nasłuchiwać zdarzeń 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();
    }
  }
}

Teraz możesz zainicjować AppLifecycleReactor i zacząć monitorować zmiany cyklu życia aplikacji. Na przykład na stronie głównej:

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);
  }

Uwzględnij czas wygaśnięcia reklam

Ważna uwaga: odniesienia do reklam w otwartej wersji beta aplikacji wygasają po 4 godzinach. Reklamy renderowane po upływie 4 godzin od żądania nie będą ważne i mogą nie wygenerować przychodów. Ten limit czasowy jest dokładnie analizowany i może ulec zmianie w przyszłych wersjach beta formatu reklamy wyświetlanej przy otwarciu aplikacji.

Aby uniknąć wyświetlania wygasłych reklam, dodaj sygnaturę czasową do obiektu AppOpenAdManager, aby móc sprawdzać, ile czasu minęło od wczytania reklamy. Następnie użyj tej sygnatury czasowej, aby sprawdzić, czy reklama jest nadal ważna.

/// 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.loadWithAdManagerAdRequest(
      adUnitId: adUnitId,
      orientation: AppOpenAd.orientationPortrait,
      adManagerAdRequest: AdManagerAdRequest(),
      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();
  }
}

Uruchomienia „na zimno” i ekrany wczytywania

Dotychczasowa dokumentacja zakłada, że reklamy wyświetlane przy otwarciu aplikacji są widoczne tylko wtedy, gdy użytkownicy otwierają aplikację, która jest zawieszona w pamięci. „Uruchomienia na zimno” występują, gdy aplikacja jest uruchamiana, ale nie została wcześniej zawieszona w pamięci.

Przykładem uruchomienia „na zimno” jest pierwsze uruchomienie aplikacji przez użytkownika. W przypadku uruchamiania „na zimno” nie będziesz mieć wcześniej wczytanej reklamy wyświetlanej przy otwarciu aplikacji, która jest gotowa do natychmiastowego wyświetlenia. Opóźnienie między żądaniem reklamy a jej otrzymaniem może spowodować, że użytkownicy będą mogli przez chwilę korzystać z aplikacji, zanim niespodziewanie pojawi się reklama niezwiązana z kontekstem. Należy tego unikać, ponieważ jest to niekorzystne dla użytkowników.

Zalecanym sposobem używania reklam wyświetlanych przy otwarciu aplikacji podczas uruchamiania na zimno jest użycie ekranu wczytywania do wczytania zasobów gry lub aplikacji i wyświetlanie reklamy tylko na ekranie wczytywania. Jeśli aplikacja zakończyła wczytywanie i przekierowała użytkownika do głównej treści, nie wyświetlaj reklamy.

Ważne: aby kontynuować wczytywanie komponentów aplikacji podczas wyświetlania reklamy wyświetlanej przy otwarciu aplikacji, zawsze wczytuj komponenty w wątku w tle.

Sprawdzone metody

Reklamy wyświetlane przy otwarciu aplikacji pomagają zarabiać na ekranie wczytywania aplikacji, gdy aplikacja jest uruchamiana po raz pierwszy i podczas przełączania aplikacji, ale ważne jest, aby pamiętać o sprawdzonych metodach, dzięki którym użytkownicy będą chętnie korzystać z aplikacji. Najlepiej:

• Pokazuj pierwszą reklamę wyświetlaną przy otwarciu aplikacji dopiero wtedy, gdy użytkownicy skorzystają już kilka razy z Twojej aplikacji.
• Wyświetlaj reklamy wyświetlane przy otwarciu aplikacji w czasie, gdy użytkownicy czekają na wczytanie aplikacji.
• Jeśli ekran wczytywania znajduje się pod reklamą wyświetlaną przy otwarciu aplikacji i wczyta się przed zamknięciem reklamy, możesz go zamknąć, korzystając z modułu obsługi zdarzeń onAdDismissedFullScreenContent.