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

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

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

ייחוס מודעות

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

קוד לדוגמה

נראה איך להציג מודעות מותאמות באמצעות תצוגות שנטענות באופן דינמי מקובצי xib. זו יכולה להיות גישה מאוד שימושית כשמשתמשים ב-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.

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

תצוגת GADMedia

נקודה חשובה: אם רוצים לכלול נכס תמונות ראשי בפריסה של המודעה המותאמת, צריך להשתמש בנכס 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;

תוכן GADMedia

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

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

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

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

השלבים הבאים

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