מודעות מותאמות מתקדמות

הצגת פורמט של מודעות מותאמות בהגדרת המערכת

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

מילת המפתח: מידע נוסף על מודעות מותאמות זמין במודעות המותאמות . מומלץ גם לעיין במדיניות ובהנחיות בנושא מודעות מותאמות לקבלת הנחיות לעיבוד המודעות המותאמות.

GADNativeAdView

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

אם הצגת מודעה ב-UITableView, לדוגמה, היררכיית התצוגה של אחד התאים עשויה להיראות כך:

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

• תיעוד קליקים.
• הקלטת חשיפות (כאשר הפיקסל הראשון גלוי במסך).
• הצגת שכבת-העל AdChoices.

שכבת-העל של AdChoices

במודעות מותאמות עקיפות (המוצגות דרך AdMob מילוי חוזר או באמצעות Ad Exchange או AdSense), שכבת-על של AdChoices נוספת על ידי ה-SDK. יש להשאיר מקום בפינה המועדפת על התצוגה המפורטת של המודעות המותאמות, במקום עם הלוגו של AdChoices שנוסף באופן אוטומטי. בנוסף, יש לוודא ששכבת-העל של AdChoices מופיעה בתוכן שמאפשר לצפות בסמל בקלות. למידע נוסף על המראה והפונקציונליות של שכבת-העל, כדאי לעיין בהנחיות להטמעת מודעות מותאמות פרוגרמטיות.

ייחוס מודעות

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

קוד לדוגמה

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

פריסת ה-UIViews

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

שימו לב לערך של הכיתה המותאמת אישית בפינה השמאלית העליונה של התמונה. מוגדר

GADNativeAdView. זוהי הסיווג של תצוגת המודעות שמשמש להצגת GADNativeAd.

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

קישור שקעים לתצוגות מפורטות

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

בחלונית היציאה, השקעים ב-GADNativeAdView קושרו אל UIViews שבכלי הממשק. כך ה-SDK יוכל לדעת איזה UIView מציג איזה נכס. חשוב גם לזכור שהשקעים האלה מייצגים את הצפיות שניתן ללחוץ עליהן במודעה.

הצגת המודעה

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

Swift

// Mark: - GADNativeAdLoaderDelegate
func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd: GADNativeAd) {
  print("Received native ad: \(nativeAd)")
  refreshAdButton.isEnabled = true
  // Create and place ad in view hierarchy.
  let nibView = Bundle.main.loadNibNamed("NativeAdView", owner: nil, options: nil)?.first
  guard let nativeAdView = nibView as? GADNativeAdView else {
    return
  }
  setAdView(nativeAdView)

  // Set ourselves as the native ad delegate to be notified of native ad events.
  nativeAd.delegate = self

  // Populate the native ad view with the native ad assets.
  // The headline and mediaContent are guaranteed to be present in every native ad.
  (nativeAdView.headlineView as? UILabel)?.text = nativeAd.headline
  nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

  // This app uses a fixed width for the GADMediaView and changes its height to match the aspect
  // ratio of the media it displays.
  if let mediaView = nativeAdView.mediaView, nativeAd.mediaContent.aspectRatio > 0 {
    let heightConstraint = NSLayoutConstraint(
      item: mediaView,
      attribute: .height,
      relatedBy: .equal,
      toItem: mediaView,
      attribute: .width,
      multiplier: CGFloat(1 / nativeAd.mediaContent.aspectRatio),
      constant: 0)
    heightConstraint.isActive = true
  }

  // These assets are not guaranteed to be present. Check that they are before
  // showing or hiding them.
  (nativeAdView.bodyView as? UILabel)?.text = nativeAd.body
  nativeAdView.bodyView?.isHidden = nativeAd.body == nil

  (nativeAdView.callToActionView as? UIButton)?.setTitle(nativeAd.callToAction, for: .normal)
  nativeAdView.callToActionView?.isHidden = nativeAd.callToAction == nil

  (nativeAdView.iconView as? UIImageView)?.image = nativeAd.icon?.image
  nativeAdView.iconView?.isHidden = nativeAd.icon == nil

  (nativeAdView.starRatingView as? UIImageView)?.image = imageOfStars(
    fromStarRating: nativeAd.starRating)
  nativeAdView.starRatingView?.isHidden = nativeAd.starRating == nil

  (nativeAdView.storeView as? UILabel)?.text = nativeAd.store
  nativeAdView.storeView?.isHidden = nativeAd.store == nil

  (nativeAdView.priceView as? UILabel)?.text = nativeAd.price
  nativeAdView.priceView?.isHidden = nativeAd.price == nil

  (nativeAdView.advertiserView as? UILabel)?.text = nativeAd.advertiser
  nativeAdView.advertiserView?.isHidden = nativeAd.advertiser == nil

  // In order for the SDK to process touch events properly, user interaction should be disabled.
  nativeAdView.callToActionView?.isUserInteractionEnabled = false

  // Associate the native ad view with the native ad object. This is
  // required to make the ad clickable.
  // Note: this should always be done after populating the ad views.
  nativeAdView.nativeAd = nativeAd
}

Objective-C

#pragma mark GADNativeAdLoaderDelegate implementation

- (void)adLoader:(GADAdLoader *)adLoader didReceiveNativeAd:(GADNativeAd *)nativeAd {
  NSLog(@"Received native ad: %@", nativeAd);
  self.refreshButton.enabled = YES;

  // Create and place ad in view hierarchy.
  GADNativeAdView *nativeAdView =
      [[NSBundle mainBundle] loadNibNamed:@"NativeAdView" owner:nil options:nil].firstObject;
  [self setAdView:nativeAdView];

  // Set the mediaContent on the GADMediaView to populate it with available
  // video/image asset.
  nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

  // Populate the native ad view with the native ad assets.
  // The headline is guaranteed to be present in every native ad.
  ((UILabel *)nativeAdView.headlineView).text = nativeAd.headline;

  // These assets are not guaranteed to be present. Check that they are before
  // showing or hiding them.
  ((UILabel *)nativeAdView.bodyView).text = nativeAd.body;
  nativeAdView.bodyView.hidden = nativeAd.body ? NO : YES;

  [((UIButton *)nativeAdView.callToActionView)setTitle:nativeAd.callToAction
                                              forState:UIControlStateNormal];
  nativeAdView.callToActionView.hidden = nativeAd.callToAction ? NO : YES;

    ((UIImageView *)nativeAdView.iconView).image = nativeAd.icon.image;
  nativeAdView.iconView.hidden = nativeAd.icon ? NO : YES;

  ((UIImageView *)nativeAdView.starRatingView).image = [self imageForStars:nativeAd.starRating];
  nativeAdView.starRatingView.hidden = nativeAd.starRating ? NO : YES;

  ((UILabel *)nativeAdView.storeView).text = nativeAd.store;
  nativeAdView.storeView.hidden = nativeAd.store ? NO : YES;

  ((UILabel *)nativeAdView.priceView).text = nativeAd.price;
  nativeAdView.priceView.hidden = nativeAd.price ? NO : YES;

  ((UILabel *)nativeAdView.advertiserView).text = nativeAd.advertiser;
  nativeAdView.advertiserView.hidden = nativeAd.advertiser ? NO : YES;

  // In order for the SDK to process touch events properly, user interaction
  // should be disabled.
  nativeAdView.callToActionView.userInteractionEnabled = NO;

  // Associate the native ad view with the native ad object. This is
  // required to make the ad clickable.
  nativeAdView.nativeAd = nativeAd;
}

הערה: כפי שניתן לראות, דוגמה לקוד למעלה משביתה את אינטראקציה המשתמש עבור UIButton שמציגה את הקריאה לפעולה. אם אתה משתמש ב-UIbuttons כדי להציג נכסים של מודעות מותאמות, עליך להשבית גם את האינטראקציה שלהם כדי ש-Google Mobile Ads SDK יוכל לקבל ולעבד אירועים של ממשק המשתמש בצורה נכונה. בגלל השלב הנוסף הזה, עדיף להימנע לחלוטין מ-UIbuttons ולהשתמש ב-UILabel וב-UIImageView במקום זאת.

במאגר GitHub יש את ההטמעות המלאות שלמודעות מותאמות מתקדמות כתובות גם ב-Swift וגם Objective-C.

הורדת דוגמה של מודעות מותאמות מתקדמות

GADMediaView

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

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

כמו בכל תצוגות הנכסים, תוכן המדיה צריך להכיל את התוכן שלו. פעולה זו מוגדרת באמצעות המאפיין mediaContent ב-GADMediaView. נכס mediaContent של GADNativeAd מכיל תוכן מדיה שאפשר להעביר אל GADMediaView.

הנה קטע טקסט מהמקור דוגמה למודעה מותאמת מתקדמת (Swift | Objective-C) איך לאכלס את הפרמטר GADMediaView בנכסי המודעות המותאמות באמצעות GADMediaContent:

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Objective-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

יש לוודא שבקובץ של ממשק הממשק לתצוגת המודעות המותאמות שהגדרת את המחלקה המותאמת אישית כ-GADMediaView ושחיברת אותה לשקע mediaView.

שינוי מצב תוכן התמונה

הכיתה GADMediaView מכבדת את המאפיין UIView contentMode כשמוצגות תמונות. אם אתם רוצים לשנות את קנה המידה של תמונה ב-GADMediaView, צריך להגדיר את המאפיין UIViewContentMode בcontentMode של הנכס GADMediaView כדי לעשות זאת.

לדוגמה, כדי למלא את ה-GADMediaView כשתמונה מוצגת (אין מודעה בסרטון):

Swift

nativeAdView.mediaView?.contentMode = .aspectFill

Objective-C

nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;

תוכן GADMedia

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

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

• אם המודעה לא מכילה נכס וידאו, מתבצעת הורדה של נכס mainImage והוא ממוקם בתוך GADMediaView.

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