App-Start-Anzeigen

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

App-Start-Anzeigen sind ein spezielles Anzeigenformat für Publisher, die ihre Ladebildschirme monetarisieren möchten. App-Start-Anzeigen können jederzeit geschlossen werden und 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 ein Beispiel für eine App-Start-Anzeige:

Vorbereitung

Führen Sie vor dem Fortfahren die folgenden Schritte aus:

• Installieren Sie das Flutter-Plug-in 0.13.6 oder höher.
• Richten Sie Google Mobile Ads Flutter Plugin ein. In Ihre Flutter-App muss Google Mobile Ads Flutter Plugin importiert sein.

Immer mit Testanzeigen testen

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

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

Android

ca-app-pub-3940256099942544/9257395921

iOS

ca-app-pub-3940256099942544/5575463023

Sie wurden speziell so konfiguriert, dass bei jeder Anfrage Testanzeigen zurückgegeben werden. Sie können sie beim Programmieren, Testen und Debuggen in Ihren eigenen Apps verwenden. Ersetzen Sie sie vor der Veröffentlichung Ihrer App einfach durch Ihre eigene Anzeigenblock-ID.

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. Registrieren Sie sich für Callbacks und präsentieren Sie die Anzeige.
4. Abonnieren Sie AppStateEventNotifier.appStateStream, um die Anzeige bei Ereignissen im Vordergrund zu präsentieren.

Hilfsklasse 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 zu verfolgen.

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 Hilfsklasse, um Anzeigenanfragen zu stellen, bevor Sie die Anzeige präsentieren müssen.

Das Laden einer Anzeige erfolgt mit der Methode load in der Klasse AppOpenAd. Die Methode „load“ erfordert eine Anzeigenblock-ID, einen Ausrichtungsmodus, ein AdRequest-Objekt und einen Completion-Handler, der aufgerufen wird, wenn das Laden der Anzeige erfolgreich ist oder fehlschlägt. Das geladene AppOpenAd-Objekt wird als Parameter im Completion-Handler bereitgestellt. Im folgenden Beispiel wird gezeigt, wie Sie ein AppOpenAd-Objekt 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 präsentieren und Vollbild-Callbacks verarbeiten

Registrieren Sie vor dem Präsentieren der Anzeige einen FullScreenContentCallback für jedes Anzeigenereignis, das Sie beobachten 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, sollte ihm keine weitere App-Start-Anzeige präsentiert werden.

Ereignisse im Vordergrund der App beobachten

Um über Ereignisse im Vordergrund der App benachrichtigt zu werden, 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 im Lebenszyklus der App warten. Beispiel: auf Ihrer 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);
  }

Ablauf von Anzeigen berücksichtigen

**Wichtiger Hinweis** :Anzeigenreferenzen in der App-Start-Beta 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 App-Start-Formats ändern.

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 präsentieren, wenn Nutzer Ihre App in den Vordergrund holen, während sie im Arbeitsspeicher angehalten wird. Von „Kaltstarts“ spricht man, 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 haben Sie keine zuvor geladene App-Start-Anzeige, die sofort präsentiert werden kann. Die Verzögerung zwischen dem Zeitpunkt, an dem Sie eine Anzeige anfordern, und dem Zeitpunkt, an dem Sie eine Anzeige erhalten, kann dazu führen, dass Nutzer Ihre App kurz verwenden können, bevor sie von einer Anzeige überrascht werden, die nicht zum Kontext passt. Das 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.

Wichtiger Hinweis: Damit App-Assets weiterhin geladen werden, während die App-Start-Anzeige eingeblendet wird, müssen Sie Assets immer in einem Hintergrundthread laden.

Best Practices

Mit App-Start-Anzeigen können Sie den Ladebildschirm Ihrer App monetarisieren, wenn die App zum ersten Mal gestartet wird und beim Wechsel zwischen Apps. Sie sollten jedoch Best Practices beachten, damit Ihre Nutzer Ihre App gerne verwenden. Es empfiehlt sich, folgende Maßnahmen zu ergreifen:

• 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 Ihre Nutzer sonst warten würden, bis Ihre App geladen ist.
• 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 Event-Handler onAdDismissedFullScreenContent beenden.

Vollständiges Beispiel auf GitHub

App-Start