Quảng cáo khi mở ứng dụng

Quảng cáo khi mở ứng dụng là một định dạng quảng cáo đặc biệt dành cho những nhà xuất bản muốn kiếm tiền từ màn hình tải ứng dụng của họ. Quảng cáo khi mở ứng dụng được thiết kế để hiển thị khi người dùng đưa ứng dụng của bạn lên nền trước và họ có thể đóng quảng cáo này bất cứ lúc nào.

Quảng cáo khi mở ứng dụng tự động hiển thị một vùng nhỏ chứa thông tin thương hiệu để người dùng biết họ đang mở ứng dụng của bạn. Dưới đây là một ví dụ về cách hiển thị của quảng cáo khi mở ứng dụng:

Điều kiện tiên quyết

  • Trình bổ trợ Flutter phiên bản 0.13.5 trở lên.
  • Hoàn thành các bước Bắt đầu sử dụng. Ứng dụng Flutter của bạn phải nhập sẵn trình bổ trợ Flutter dành cho Quảng cáo trên thiết bị di động của Google.

Luôn kiểm tra bằng quảng cáo thử nghiệm

Khi tạo và thử nghiệm ứng dụng, hãy đảm bảo rằng bạn sử dụng quảng cáo thử nghiệm thay vì quảng cáo đang chạy thực tế. Chúng tôi sẽ tạm ngưng tài khoản của bạn nếu bạn không thực hiện việc này.

Cách dễ nhất để tải quảng cáo thử nghiệm là sử dụng ID đơn vị quảng cáo thử nghiệm dành riêng cho quảng cáo có tặng thưởng trên Android và iOS:

Android

ca-app-pub-3940256099942544/3419835294

iOS

ca-app-pub-3940256099942544/5662855259

Các ID này đã được định cấu hình đặc biệt để trả về quảng cáo thử nghiệm cho mọi yêu cầu và bạn có thể sử dụng chúng trong các ứng dụng của mình khi viết mã, thử nghiệm và gỡ lỗi. Bạn chỉ cần nhớ thay thế mã này bằng mã đơn vị quảng cáo của mình trước khi xuất bản ứng dụng.

Cách thức triển khai

Các bước chính để tích hợp quảng cáo khi mở ứng dụng là:

  1. Tạo một lớp tiện ích sẽ tải quảng cáo trước khi bạn cần hiển thị quảng cáo đó.
  2. Tải một quảng cáo.
  3. Đăng ký các lệnh gọi lại và hiển thị quảng cáo.
  4. Theo dõi WidgetsBindingObserver.didChangeAppLifecycleState để hiển thị quảng cáo trong các sự kiện đưa lên nền trước.

Tạo một lớp tiện ích

Tạo một lớp mới có tên là AppOpenAdManager để tải quảng cáo. Lớp này sẽ quản lý một biến thực thể để theo dõi một quảng cáo đã tải và mã đơn vị quảng cáo cho từng nền tảng.

import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'dart:io' show Platform;

class AppOpenAdManager {

  String adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/3419835294'
    : 'ca-app-pub-3940256099942544/5662855259';

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

Tải một quảng cáo

Bạn phải chuẩn bị sẵn quảng cáo khi mở ứng dụng trước khi người dùng mở ứng dụng của bạn. Hãy triển khai một lớp tiện ích để thực hiện các yêu cầu quảng cáo trước khi bạn cần hiển thị quảng cáo.

Bạn có thể tải một quảng cáo bằng cách sử dụng phương thức loadAd() trên lớp AppOpenAd. Phương thức tải này yêu cầu một mã đơn vị quảng cáo, một chế độ hướng, một đối tượng AdRequest và một trình xử lý hoàn thành để gọi khi tải quảng cáo thành công hoặc không thành công. Đối tượng AppOpenAd đã tải được cung cấp dưới dạng một thông số trong trình xử lý hoàn thành. Dưới đây là ví dụ về cách tải một AppOpenAd.

public class AppOpenAdManager {
  ...

  /// Load an [AppOpenAd].
  void loadAd() {
    AppOpenAd.load(
      adUnitId: adUnitId,
      orientation: AppOpenAd.orientationPortrait,
      request: AdRequest(),
      adLoadCallback: AppOpenAdLoadCallback(
        onAdLoaded: (ad) {
          _appOpenAd = ad;
        },
        onAdFailedToLoad: (error) {
          print('AppOpenAd failed to load: $error');
          // Handle the error.
        },
      ),
    );
  }
}

Hiển thị quảng cáo và xử lý các lệnh gọi lại toàn màn hình

Trước khi hiển thị quảng cáo, hãy đăng ký FullScreenContentCallback cho mỗi sự kiện quảng cáo mà bạn muốn theo dõi.

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

Nếu người dùng quay lại ứng dụng của bạn sau khi rời khỏi bằng cách nhấp vào một quảng cáo khi mở ứng dụng, thì hãy đảm bảo rằng ứng dụng đó không hiển thị một quảng cáo khi mở ứng dụng khác cho người dùng.

Theo dõi các sự kiện đưa ứng dụng lên nền trước

Để được thông báo về các sự kiện đưa ứng dụng lên nền trước, bạn cần triển khai một WidgetsBindingObserver và theo dõi sự kiện resumed trong WidgetsBindingObserver.didChangeAppLifecycleState().

import 'package:app_open_example/app_open_ad_manager.dart';
import 'package:flutter/material.dart';

class AppLifecycleReactor extends WidgetsBindingObserver {
  final AppOpenAdManager appOpenAdManager;

  AppLifecycleReactor({required this.appOpenAdManager});

  @override
  Future<void> didChangeAppLifecycleState(AppLifecycleState state) async {
    // Try to show an app open ad if the app is being resumed and
    // we're not already showing an app open ad.
    if (state == AppLifecycleState.resumed) {
      appOpenAdManager.showAdIfAvailable();
    }
  }
}

Bây giờ, bạn có thể thêm AppLifecycleReactor làm trình quan sát. Ví dụ: trên trang chủ của bạn:

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;

  @override
  void initState() {
    super.initState();
    
    AppOpenAdManager appOpenAdManager = AppOpenAdManager()..loadAd();
    WidgetsBinding.instance!
        .addObserver(AppLifecycleReactor(appOpenAdManager: appOpenAdManager));
    
  }

Xem xét thời hạn quảng cáo

Để đảm bảo bạn không hiển thị một quảng cáo đã hết hạn, hãy thêm một dấu thời gian vào AppOpenAdManager nhằm kiểm tra thời lượng kể từ khi quảng cáo của bạn được tải. Tiếp theo, hãy sử dụng dấu thời gian đó để kiểm tra xem liệu quảng cáo có còn hợp lệ hay không.

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

Khởi động nguội và màn hình tải

Từ đầu đến giờ, tài liệu này giả định rằng bạn chỉ hiển thị quảng cáo khi mở ứng dụng vào lúc người dùng đưa ứng dụng của bạn lên nền trước khi ứng dụng bị tạm ngưng trong bộ nhớ. "Khởi động nguội" xảy ra khi người dùng chạy ứng dụng của bạn nhưng trước đó, ứng dụng không bị tạm ngưng trong bộ nhớ.

Một ví dụ về khởi động nguội là khi người dùng mở ứng dụng của bạn lần đầu tiên. Trong trường hợp khởi động nguội, quảng cáo khi mở ứng dụng chưa được tải trước lần nào nên chưa sẵn sàng để hiển thị ngay lập tức. Một tình huống có thể xảy ra trong khoảng thời gian từ khi bạn yêu cầu quảng cáo cho đến khi nhận được quảng cáo (gọi là độ trễ), đó là người dùng vừa mới sử dụng ứng dụng của bạn trong chốc lát thì một quảng cáo không phù hợp đột ngột xuất hiện khiến họ bị bất ngờ. Bạn nên tránh làm như vậy vì điều này sẽ tạo ra trải nghiệm kém cho người dùng.

Nếu dùng quảng cáo khi mở ứng dụng vào lúc khởi động nguội, thì bạn nên dùng màn hình tải để tải các tài sản của trò chơi hoặc ứng dụng đó. Đồng thời, bạn chỉ nên hiển thị quảng cáo từ màn hình tải. Bạn đừng hiển thị quảng cáo nếu ứng dụng đã tải xong và đã đưa người dùng đến nội dung chính của ứng dụng.

Các phương pháp hay nhất

Quảng cáo khi mở ứng dụng giúp bạn kiếm tiền từ màn hình tải của ứng dụng, khi ứng dụng chạy lần đầu và khi chuyển đổi ứng dụng. Tuy nhiên, bạn cần ghi nhớ các phương pháp hay nhất để làm cho người dùng thích sử dụng ứng dụng của bạn. Tốt nhất là bạn nên:

  • Hiển thị quảng cáo khi mở ứng dụng đầu tiên sau khi người dùng đã sử dụng ứng dụng của bạn vài lần.
  • Hiển thị quảng cáo khi mở ứng dụng trong thời gian người dùng chờ ứng dụng của bạn tải.
  • Nếu bạn có màn hình tải trong quảng cáo khi mở ứng dụng và màn hình tải đó đã tải xong trước khi quảng cáo bị đóng, thì bạn có thể đóng màn hình tải trong trình xử lý sự kiện onAdDismissedFullScreenContent.