Iklan di Layar Pembuka Aplikasi

Iklan di layar pembuka aplikasi adalah format iklan khusus yang ditujukan bagi penayang yang ingin memonetisasi layar pemuatan aplikasi mereka. Iklan di layar pembuka aplikasi dapat ditutup kapan saja, dan dirancang untuk ditampilkan saat pengguna menampilkan aplikasi ke latar depan.

Iklan di layar pembuka aplikasi otomatis menampilkan area branding kecil sehingga pengguna tahu bahwa mereka berada di aplikasi Anda. Berikut adalah contoh tampilan iklan di layar pembuka aplikasi:

Prasyarat

• Plugin Flutter 0.13.6 atau yang lebih tinggi.
• Selesaikan Mulai. Aplikasi Flutter Anda seharusnya telah mengimpor plugin Flutter Google Mobile Ads.

Selalu uji dengan iklan percobaan

Saat mem-build dan menguji aplikasi, pastikan Anda menggunakan iklan percobaan, bukan iklan produksi langsung. Jika Anda tidak melakukannya, akun Anda dapat ditangguhkan.

Cara termudah untuk memuat iklan pengujian adalah dengan menggunakan ID unit iklan pengujian khusus kami untuk iklan reward Android dan iOS:

Android

ca-app-pub-3940256099942544/9257395921

iOS

ca-app-pub-3940256099942544/5575463023

Iklan ini telah dikonfigurasi secara khusus untuk menampilkan iklan pengujian untuk setiap permintaan, dan Anda bebas menggunakannya di aplikasi Anda sendiri saat melakukan coding, pengujian, dan proses debug. Pastikan Anda menggantinya dengan ID unit iklan Anda sendiri sebelum memublikasikan aplikasi.

Penerapan

Langkah-langkah utama untuk mengintegrasikan iklan di layar pembuka aplikasi adalah:

1. Buat class utilitas yang memuat iklan sebelum Anda perlu menampilkannya.
2. Memuat iklan.
3. Daftarkan callback dan tampilkan iklan.
4. Berlangganan AppStateEventNotifier.appStateStream untuk menampilkan iklan selama peristiwa latar depan.

Membuat class utilitas

Buat class baru bernama AppOpenAdManager untuk memuat iklan. Class ini mengelola variabel instance untuk terus melacak iklan yang dimuat dan ID unit iklan untuk setiap platform.

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

Memuat iklan

Iklan di layar pembuka aplikasi harus siap sebelum pengguna memasuki aplikasi Anda. Terapkan class utilitas untuk membuat permintaan iklan sebelum Anda perlu menampilkan iklan.

Pemuatan iklan dilakukan menggunakan metode load di class AppOpenAd. Metode pemuatan memerlukan ID unit iklan, mode orientasi, objek AdRequest, dan pengendali penyelesaian yang dipanggil saat pemuatan iklan berhasil atau gagal. Objek AppOpenAd yang dimuat disediakan sebagai parameter di pengendali penyelesaian. Contoh berikut menunjukkan cara memuat 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.
        },
      ),
    );
  }
}

Menampilkan iklan dan menangani callback layar penuh

Sebelum menampilkan iklan, daftarkan FullScreenContentCallback untuk setiap peristiwa iklan yang ingin Anda proses.

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

Jika pengguna kembali ke aplikasi Anda setelah keluar dengan mengklik iklan buka aplikasi, pastikan mereka tidak melihat iklan buka aplikasi lain.

Memproses peristiwa latar depan aplikasi

Agar mendapatkan notifikasi tentang peristiwa latar depan aplikasi, Anda harus berlangganan AppStateEventNotifier.appStateStream dan memproses peristiwa 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();
    }
  }
}

Sekarang Anda dapat menambahkan inisialisasi AppLifecycleReactor dan mulai memproses perubahan siklus proses aplikasi. Misalnya, dari halaman beranda:

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

Pertimbangkan waktu berakhir iklan

Poin Penting: Waktu referensi iklan di layar pembuka aplikasi versi beta akan habis setelah empat jam. Iklan yang dirender lebih dari empat jam setelah waktu permintaan tidak akan lagi valid dan tidak akan menghasilkan pendapatan. Batas waktu ini sedang dipertimbangkan dengan cermat dan dapat berubah dalam versi beta mendatang dari format terbuka aplikasi.

Untuk memastikan Anda tidak menampilkan iklan yang masa berlakunya sudah habis, tambahkan stempel waktu ke AppOpenAdManager sehingga Anda dapat memeriksa durasi iklan sejak dimuat. Kemudian, gunakan stempel waktu tersebut untuk memeriksa apakah iklan tersebut masih valid.

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

Cold start dan layar pemuatan

Dokumentasi sejauh ini mengasumsikan bahwa Anda hanya menampilkan iklan di layar pembuka aplikasi saat pengguna menampilkan aplikasi Anda di latar depan saat ditangguhkan dalam memori. "Cold start" terjadi saat aplikasi Anda diluncurkan, tetapi sebelumnya tidak ditangguhkan dalam memori.

Contoh cold start adalah saat pengguna membuka aplikasi Anda untuk pertama kalinya. Dengan cold start, Anda tidak akan memiliki iklan buka aplikasi yang dimuat sebelumnya dan siap ditampilkan langsung. Penundaan antara saat Anda meminta iklan dan menerima iklan kembali dapat menciptakan situasi saat pengguna dapat menggunakan aplikasi Anda sebentar sebelum terkejut dengan iklan yang tidak sesuai konteks. Hal ini harus dihindari karena merupakan pengalaman pengguna yang buruk.

Cara yang lebih disukai untuk menggunakan iklan di layar pembuka aplikasi pada cold start adalah menggunakan layar pemuatan untuk memuat aset game atau aplikasi, dan hanya menampilkan iklan dari layar pemuatan. Jika aplikasi Anda telah selesai dimuat dan telah mengarahkan pengguna ke konten utama aplikasi, jangan tampilkan iklan.

Poin Penting: Untuk terus memuat aset aplikasi saat iklan di layar pembuka aplikasi ditampilkan, selalu muat aset di thread latar belakang.

Praktik terbaik

Iklan di layar pembuka aplikasi membantu Anda memonetisasi layar pemuatan aplikasi, saat aplikasi pertama kali diluncurkan dan selama pengalihan aplikasi, tetapi penting untuk mempertimbangkan praktik terbaik agar pengguna menikmati penggunaan aplikasi Anda. Sebaiknya:

• Tampilkan iklan di layar pembuka aplikasi pertama setelah pengguna menggunakan aplikasi Anda beberapa kali.
• Tampilkan iklan di layar pembuka aplikasi selama waktu pengguna menunggu aplikasi Anda dimuat.
• Jika Anda memiliki layar pemuatan di bawah iklan di layar pembuka aplikasi dan layar pemuatan selesai dimuat sebelum iklan ditutup, sebaiknya hapus layar pemuatan di pengendali peristiwa onAdDismissedFullScreenContent.

Contoh lengkap di GitHub

Layar Pembuka Aplikasi