מודעות באנר

הפלטפורמה: Android iOS Unity Flutter

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

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

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

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

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

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

/21775744923/example/fixed-size-banner

אתחול Mobile Ads SDK

לפני טעינת המודעות, צריך להפעיל את Google Mobile Ads Unity Plugin באפליקציה באמצעות הקריאה MobileAds.Initialize(). צריך לבצע את הפעולה הזו רק פעם אחת, ועדיף בזמן הפעלת האפליקציה.

using GoogleMobileAds;
using GoogleMobileAds.Api;

public class GoogleMobileAdsDemoScript : MonoBehaviour
{
    public void Start()
    {
        // Initialize Google Mobile Ads Unity Plugin.
        MobileAds.Initialize((InitializationStatus initStatus) =>
        {
            // This callback is called once the MobileAds SDK is initialized.
        });
    }
}

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

דוגמה ל-BannerView

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

יצירת תצוגת באנר

השלב הראשון בשימוש בתצוגת באנר הוא ליצור מופע של תצוגת באנר.

// Create a 320x50 banner at top of the screen.
adManagerBannerView = new AdManagerBannerView("AD_UNIT_ID", AdSize.Banner, AdPosition.Top);

מחליפים את AD_UNIT_ID במזהה יחידת המודעות.

הפרמטרים של בנאי (constructor) של AdManagerBannerView הם:

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

(אופציונלי) יצירת תצוגת באנר עם מיקום מותאם אישית

כדי לקבל שליטה רבה יותר במיקום של תצוגת הבאנר במסך מאשר מה שמוצע על ידי ערכי AdPosition, משתמשים בבונה שיש לו קואורדינטות x ו-y כפרמטרים:

// Create a 320x50 banner views at coordinate (0,50) on screen.
adManagerBannerView = new AdManagerBannerView("AD_UNIT_ID", AdSize.Banner, 0, 50);

הפינה הימנית העליונה של תצוגת הבאנר ממוקמת בערכי x ו-y שמועברים לבונה, כאשר נקודת המוצא היא הפינה הימנית העליונה של המסך.

(אופציונלי) יצירת תצוגת באנר בגודל מותאם אישית

בנוסף לשימוש בקבוע AdSize, אפשר גם לציין גודל מותאם אישית למודעה:

// Create a 250x250 banner at the bottom of the screen.
AdSize adSize = new AdSize(250, 250);
adManagerBannerView = new AdManagerBannerView("AD_UNIT_ID", adSize, AdPosition.Bottom);

(אופציונלי) כמה גדלים של מודעות

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

באפליקציה, מעבירים כמה פרמטרים של AdSize אל ValidAdSizes:

// Create a 250x250 banner at the bottom of the screen.
adManagerBannerView = new AdManagerBannerView("AD_UNIT_ID", AdSize.Banner, AdPosition.Top);

// Add multiple ad sizes.
adManagerBannerView.ValidAdSizes = new List<AdSize>
{
    AdSize.Banner,
    new AdSize(120, 20),
    new AdSize(250, 250),
};

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

טעינה של מודעת באנר

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

כדי לטעון מודעה, יוצרים AdManagerAdRequest ומעבירים אותו ל-method‏ LoadAd().

// Send a request to load an ad into the banner view.
adManagerBannerView.LoadAd(new AdManagerAdRequest());

המתנה לאירועים של צפייה במודעות באנר

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

adManagerBannerView.OnBannerAdLoaded += () =>
{
    // Raised when an ad is loaded into the banner view.
};
adManagerBannerView.OnBannerAdLoadFailed += (LoadAdError error) =>
{
    // Raised when an ad fails to load into the banner view.
};
adManagerBannerView.OnAdPaid += (AdValue adValue) =>
{
    // Raised when the ad is estimated to have earned money.
};
adManagerBannerView.OnAdImpressionRecorded += () =>
{
    // Raised when an impression is recorded for an ad.
};
adManagerBannerView.OnAdClicked += () =>
{
    // Raised when a click is recorded for an ad.
};
adManagerBannerView.OnAdFullScreenContentOpened += () =>
{
    // Raised when an ad opened full screen content.
};
adManagerBannerView.OnAdFullScreenContentClosed += () =>
{
    // Raised when the ad closed full screen content.
};

הסרת תצוגת הבאנר

כדי להסיר את הבאנר, קוראים לשיטה Destroy() כדי לשחרר משאבים:

if (adManagerBannerView != null)
{
    // Always destroy the banner view when no longer needed.
    adManagerBannerView.Destroy();
    adManagerBannerView = null;
}

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

רענון מודעה

אם הגדרתם את יחידת המודעות לרענון, לא צריך לבקש מודעה נוספת אם המודעה לא נטענת. הפלאגין של Google Mobile Ads Unity מכבד כל קצב רענון שציינתם בממשק המשתמש של Ad Manager. אם לא הפעלתם את הרענון, תצטרכו לשלוח בקשה חדשה. פרטים נוספים על רענון יחידות מודעות, כמו הגדרת קצב רענון, זמינים במאמר קצב רענון של מודעות באפליקציות לנייד.

בטבלה הבאה מפורטים הגדלים הסטנדרטיים של באנרים:

גודל ב-dp‏ (רוחב x גובה) תיאור זמינות הקבוע AdSize
320x50 כרזות רגילות טלפונים וטאבלטים BANNER
320x100 מודעת באנר גדולה טלפונים וטאבלטים LARGE_BANNER
300x250 מלבן בינוני של IAB טלפונים וטאבלטים MEDIUM_RECTANGLE
468x60 באנר בגודל מלא של IAB טאבלטים FULL_BANNER
728x90 ‫IAB Leaderboard טאבלטים LEADERBOARD
הרוחב שצוין x הגובה המותאם מודעת באנר מותאמת טלפונים וטאבלטים לא רלוונטי
רוחב המסך x 32|50|90 באנר חכם טלפונים וטאבלטים SMART_BANNER
מידע נוסף על מודעות באנר מותאמות, שהן תחליף למודעות באנר חכמות.

אירועים באפליקציה

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

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

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

adManagerBannerView.OnAppEventReceived += (AppEvent args) =>
{
    Debug.Log($"Received app event from the ad: {args.Name}, {args.Data}.");
};

הנה דוגמה שמראה איך לשנות את צבע הרקע של האפליקציה בהתאם לאירוע באפליקציה עם שם של צבע:

adManagerBannerView.OnAppEventReceived += (AppEvent args) =>
{
    if (args.Name == "color")
    {
        Color color;
        if (ColorUtility.TryParseHtmlString(args.Data, out color))
        {
            renderer.material.color = color;
        }
    }
};

והנה הקריאייטיב התואם ששולח אירוע אפליקציה של צבע:

<html>
<head>
  <script src="//www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Send a color=green event when ad loads.
      admob.events.dispatchAppEvent("color", "green");

      document.getElementById("ad").addEventListener("click", function() {
        // Send a color=blue event when ad is clicked.
        admob.events.dispatchAppEvent("color", "blue");
      });
    });
  </script>
  <style>
    #ad {
      width: 320px;
      height: 50px;
      top: 0;
      left: 0;
      font-size: 24pt;
      font-weight: bold;
      position: absolute;
      background: black;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="ad">Carpe diem!</div>
</body>
</html>

מקורות מידע נוספים