מודעות באנר

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

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

מודעת באנר מותאמת ומעוגנת

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

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

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

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

הדרך הקלה ביותר לטעון מודעות בדיקה היא להשתמש במזהה הייעודי של יחידת מודעות לבדיקה עבור מודעות באנר ל-iOS: /6499/example/adaptive-banner

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

במאמר מודעות בדיקה מוסבר איך פועלות מודעות הבדיקה של Mobile Ads SDK.

יצירת GAMBannerView

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

באופן פרוגרמטי

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

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GAMBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    let viewWidth = view.frame.inset(by: view.safeAreaInsets).width

    // Here the current interface orientation is used. Use
    // GADLandscapeAnchoredAdaptiveBannerAdSizeWithWidth or
    // GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth if you prefer to load an ad of a
    // particular orientation,
    let adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
    bannerView = GAMBannerView(adSize: adaptiveSize)

    addBannerViewToView(bannerView)
  }

  func addBannerViewToView(_ bannerView: GAMBannerView) {
    bannerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bannerView)
    view.addConstraints(
      [NSLayoutConstraint(item: bannerView,
                          attribute: .bottom,
                          relatedBy: .equal,
                          toItem: view.safeAreaLayoutGuide,
                          attribute: .bottom,
                          multiplier: 1,
                          constant: 0),
       NSLayoutConstraint(item: bannerView,
                          attribute: .centerX,
                          relatedBy: .equal,
                          toItem: view,
                          attribute: .centerX,
                          multiplier: 1,
                          constant: 0)
      ])
   }
   
}

Objective-C

@import GoogleMobileAds;

@interface ViewController ()

@property(nonatomic, strong) GAMBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  
  // Here safe area is taken into account, hence the view frame is used after the
  // view has been laid out.
  CGRect frame = UIEdgeInsetsInsetRect(self.view.frame, self.view.safeAreaInsets);
  CGFloat viewWidth = frame.size.width;

  // Here the current interface orientation is used. If the ad is being preloaded
  // for a future orientation change or different orientation, the function for the
  // relevant orientation should be used.
  GADAdSize adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
  // In this case, we instantiate the banner with desired ad size.
  self.bannerView = [[GAMBannerView alloc] initWithAdSize:adaptiveSize];

  [self addBannerViewToView:self.bannerView];
}

- (void)addBannerViewToView:(UIView *)bannerView {
  bannerView.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:bannerView];
  [self.view addConstraints:@[
    [NSLayoutConstraint constraintWithItem:bannerView
                               attribute:NSLayoutAttributeBottom
                               relatedBy:NSLayoutRelationEqual
                                  toItem:self.view.safeAreaLayoutGuide
                               attribute:NSLayoutAttributeBottom
                              multiplier:1
                                constant:0],
    [NSLayoutConstraint constraintWithItem:bannerView
                               attribute:NSLayoutAttributeCenterX
                               relatedBy:NSLayoutRelationEqual
                                  toItem:self.view
                               attribute:NSLayoutAttributeCenterX
                              multiplier:1
                                constant:0]
                                ]];
}
  
@end

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

הכלי לבניית ממשקים

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

גודל המודעה של הבאנר עדיין מוגדר באופן פרוגרמטי:

Swift

  bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)

Objective-C

  self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);

טעינת מודעה

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

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...
  
  //  Set the ad unit ID and view controller that contains the GAMBannerView.
  bannerView.adUnitID = "/6499/example/adaptive-banner"
  bannerView.rootViewController = self

  bannerView.load(GAMRequest())
}

Objective-C

-   (void)viewDidLoad {
  [super viewDidLoad];
  ...
  
  //  Set the ad unit ID and view controller that contains the GAMBannerView.
  self.bannerView.adUnitID = @"/6499/example/adaptive-banner";
  self.bannerView.rootViewController = self;

  [self.bannerView loadRequest:[GAMRequest request]];
}

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

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

אירועי מודעות

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

הרשמה לאירועי באנר

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

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController, GADBannerViewDelegate {

  var bannerView: GAMBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    ...
    bannerView.delegate = self
  }
}

Objective-C

@import GoogleMobileAds;

@interface ViewController () <GADBannerViewDelegate>

@property(nonatomic, strong) GAMBannerView *bannerView;

@end

@implementation ViewController

-   (void)viewDidLoad {
  [super viewDidLoad];
  ...
  self.bannerView.delegate = self;
}

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

כל אחת מהשיטות ב-GADBannerViewDelegate מסומנת כאופציונלית, לכן צריך רק להטמיע את ה-methods הרצויות. הדוגמה הבאה מממשת כל method ורושמת הודעה במסוף:

Swift

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  print("bannerViewDidReceiveAd")
}

func bannerView(_ bannerView: GADBannerView, didFailToReceiveAdWithError error: Error) {
  print("bannerView:didFailToReceiveAdWithError: \(error.localizedDescription)")
}

func bannerViewDidRecordImpression(_ bannerView: GADBannerView) {
  print("bannerViewDidRecordImpression")
}

func bannerViewWillPresentScreen(_ bannerView: GADBannerView) {
  print("bannerViewWillPresentScreen")
}

func bannerViewWillDismissScreen(_ bannerView: GADBannerView) {
  print("bannerViewWillDIsmissScreen")
}

func bannerViewDidDismissScreen(_ bannerView: GADBannerView) {
  print("bannerViewDidDismissScreen")
}

Objective-C

-   (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  NSLog(@"bannerViewDidReceiveAd");
}

-   (void)bannerView:(GADBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error {
  NSLog(@"bannerView:didFailToReceiveAdWithError: %@", [error localizedDescription]);
}

-   (void)bannerViewDidRecordImpression:(GADBannerView *)bannerView {
  NSLog(@"bannerViewDidRecordImpression");
}

-   (void)bannerViewWillPresentScreen:(GADBannerView *)bannerView {
  NSLog(@"bannerViewWillPresentScreen");
}

-   (void)bannerViewWillDismissScreen:(GADBannerView *)bannerView {
  NSLog(@"bannerViewWillDismissScreen");
}

-   (void)bannerViewDidDismissScreen:(GADBannerView *)bannerView {
  NSLog(@"bannerViewDidDismissScreen");
}

ראו את הדוגמה להענקת גישה למודעות כדי להטמיע שיטות להענקת גישה למודעות באנר באפליקציית ההדגמה ל-API ל-iOS.

SWIFT Objective-C

תרחישים לדוגמה

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

הוספת באנר להיררכיית התצוגות אחרי שהמודעה מתקבלת

מומלץ להשהות את ההוספה של GAMBannerView להיררכיית התצוגות עד לאחר קבלת המודעה. אפשר לעשות זאת על ידי האזנה לאירוע bannerViewDidReceiveAd::

Swift

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  // Add banner to view and add constraints as above.
  addBannerViewToView(bannerView)
}

Objective-C

-   (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView {
  // Add bannerView to view and add constraints as above.
  [self addBannerViewToView:self.bannerView];
}

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

אפשר גם להשתמש באירוע bannerViewDidReceiveAd: כדי להוסיף אנימציה למודעת באנר אחרי שהיא מוחזרת, כמו בדוגמה הבאה:

Swift

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  bannerView.alpha = 0
  UIView.animate(withDuration: 1, animations: {
    bannerView.alpha = 1
  })
}

Objective-C

-   (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView {
  bannerView.alpha = 0;
  [UIView animateWithDuration:1.0 animations:^{
    bannerView.alpha = 1;
  }];
}

השהיה והמשך של האפליקציה

בפרוטוקול GADBannerViewDelegate יש שיטות להודיע לכם על אירועים, למשל כשקליק גורם להצגה או לסגירה של שכבת-על. אם אתם רוצים לבדוק אם האירועים האלה נבעו ממודעות, אתם צריכים להירשם ל-methods GADBannerViewDelegate.

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

שיטת GADBannerViewDelegate אמצעי תשלום ב-iOS
bannerViewWillPresentScreen: viewWillDisappear: של UIViewController
bannerViewWillDismissScreen: viewWillAppear: של UIViewController
bannerViewDidDismissScreen: viewDidAppear: של UIViewController

ספירת חשיפות ידנית

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

Swift

bannerView.enableManualImpressions = true

Objective-C

self.bannerView.enableManualImpressions = YES;

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

Swift

bannerView.recordImpression()

Objective-C

[self.bannerView recordImpression];

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

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

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

Swift

// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.

// Called when the banner receives an app event.
optional public func bannerView(_ banner: GAMBannerView,
    didReceiveAppEvent name: String, withInfo info: String?)

Objective-C

// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.

@optional
// Called when the banner receives an app event.
-   (void)bannerView:(GAMBannerView *)banner
    didReceiveAppEvent:(NSString *)name
              withInfo:(NSString *)info;

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

Swift

import GoogleMobileAds

class ViewController: UIViewController, GADAppEventDelegate {
}

Objective-C

@import GoogleMobileAds;

@interface ViewController : UIViewController <GADAppEventDelegate> {
}

@end

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

Swift

bannerView.appEventDelegate = self

Objective-C

self.bannerView.appEventDelegate = self;

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

Swift

func bannerView(_ banner: GAMBannerView, didReceiveAppEvent name: String,
    withInfo info: String?) {
  if name == "color" {
    guard let info = info else { return }
    switch info {
    case "green":
      // Set background color to green.
      view.backgroundColor = UIColor.green
    case "blue":
      // Set background color to blue.
      view.backgroundColor = UIColor.blue
    default:
      // Set background color to black.
      view.backgroundColor = UIColor.black
    }
  }
}

Objective-C

-   (void)bannerView:(GAMBannerView *)banner
    didReceiveAppEvent:(NSString *)name
              withInfo:(NSString *)info {
  if ([name isEqual:@"color"]) {
    if ([info isEqual:@"green"]) {
      // Set background color to green.
      self.view.backgroundColor = [UIColor greenColor];
    } else if ([info isEqual:@"blue"]) {
      // Set background color to blue.
      self.view.backgroundColor = [UIColor blueColor];
    } else
      // Set background color to black.
      self.view.backgroundColor = [UIColor blackColor];
    }
  }
}

בנוסף, זהו הקריאייטיב התואם ששולח הודעות על אירועים באפליקציה בצבע appEventDelegate:

<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: 0px;
      left: 0px;
      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>

ראו את הדוגמה 'אירועים באפליקציה של Ad Manager' להטמעה של אירועי אפליקציה באפליקציית ההדגמה ל-iOS API.

SWIFT Objective-C

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

דוגמאות ב-GitHub

  • דוגמה למודעות באנר מותאמות ומעוגנות: Swift | Objective-C

השלבים הבאים

מודעות באנר שאפשר לכווץ

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

מודעות באנר מותאמות שמוצגות בתוך הטקסט

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

עוד נושאים מעניינים