Reklamy wyświetlane przy otwarciu aplikacji

Wybierz platformę: Android iOS Unity Flutter

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 w każdej chwili zamknąć. Są one przeznaczone do wyświetlania, gdy użytkownicy przenoszą aplikację na pierwszy plan.

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

• Wtyczka Flutter w wersji 0.13.6 lub nowszej.
• Kliknij Rozpocznij. W aplikacji Flutter powinna być już zaimportowana wtyczka reklam mobilnych Google dla Fluttera.

Zawsze testuj za pomocą reklam testowych

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

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

Android

ca-app-pub-3940256099942544/9257395921

iOS

ca-app-pub-3940256099942544/5575463023

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

Implementacja

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

1. Utwórz klasę narzędziową, która wczytuje reklamę, zanim będzie trzeba ją wyświetlić.
2. Wczytaj reklamę.
3. Zarejestruj wywołania zwrotne i wyświetl reklamę.
4. Subskrybuj AppStateEventNotifier.appStateStream, aby wyświetlać reklamę podczas zdarzeń związanych z przechodzeniem aplikacji na pierwszy plan.

Tworzenie klasy narzędziowej

Utwórz nową klasę o nazwie AppOpenAdManager, aby wczytać reklamę. Ta klasa zarządza zmienną instancji, która ś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 = 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;
  }
}

Wczytywanie reklamy

Reklama wyświetlana przy otwarciu aplikacji musi być gotowa, zanim użytkownicy wejdą do aplikacji. Zaimplementuj klasę narzędziową, aby wysyłać żądania reklamy przed momentem, w którym musisz wyświetlić reklamę.

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

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

Wyświetlanie reklamy i obsługa wywołań zwrotnych pełnoekranowych

Przed wyświetleniem reklamy zarejestruj FullScreenContentCallback dla każdego zdarzenia reklamy, którego chcesz nasłuchiwać.

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 otwierającej aplikację, nie wyświetlaj mu kolejnej reklamy otwierającej aplikację.

Nasłuchiwanie zdarzeń przejścia aplikacji na pierwszy plan

Aby otrzymywać powiadomienia o zdarzeniach związanych z przełączaniem aplikacji na pierwszy plan, musisz zasubskrybować zdarzenia 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ąć nasłuchiwać zmian w 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 reklamy

Ważne: odniesienia do reklam w wersji beta reklam przy otwarciu 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 czasu jest starannie rozważany i może ulec zmianie w przyszłych wersjach beta formatu otwarcia aplikacji.

Aby uniknąć wyświetlania wygasłych reklam, dodaj sygnaturę czasową do elementu AppOpenAdManager, aby móc sprawdzić, ile czasu minęło od wczytania reklamy. Następnie użyj tego znacznika czasu, 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.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();
  }
}

Uruchamianie „na zimno” i ekrany wczytywania

Dokumentacja zakłada, że reklamy wyświetlane przy otwarciu aplikacji są wyświetlane tylko wtedy, gdy użytkownicy przywracają aplikację do pierwszego planu, gdy jest ona 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 sytuacja, gdy użytkownik otwiera aplikację po raz pierwszy. W przypadku uruchamiania „na zimno” nie masz wcześniej wczytanej reklamy wyświetlanej przy otwarciu aplikacji, która jest gotowa do natychmiastowego wyświetlenia. Opóźnienie między wysłaniem żądania reklamy a otrzymaniem odpowiedzi może spowodować, że użytkownicy będą mogli przez chwilę korzystać z aplikacji, zanim zaskoczy ich reklama wyświetlona bez kontekstu. Należy tego unikać, ponieważ negatywnie wpływa to na wrażenia użytkowników.

Najlepszym sposobem na używanie 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 tym ekranie. Jeśli aplikacja została wczytana i użytkownik został przekierowany do głównej treści aplikacji, 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 jest ona uruchamiana po raz pierwszy i podczas przełączania się między aplikacjami. Ważne jest jednak, aby pamiętać o sprawdzonych metodach, dzięki którym użytkownicy będą mogli wygodnie 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 procedury obsługi zdarzeń onAdDismissedFullScreenContent.

Pełny przykład w GitHubie

Reklamy wyświetlane przy otwarciu aplikacji