App-Start-Anzeigen

Plattform auswählen: Android iOS Unity Flutter Android (Legacy)

App-Start-Anzeigen sind ein spezielles Anzeigenformat für Publisher, die mit den Ladebildschirmen ihrer App Einnahmen erzielen möchten. App-Start-Anzeigen können jederzeit geschlossen werden und 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

Bevor Sie fortfahren, führen Sie die folgenden Schritte aus:

Immer mit Testanzeigen testen

Verwenden Sie beim Erstellen und Testen Ihrer Apps Testanzeigen anstelle von Live-Anzeigen. Andernfalls kann es zu einer Sperrung Ihres Kontos kommen.

Testanzeigen lassen sich am einfachsten mit unseren speziellen Testanzeigenblock-IDs für Anzeigen mit Prämie unter Android und iOS laden:

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 beim Programmieren, Testen und Debuggen verwenden. Ersetzen Sie sie durch Ihre eigene Anzeigenblock-ID, bevor Sie Ihre App veröffentlichen.

Implementierung

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

  1. Erstellen Sie eine Dienstprogrammklasse, die eine Anzeige lädt, bevor sie präsentiert werden muss.
  2. Anzeige laden
  3. Registrieren Sie sich für Callbacks und lassen Sie die Anzeige einblenden.
  4. Abonnieren Sie AppStateEventNotifier.appStateStream, damit die Anzeige bei Wechseln in den Vordergrund eingeblendet wird.

Utility-Klasse 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 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

Ihre App-Start-Anzeige muss bereit sein, bevor Nutzer Ihre App öffnen. Implementieren Sie eine Dienstprogrammklasse, um Anzeigenanfragen zu stellen, bevor die Anzeige eingeblendet werden muss.

Anzeigen werden mit der Methode load der Klasse AppOpenAd geladen. 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 ist oder fehlschlägt. Das geladene AppOpenAd-Objekt wird als Parameter im Abschluss-Handler bereitgestellt. Das folgende Beispiel zeigt, wie ein 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 einblenden und Vollbild-Callbacks verarbeiten

Registrieren Sie vor dem Einblenden der Anzeige einen FullScreenContentCallback für jedes Anzeigenereignis, das Sie erfassen möchten.

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 App-Start-Anzeige verlassen hat, darf ihm keine weitere App-Start-Anzeige präsentiert werden.

Auf Ereignisse warten, bei denen die App in den Vordergrund wechselt

Wenn du über Ereignisse benachrichtigt werden möchtest, bei denen die App in den Vordergrund wechselt, musst du 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: Auf der Startseite:

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

Ablaufzeit der 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, damit keine abgelaufene Anzeige ausgeliefert wird. Prüfen Sie dann mit diesem Zeitstempel, 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 einblenden, wenn Nutzer Ihre App in den Vordergrund holen, während sie im Arbeitsspeicher angehalten ist. „Kaltstarts“ treten 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 einem Kaltstart ist keine zuvor geladene App-Start-Anzeige vorhanden, die sofort eingeblendet werden kann. Die Verzögerung zwischen der Anfrage und dem Erhalt einer Anzeige kann dazu führen, dass Nutzer Ihre App kurz 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 sollte nur auf dem Ladebildschirm eingeblendet werden. Wenn Ihre App vollständig geladen wurde und der Nutzer zum Hauptinhalt Ihrer App weitergeleitet wurde, sollte 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 zwischen Apps gewechselt wird. Beachten Sie jedoch die Best Practices, damit Ihre Nutzer die App gern verwenden. Am besten gehen Sie so vor:

  • Blenden Sie die erste App-Start-Anzeige ein, nachdem die Nutzer Ihre App einige Male verwendet haben.
  • Präsentieren Sie App-Start-Anzeigen, während Nutzer darauf warten, dass die 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 mit dem Ereignis-Handler onAdDismissedFullScreenContent beenden.

Vollständiges Beispiel auf GitHub

Das vollständige Beispiel finden Sie in der API-Demo.