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

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

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

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

GADNativeAdView

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

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

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

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

שכבת-על של 'מודעות שנבחרו'

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

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

שיוך (Attribution) של מודעות מותאמות פרוגרמטיות

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

קוד לדוגמה

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

פריסה של תצוגות הממשק למשתמש

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

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

GADNativeAdView. זהו המחלקה של צפייה במודעה שמשמשת להצגת GADNativeAd.

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

קישור שקעים לתצוגות

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

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

הצגת המודעה

טיפ: כדאי ללמוד איך להציג מודעות מותאמות באמצעות SwiftUI.

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

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.

להורדת דוגמה לעיבוד מותאם אישית של Google Ad Manager

GADMediaView

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

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

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

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

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;

GADMediaContent

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

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

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

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

השלבים הבאים

למידע נוסף על פרטיות המשתמשים