App-Start-Anzeigen

Plattform auswählen:Android iOS Unity Flutter

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

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.

Immer Testanzeigen verwenden

Verwenden Sie beim Entwickeln und Testen Ihrer Apps Testanzeigen anstelle von Live-Anzeigen. Andernfalls kann es zu einer Kontosperrung kommen.

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

Android

ca-app-pub-3940256099942544/9257395921

iOS

ca-app-pub-3940256099942544/5575463023

Sie wurden speziell konfiguriert, um für jede Anfrage Testanzeigen zurückzugeben. Sie können sie beim Programmieren, Testen und Debuggen in Ihren eigenen Apps verwenden. Denken Sie daran, sie vor der Veröffentlichung Ihrer App durch Ihre eigene Anzeigenblock-ID zu ersetzen.

Implementierung

Die wichtigsten Schritte zum Einbinden von App-Start-Anzeigen sind:

  1. Erstellen Sie eine Hilfsklasse, die eine Anzeige lädt, bevor Sie sie präsentieren müssen.
  2. Laden Sie eine Anzeige.
  3. Callbacks registrieren und Anzeige präsentieren
  4. Abonnieren Sie AppStateEventNotifier.appStateStream, um die Anzeige bei Foregrounding-Ereignissen zu präsentieren.

Hilfsklasse erstellen

Erstellen Sie eine neue Klasse mit dem Namen AppOpenAdManager, um die Anzeige zu laden. Diese Klasse verwaltet eine Instanzvariable, um eine geladene Anzeige und die Anzeigenblock-ID für jede Plattform zu erfassen.

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

Ihre App-Start-Anzeige muss bereit sein, bevor Nutzer Ihre App aufrufen. Implementieren Sie eine Hilfsklasse, um Anzeigenanfragen zu senden, bevor Sie die Anzeige einblenden müssen.

Das Laden einer Anzeige erfolgt mit der Methode load der Klasse AppOpenAd. Für die Methode „load“ sind eine Anzeigenblock-ID, ein Ausrichtungsmodus, ein AdRequest-Objekt und ein Completion-Handler erforderlich, der aufgerufen wird, wenn das Laden der Anzeige erfolgreich ist oder fehlschlägt. Das geladene AppOpenAd-Objekt wird als Parameter im Abschluss-Handler bereitgestellt. Das folgende Beispiel zeigt, wie Sie eine AppOpenAd laden.

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 einblenden und Vollbild-Callbacks verarbeiten

Bevor die Anzeige ausgeliefert wird, müssen Sie für jedes Anzeigenereignis, auf das Sie reagieren möchten, einen 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 zum Öffnen der App verlassen hat, darf ihm keine weitere Anzeige zum Öffnen der App präsentiert werden.

Auf Ereignisse zum Wechsel in den Vordergrund warten

Wenn Sie über Ereignisse im Vordergrund der App benachrichtigt werden möchten, müssen Sie AppStateEventNotifier.appStateStream abonnieren und auf foreground-Ereignisse warten.

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 warten. 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

Fügen Sie dem AppOpenAdManager einen Zeitstempel hinzu, damit Sie prüfen können, wie lange es her ist, dass Ihre Anzeige geladen wurde. So können Sie verhindern, dass eine abgelaufene Anzeige ausgeliefert wird. Anschließend können Sie anhand des Zeitstempels 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

Bisher wird in der Dokumentation davon ausgegangen, dass Sie App-Start-Anzeigen nur einblenden, wenn Nutzer Ihre App in den Vordergrund holen, nachdem sie im Arbeitsspeicher angehalten wurde. Von einem „Kaltstart“ spricht man, wenn Ihre App gestartet wird, aber nicht zuvor im Arbeitsspeicher angehalten wurde.

Ein Beispiel für einen Kaltstart ist, wenn ein Nutzer Ihre App zum ersten Mal öffnet. Bei Kaltstarts ist keine zuvor geladene App-Start-Anzeige verfügbar, die sofort ausgeliefert werden kann. Die Verzögerung zwischen dem Anfordern einer Anzeige und dem Erhalt einer Anzeige kann dazu führen, dass Nutzer Ihre App kurzzeitig verwenden können, bevor sie von einer Anzeige überrascht werden, die nicht zum Kontext passt. Dies sollte vermieden werden, da es zu einer schlechten Nutzererfahrung führt.

Die bevorzugte Methode für App-Start-Anzeigen bei Kaltstarts ist die Verwendung eines Ladebildschirms zum Laden der Assets Ihres Spiels oder Ihrer App. Die Anzeige wird dann nur auf dem Ladebildschirm eingeblendet. Wenn Ihre App vollständig geladen wurde und der Nutzer zum Hauptinhalt Ihrer App weitergeleitet wurde, darf die Anzeige nicht mehr präsentiert werden.

Best Practices

Mit App-Start-Anzeigen können Sie den Ladebildschirm Ihrer App monetarisieren, wenn die App zum ersten Mal gestartet wird und wenn Nutzer zwischen Apps wechseln. Dabei ist es wichtig, Best Practices zu beachten, damit Ihre Nutzer die App gerne verwenden. Es empfiehlt sich, Folgendes zu tun:

  • Blenden Sie die erste App-Start-Anzeige ein, nachdem die Nutzer Ihre App einige Male verwendet haben.
  • Blenden Sie App-Start-Anzeigen ein, wenn Ihre Nutzer ansonsten darauf warten müssten, dass Ihre App geladen wird.
  • 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 im onAdDismissedFullScreenContent-Ereignishandler beenden.

Vollständiges Beispiel auf GitHub

App-Start