מודעות מותאמות מסוג Advanced

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

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

סידור תצוגות ה-UIView

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

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

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

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

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

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

בחלונית השקעים, השקעים ב-GADNativeAdView מקושרים ל-UIViews שמתוכנן ב-Interface Builder. כך מערכת ה-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

  // 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
}

SwiftUI

יצירת מודל תצוגה

יוצרים מודל תצוגה (view) שטעון מודעה מותאמת ומפרסם שינויים בנתונים של מודעה מותאמת:

import GoogleMobileAds

class NativeAdViewModel: NSObject, ObservableObject, GADNativeAdLoaderDelegate {
  @Published var nativeAd: GADNativeAd?
  private var adLoader: GADAdLoader!

  func refreshAd() {
    adLoader = GADAdLoader(
      adUnitID: "ca-app-pub-3940256099942544/3986624511",
      // The UIViewController parameter is optional.
      rootViewController: nil,
      adTypes: [.native], options: nil)
    adLoader.delegate = self
    adLoader.load(GADRequest())
  }

  func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd: GADNativeAd) {
    // Native ad data changes are published to its subscribers.
    self.nativeAd = nativeAd
    nativeAd.delegate = self
  }

  func adLoader(_ adLoader: GADAdLoader, didFailToReceiveAdWithError error: Error) {
    print("\(adLoader) failed with error: \(error.localizedDescription)")
  }
}
NativeAdViewModel.swift

יצירת UIViewRepresentable

יוצרים UIViewRepresentable עבור GADNativeView ומירשם למינוי לשינויים בנתונים בכיתה ViewModel:

private struct NativeAdView: UIViewRepresentable {
  typealias UIViewType = GADNativeAdView

  // Observer to update the UIView when the native ad value changes.
  @ObservedObject var nativeViewModel: NativeAdViewModel

  func makeUIView(context: Context) -> GADNativeAdView {
    return
      Bundle.main.loadNibNamed(
        "NativeAdView",
        owner: nil,
        options: nil)?.first as! GADNativeAdView
  }

  func updateUIView(_ nativeAdView: GADNativeAdView, context: Context) {
    guard let nativeAd = nativeViewModel.nativeAd else { return }

    // Each UI property is configurable using your native ad.
    (nativeAdView.headlineView as? UILabel)?.text = nativeAd.headline

    nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

    (nativeAdView.bodyView as? UILabel)?.text = nativeAd.body

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

    (nativeAdView.starRatingView as? UIImageView)?.image = imageOfStars(from: nativeAd.starRating)

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

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

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

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

    // 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
  }
NativeContentView.swift

הוספת התצוגה להיררכיית התצוגות

הקוד הבא מדגים הוספה של UIViewRepresentable להיררכיית התצוגה:

struct NativeContentView: View {
  // Single source of truth for the native ad data.
  @StateObject private var nativeViewModel = NativeAdViewModel()

  var body: some View {
    ScrollView {
      VStack(spacing: 20) {
        NativeAdView(nativeViewModel: nativeViewModel)  // Updates when the native ad data changes.
          .frame(minHeight: 300)  // minHeight determined from xib.
NativeContentView.swift

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 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 יוכל לקבל ולעבד אירועי ממשק משתמש בצורה תקינה. בגלל השלב הנוסף הזה, מומלץ להציג נכסי מודעות מותאמים אישית באמצעות UILabel ו-UIImageView במקום זאת.

דוגמה מלאה ב-GitHub

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

דוגמה למודעות מותאמות מסוג Advanced ב-Swift דוגמה למודעות מותאמות ב-SwiftUI דוגמה למודעות מותאמות מסוג Advanced ב-Objective-C

GADMediaView

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

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

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

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

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Objective-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

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

השלבים הבאים

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