โฆษณาเปิดแอป

เลือกแพลตฟอร์ม: Android iOS Unity Flutter

โฆษณาเปิดแอปเป็นรูปแบบโฆษณาพิเศษที่ออกแบบมาสําหรับผู้เผยแพร่โฆษณาที่ต้องการสร้างรายได้ จากหน้าจอโหลดของแอป ผู้ใช้ปิดโฆษณาเปิดแอปได้ทุกเมื่อ และโฆษณาได้รับการออกแบบ ให้แสดงเมื่อผู้ใช้เรียกแอปของคุณมาที่เบื้องหน้า

โฆษณาเปิดแอปจะแสดงพื้นที่การสร้างแบรนด์ขนาดเล็กๆ โดยอัตโนมัติเพื่อให้ผู้ใช้รู้ว่ากำลังอยู่ในแอปของคุณ ตัวอย่างโฆษณาเปิดแอปมีลักษณะดังนี้

ข้อกำหนดเบื้องต้น

• ปลั๊กอิน Flutter เวอร์ชัน 0.13.6 ขึ้นไป
• ทำตามขั้นตอนเริ่มต้นใช้งาน แอป Flutter ควร นำเข้าปลั๊กอิน Google Mobile Ads Flutter ไว้แล้ว

ทดสอบด้วยโฆษณาทดสอบเสมอ

เมื่อสร้างและทดสอบแอป โปรดใช้โฆษณาทดสอบแทน โฆษณาจริงที่ใช้งานจริง หากไม่ดำเนินการดังกล่าวอาจส่งผลให้บัญชีถูกระงับ

วิธีที่ง่ายที่สุดในการโหลดโฆษณาทดสอบคือการใช้รหัสหน่วยโฆษณาทดสอบเฉพาะสำหรับ โฆษณาที่มีการให้รางวัลของ Android และ iOS ดังนี้

Android

ca-app-pub-3940256099942544/9257395921

iOS

ca-app-pub-3940256099942544/5575463023

โดยได้รับการกำหนดค่าเป็นพิเศษให้แสดงโฆษณาทดสอบสำหรับทุกคำขอ และ คุณสามารถใช้หน่วยโฆษณาทดสอบเหล่านี้ในแอปของคุณเองขณะเขียนโค้ด ทดสอบ และแก้ไขข้อบกพร่องได้ เพียงอย่าลืมแทนที่ด้วยรหัสหน่วยโฆษณาของคุณเองก่อนเผยแพร่แอป

การใช้งาน

ขั้นตอนหลักในการผสานรวมโฆษณาเปิดแอปมีดังนี้

1. สร้างคลาสยูทิลิตีที่โหลดโฆษณาก่อนที่คุณจะต้องแสดง
2. โหลดโฆษณา
3. ลงทะเบียนรับสายโทรกลับและแสดงโฆษณา
4. สมัครใช้บริการ AppStateEventNotifier.appStateStream เพื่อแสดงโฆษณา ในระหว่างเหตุการณ์ที่แอปทำงานอยู่เบื้องหน้า

สร้างคลาสยูทิลิตี

สร้างคลาสใหม่ชื่อ AppOpenAdManager เพื่อโหลดโฆษณา คลาสนี้จัดการตัวแปรอินสแตนซ์เพื่อติดตามโฆษณาที่โหลดแล้วและรหัสหน่วยโฆษณาสำหรับแต่ละแพลตฟอร์ม

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

โหลดโฆษณา

โฆษณาเปิดแอปต้องพร้อมก่อนที่ผู้ใช้จะเข้าแอปของคุณ ใช้ คลาสยูทิลิตีเพื่อส่งคำขอโฆษณาล่วงหน้าก่อนเวลาที่คุณต้องการแสดงโฆษณา

การโหลดโฆษณาจะทำได้โดยใช้เมธอด load ในคลาส AppOpenAd เมธอดโหลดต้องใช้รหัสหน่วยโฆษณา โหมดการวางแนว ออบเจ็กต์ AdRequest และตัวแฮนเดิลการดำเนินการ ให้เสร็จสมบูรณ์ซึ่งจะเรียกใช้เมื่อโหลดโฆษณาสำเร็จหรือไม่สำเร็จ ออบเจ็กต์ที่โหลดแล้ว AppOpenAd จะระบุเป็นพารามิเตอร์ใน Completion Handler ตัวอย่างต่อไปนี้แสดงวิธีโหลด 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.
        },
      ),
    );
  }
}

แสดงโฆษณาและจัดการการเรียกกลับแบบเต็มหน้าจอ

ก่อนแสดงโฆษณา ให้ลงทะเบียน FullScreenContentCallback สำหรับเหตุการณ์โฆษณาแต่ละรายการ ที่คุณต้องการฟัง

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

หากผู้ใช้กลับมาที่แอปหลังจากออกจากแอปโดยคลิกโฆษณาที่เปิดแอป โปรดตรวจสอบว่าผู้ใช้จะไม่เห็นโฆษณาที่เปิดแอปอีก

รอรับเหตุการณ์การนำแอปไปไว้เบื้องหน้า

หากต้องการรับการแจ้งเตือนเกี่ยวกับเหตุการณ์การนำแอปไปไว้เบื้องหน้า คุณต้องสมัครใช้บริการ AppStateEventNotifier.appStateStream และรอรับเหตุการณ์ 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();
    }
  }
}

ตอนนี้คุณสามารถเพิ่มAppLifecycleReactorและเริ่มฟังการเปลี่ยนแปลงวงจรแอปได้แล้ว เช่น จากหน้าแรก

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

พิจารณาการหมดอายุของโฆษณา

ประเด็นสำคัญ: การอ้างอิงโฆษณาในเวอร์ชันเบต้าแบบเปิดของโฆษณาเปิดแอปจะหมดเวลาหลังจากผ่านไป 4 ชั่วโมง โฆษณาที่แสดงนานกว่า 4 ชั่วโมงหลังจากเวลาที่ส่งคำขอจะใช้ไม่ได้อีกต่อไปและ อาจไม่สร้างรายได้ เราพิจารณาขีดจํากัดเวลานี้อย่างรอบคอบและอาจมีการเปลี่ยนแปลงในแอปรูปแบบเปิดเวอร์ชันเบต้าในอนาคต

หากต้องการไม่ให้แสดงโฆษณาที่หมดอายุแล้ว ให้เพิ่มการประทับเวลาลงใน AppOpenAdManager เพื่อให้คุณตรวจสอบได้ว่าโฆษณาโหลดมานานเท่าใดแล้ว จากนั้นใช้การประทับเวลาดังกล่าวเพื่อตรวจสอบว่าโฆษณายังคงใช้งานได้หรือไม่

/// 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 และหน้าจอการโหลด

เอกสารประกอบจนถึงตอนนี้ถือว่าคุณแสดงโฆษณาเปิดแอปเฉพาะเมื่อผู้ใช้ นำแอปของคุณมาไว้เบื้องหน้าเมื่อแอปถูกระงับในหน่วยความจำ "Cold Start" จะเกิดขึ้นเมื่อ แอปของคุณเปิดขึ้นแต่ไม่ได้ถูกระงับไว้ในหน่วยความจำก่อนหน้านี้

ตัวอย่างของ Cold Start คือเมื่อผู้ใช้เปิดแอปเป็นครั้งแรก เมื่อมีการเริ่มแอปแบบ Cold Start คุณจะไม่มีโฆษณาเปิดแอปที่โหลดไว้ก่อนหน้านี้ซึ่งพร้อม แสดงทันที ความล่าช้าระหว่างเวลาที่คุณขอโฆษณาและเวลาที่คุณได้รับโฆษณา กลับอาจทำให้เกิดสถานการณ์ที่ผู้ใช้สามารถใช้แอปของคุณได้ในระยะเวลาสั้นๆ ก่อนที่จะ ประหลาดใจกับโฆษณาที่ไม่อยู่ในบริบท คุณควรหลีกเลี่ยงการทำเช่นนี้เนื่องจากจะทำให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ไม่ดี

วิธีที่แนะนำในการใช้โฆษณาเปิดแอปเมื่อเริ่มแอปเป็นครั้งแรกคือการใช้หน้าจอการโหลด เพื่อโหลดชิ้นงานเกมหรือแอป และแสดงโฆษณาจากหน้าจอการโหลด เท่านั้น หากแอปโหลดเสร็จแล้วและส่งผู้ใช้ไปยังเนื้อหาหลักของแอป ห้ามแสดงโฆษณา

ประเด็นสำคัญ: หากต้องการโหลดชิ้นงานแอปต่อไปขณะที่โฆษณาเปิดแอป กำลังแสดงอยู่ ให้โหลดชิ้นงานในเธรดเบื้องหลังเสมอ

แนวทางปฏิบัติแนะนำ

โฆษณาเปิดแอปช่วยให้คุณสร้างรายได้จากหน้าจอการโหลดของแอปเมื่อแอปเปิดตัวครั้งแรกและระหว่างการสลับแอป แต่สิ่งสำคัญคือต้องคำนึงถึงแนวทางปฏิบัติแนะนำเพื่อให้ผู้ใช้เพลิดเพลินกับการใช้แอปของคุณ แนวทางปฏิบัติแนะนำมีดังนี้

• แสดงโฆษณาการเปิดแอปครั้งแรกหลังจากที่ผู้ใช้ใช้แอปของคุณ 2-3 ครั้ง
• แสดงโฆษณาเปิดแอปในช่วงเวลาที่ผู้ใช้ต้องรอให้แอปโหลด
• หากมีหน้าจอโหลดภายใต้โฆษณาเปิดแอปและหน้าจอโหลด โหลดเสร็จสมบูรณ์ก่อนที่ผู้ใช้จะปิดโฆษณา คุณอาจต้องปิดหน้าจอโหลด ในตัวแฮนเดิลเหตุการณ์ onAdDismissedFullScreenContent

ตัวอย่างที่สมบูรณ์ใน GitHub

โฆษณาเปิดแอป