מודעות בפתיחת אפליקציה

בחירת פלטפורמה: Android iOS Unity Flutter

מודעות בפתיחת אפליקציה הן פורמט מודעה מיוחד שמיועד לבעלי אפליקציות שרוצים לייצר הכנסות ממסכי הטעינה של האפליקציה שלהם. אפשר לסגור מודעות בפתיחת האפליקציה בכל שלב, והן מיועדות להצגה כשהמשתמשים מעבירים את האפליקציה לחזית.

מודעות בפתיחת האפליקציה מציגות באופן אוטומטי אזור מיתוג קטן כדי שהמשתמשים ידעו שהם באפליקציה שלכם. הנה דוגמה למודעה בפתיחת האפליקציה:

דרישות מוקדמות

• תוסף Flutter מגרסה 0.13.6 ואילך.
• משלימים את השלבים של תחילת העבודה. התוסף Google Mobile Ads Flutter כבר צריך להיות מיובא לאפליקציית 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. השיטה load דורשת מזהה של יחידת מודעות, מצב אוריינטציה, אובייקט 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.
        },
      ),
    );
  }
}

הצגת המודעה וטיפול בהחזרות (callback) במסך מלא

לפני הצגת המודעה, צריך לרשום 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);
  }

כדאי לשקול את תפוגת התוקף של המודעות

נקודה חשובה: ההפניות למודעות בגרסת הבטא של מודעות בפתיחת אפליקציה יפסיקו לפעול אחרי ארבע שעות. מודעות שמוצגות יותר מארבע שעות אחרי זמן הבקשה כבר לא תקפות, ויכול להיות שלא יניבו הכנסות. אנחנו בוחנים בקפידה את מגבלת הזמן הזו, והיא עשויה להשתנות בגרסאות בטא עתידיות של פורמט פתיחת האפליקציה.

כדי לוודא שלא תוצג מודעה שתוקפה פג, מוסיפים חותמת זמן ל-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) ומסכי טעינה

עד עכשיו, ההנחה במסמכים הייתה שאתם מציגים מודעות בפתיחת האפליקציה רק כשהמשתמשים מעבירים את האפליקציה לחזית כשהיא מושהית בזיכרון. 'הפעלות קרות' מתרחשות כשהאפליקציה מופעלת אבל לא הושעתה קודם בזיכרון.

דוגמה להפעלה קרה היא כשמשתמש פותח את האפליקציה בפעם הראשונה. בהפעלה במצב התחלתי, לא תהיה לכם מודעה בפתיחת האפליקציה שכבר נטענה ומוכנה להצגה מיידית. העיכוב בין הרגע שבו מבקשים להציג מודעה לבין הרגע שבו מקבלים את המודעה יכול ליצור מצב שבו המשתמשים יכולים להשתמש באפליקציה לזמן קצר לפני שהם מופתעים ממודעה שלא קשורה להקשר. מומלץ להימנע מכך כי זה פוגע בחוויית המשתמש.

הדרך המומלצת להשתמש במודעות בפתיחת אפליקציה בהפעלות קרות היא להשתמש במסך טעינה כדי לטעון את הנכסים של המשחק או האפליקציה, ולהציג את המודעה רק ממסך הטעינה. אם האפליקציה סיימה את הטעינה והמשתמש הועבר לתוכן הראשי של האפליקציה, אל תציגו את המודעה.

נקודה חשובה: כדי להמשיך לטעון נכסי אפליקציה בזמן שהמודעה בפתיחת האפליקציה מוצגת, צריך תמיד לטעון נכסים בשרשור רקע.

שיטות מומלצות

מודעות בפתיחת אפליקציה עוזרות לכם לייצר הכנסות ממסך הטעינה של האפליקציה, כשהאפליקציה מופעלת לראשונה ובמהלך מעבר בין אפליקציות. עם זאת, חשוב להקפיד על שיטות מומלצות כדי שהמשתמשים ייהנו מהשימוש באפליקציה. מומלץ:

• כדאי להציג את המודעה הראשונה בפתיחת האפליקציה אחרי שהמשתמשים השתמשו באפליקציה כמה פעמים.
• הצגת מודעות בפתיחת האפליקציה בזמנים שבהם המשתמשים ממתינים שהאפליקציה תיטען.
• אם יש לכם מסך טעינה מתחת למודעה בפתיחת האפליקציה, ומסך הטעינה מסיים את הטעינה לפני שהמודעה נסגרת, כדאי לסגור את מסך הטעינה ב-onAdDismissedFullScreenContent event handler.

דוגמה מלאה ב-GitHub

מודעות בפתיחת אפליקציה