App-Start-Anzeigen

App-Start-Anzeigen sind ein spezielles Anzeigenformat für Publisher, die ihre Ladebildschirme monetarisieren möchten. App-Start-Anzeigen können jederzeit geschlossen werden. Sie werden eingeblendet, wenn Nutzer Ihre App in den Vordergrund bringen.

Bei App-Start-Anzeigen ist automatisch das Branding Ihrer App zu sehen, damit die Nutzer wissen, dass sie sich in Ihrer App befinden. Hier ist ein Beispiel für eine App-Start-Anzeige:

Vorbereitung

• Flutter-Plug-in 0.13.6 oder höher
• Führen Sie die Schritte unter Jetzt starten aus. In Ihrer Flutter-App sollte das Google Mobile Ads Flutter-Plug-in bereits importiert sein.

Verwenden Sie immer Testanzeigen

Verwenden Sie beim Erstellen und Testen Ihrer Apps Testanzeigen anstelle von aktiven Produktionsanzeigen. Andernfalls kann Ihr Konto gesperrt werden.

Am einfachsten lassen sich Testanzeigen laden, wenn Sie unsere speziellen Anzeigenblock-IDs für Anzeigen mit Prämie für Android- und iOS-Geräte verwenden:

Android

ca-app-pub-3940256099942544/9257395921

iOS

ca-app-pub-3940256099942544/5575463023

Sie wurden speziell so konfiguriert, dass für jede Anfrage Testanzeigen zurückgegeben werden. Sie können sie in Ihren eigenen Apps verwenden, während Sie Code schreiben, testen und Fehler beheben. Ersetzen Sie sie vor der Veröffentlichung Ihrer App durch Ihre eigene Anzeigenblock-ID.

Implementierung

Die wichtigsten Schritte zur Implementierung von App-Start-Anzeigen sind:

1. Erstellen Sie eine Dienstklasse, die eine Anzeige lädt, bevor Sie sie präsentieren müssen.
2. Laden Sie eine Anzeige.
3. Registrieren Sie sich für Callbacks und zeigen Sie die Anzeige an.
4. Abonnieren Sie AppStateEventNotifier.appStateStream, um die Anzeige bei Ereignissen im Vordergrund zu präsentieren.

Dienstprogrammklasse erstellen

Erstellen Sie eine neue Klasse namens AppOpenAdManager, um die Anzeige zu laden. Diese Klasse verwaltet eine Instanzvariable, um eine geladene Anzeige und die Anzeigenblock-ID für jede Plattform im Blick zu behalten.

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

Anzeige laden

Die App-Start-Anzeige muss bereit sein, bevor Nutzer Ihre App aufrufen. Implementieren Sie eine Dienstklasse, um Anzeigenanfragen zu senden, bevor die Anzeige ausgeliefert werden muss.

Zum Laden einer Anzeige wird die Methode load der Klasse AppOpenAd verwendet. Für die Lademethode sind eine Anzeigenblock-ID, ein Ausrichtungsmodus, ein AdRequest-Objekt und ein Abschluss-Handler erforderlich, der aufgerufen wird, wenn das Laden der Anzeige erfolgreich oder fehlgeschlagen ist. Das geladene AppOpenAd-Objekt wird als Parameter im Abschluss-Handler bereitgestellt. Das folgende Beispiel zeigt, wie eine AppOpenAd geladen wird.

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

Anzeige anzeigen und Callbacks für den Vollbildmodus verarbeiten

Bevor die Anzeige ausgeliefert wird, müssen Sie für jedes Anzeigenereignis, das Sie erfassen möchten, eine FullScreenContentCallback registrieren.

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

Wenn ein Nutzer zu Ihrer App zurückkehrt, nachdem er sie durch Klicken auf eine Anzeige für die App-Öffnung verlassen hat, darf ihm keine weitere Anzeige für die App-Öffnung präsentiert werden.

Auf Ereignisse im Vordergrund der App warten

Wenn Sie über Ereignisse informiert werden möchten, bei denen die App im Vordergrund ist, müssen Sie AppStateEventNotifier.appStateStream abonnieren und auf foreground-Ereignisse achten.

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

Jetzt können Sie AppLifecycleReactor initialisieren und auf Änderungen am App-Lebenszyklus achten. Beispiel:

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

Ablauf von Anzeigen berücksichtigen

Wichtig: Anzeigenreferenzen in der offenen Betaversion der App laufen nach vier Stunden ab. Anzeigen, die mehr als vier Stunden nach dem Zeitpunkt der Anfrage gerendert werden, sind nicht länger gültig und erzielen möglicherweise keine Einnahmen. Diese Frist wird sorgfältig geprüft und kann sich in zukünftigen Betaversionen des Open App-Formats ändern.

Damit keine abgelaufene Anzeige ausgeliefert wird, fügen Sie der AppOpenAdManager einen Zeitstempel hinzu, damit Sie prüfen können, wie lange es her ist, dass Ihre Anzeige geladen wurde. Anhand dieses Zeitstempels können Sie dann prüfen, ob die Anzeige noch gültig ist.

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

Kaltstarts und Ladebildschirme

In der bisherigen Dokumentation wird davon ausgegangen, dass Sie App-Start-Anzeigen nur dann präsentieren, wenn Nutzer Ihre App in den Vordergrund stellen, während sie im Arbeitsspeicher angehalten ist. Ein Kaltstart tritt auf, wenn Ihre App gestartet wird, aber zuvor nicht im Arbeitsspeicher angehalten wurde.

Ein Beispiel für einen Kaltstart ist, wenn ein Nutzer Ihre App zum ersten Mal öffnet. Bei Kaltstarts gibt es keine zuvor geladene App-Start-Anzeige, die sofort ausgeliefert werden kann. Die Verzögerung zwischen dem Anfordern einer Anzeige und dem Empfangen einer Anzeige kann dazu führen, dass Nutzer Ihre App kurz nutzen können, bevor sie von einer Anzeige überrascht werden, die nicht zum Kontext passt. Dies sollte vermieden werden, da es die Nutzerfreundlichkeit beeinträchtigt.

Die beste Möglichkeit, App-Start-Anzeigen bei Kaltstarts zu verwenden, ist ein Ladebildschirm, auf dem die Spiel- oder App-Assets geladen werden, und die Anzeige wird nur auf dem Ladebildschirm eingeblendet. Wenn Ihre App vollständig geladen wurde und der Nutzer zu den Hauptinhalten Ihrer App weitergeleitet wurde, darf die Anzeige nicht ausgeliefert werden.

Wichtig :Damit App-Assets auch während der Auslieferung der App-Start-Anzeige geladen werden können, müssen sie immer in einem Hintergrund-Thread geladen werden.

Best Practices

Mit App-Start-Anzeigen können Sie den Ladebildschirm Ihrer App, das Starten der App und den App-Wechsel monetarisieren. Beachten Sie dabei jedoch die Best Practices, damit Nutzer Ihre App gerne verwenden. Beachten Sie dabei Folgendes:

• Blenden Sie die erste App-Start-Anzeige ein, nachdem die Nutzer Ihre App einige Male verwendet haben.
• Präsentieren Sie App-Start-Anzeigen zu Zeiten, in denen Nutzer sonst auf das Laden Ihrer App warten würden.
• Wenn sich die App-Start-Anzeige auf einem Ladebildschirm befindet und der Ladevorgang abgeschlossen ist, bevor die Anzeige beendet wird, können Sie den Ladebildschirm mit dem Ereignis-Handler onAdDismissedFullScreenContent beenden.

Vollständiges Beispiel auf GitHub

App-Start