Erweiterte native Anzeigen

Vom System definiertes natives Anzeigenformat wird angezeigt

Wenn eine native Anzeige geladen wird, empfängt Ihre App ein natives Anzeigenobjekt über eine der GADAdLoaderDelegate-Protokollnachrichten. Die App muss dann die Anzeige bereitstellen. Das SDK bietet einige nützliche Ressourcen, um die Darstellung systemdefinierter Anzeigenformate zu erleichtern.

GADNativeAdView-Konto

Für GADNativeAd gibt es eine entsprechende Klasse der Anzeigenansicht: GADNativeAdView. Diese Anzeigenansichtsklasse ist eine UIView, die Publisher zur Darstellung der Anzeige verwenden sollten. In einer einzelnen GADNativeAdView kann beispielsweise eine einzelne Instanz eines GADNativeAd angezeigt werden. Jedes der UIView-Objekte, die zur Darstellung dieser Anzeigen-Assets verwendet werden, sollte Unteransichten dieses GADNativeAdView-Objekts sein.

Wenn du beispielsweise eine Anzeige in einer UITableView ausgeliefert hast, sieht die Ansichtshierarchie für eine der Zellen so aus:

Die Klasse GADNativeAdView bietet außerdem IBOutlets, mit dem die Ansicht für jedes einzelne Asset registriert wird, und eine Methode zur Registrierung des GADNativeAd-Objekts selbst. Wenn du die Ansichten auf diese Weise registrierst, kann das SDK unter anderem folgende Aufgaben automatisch ausführen:

  • Klicks werden erfasst.
  • Impressionen werden erfasst, sobald das erste Pixel auf dem Bildschirm sichtbar ist.
  • Das Datenschutzinfo-Overlay wird angezeigt.

Das Datenschutzinfo-Overlay

Für indirekte native Anzeigen, die über AdMobBackfill oder über Ad Exchange oder AdSense ausgeliefert werden, wird über das SDK ein AdChoices-Overlay hinzugefügt. Lassen Sie an Ihrer bevorzugten EckeIhrer nativen Anzeigenansicht Platz für das automatisch eingefügte Datenschutzinfo-Logo. Achte außerdem darauf, dass das AdChoices-Overlay auf Inhalten platziert wird, die das Symbol leicht erkennen kann. Weitere Informationen zur Darstellung und Funktion des Overlays finden Sie in den Implementierungsrichtlinien für programmatische native Anzeigen.

Anzeigenkennzeichnung

Bei programmatischen nativen Anzeigen muss eine Anzeigenkennzeichnung angegeben werden, um darauf hinzuweisen, dass es sich um eine Anzeige handelt.

Codebeispiel

Sehen wir uns nun an, wie native Anzeigen mithilfe von Ansichten dargestellt werden, die dynamisch aus Xib-Dateien geladen werden. Dies kann ein sehr nützlicher Ansatz sein, wenn Sie GADAdLoaders verwenden, um mehrere Formate anzufordern.

UIViews zusammenstellen

Zuerst muss das UIViews-Element angepasst werden, damit native Anzeigen-Assets ausgeliefert werden. Dazu können Sie wie beim Erstellen einer anderen Xib-Datei im Interface Builder vorgehen. So sieht das Layout einer nativen Anzeige aus:

Der Wert für die benutzerdefinierte Klasse wird oben rechts im Bild angezeigt. Sie ist auf

GADNativeAdView Dies ist die Anzeigenansichtsklasse, mit der ein GADNativeAd-Element ausgeliefert wird.

Außerdem musst du die benutzerdefinierte Klasse für GADMediaView festlegen, die zum Anzeigen des Videos oder Bildes für die Anzeige verwendet wird.

Steckdosen mit Datenansichten verknüpfen

Sobald die Ansichten eingerichtet sind und Sie dem Layout die richtige Anzeigenansichtsklasse zugewiesen haben, verknüpfen Sie die Asset-Outlets der Anzeigenansicht mit den UIViews, die Sie erstellt haben. So verknüpfen Sie die Asset-Outlets der Anzeigenansicht mit dem UIViews, der für eine Anzeige erstellt wurde:

Im Steckdosenbereich wurden die Steckdosen in GADNativeAdView mit dem UIViews verknüpft, die im Interface Builder angegeben sind. Dadurch weiß das SDK, welche UIView welches Asset anzeigt. Denken Sie auch daran, dass diese Outlets für die Aufrufe geeignet sind, die in der Anzeige angeklickt werden können.

Anzeige wird ausgeliefert

Nach Fertigstellung des Layouts und der Verknüpfung der Steckdosen muss der Code in die App eingefügt werden, sobald eine Anzeige geladen wurde. Hier eine Methode zur Darstellung einer Anzeige in der oben definierten Ansicht:

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

Unser GitHub-Repository enthält alle Implementierungen fürerweiterte native Anzeigen in Swift und Objective-C.

Beispiel für erweiterte native Anzeigen herunterladen

GADMediaView

Bild- und Video-Assets werden Nutzern über GADMediaView angezeigt. Dies ist eine UIView, die in einer Xib-Datei definiert oder dynamisch erstellt werden kann. Er sollte wie jede andere Assetansicht in der Ansichtshierarchie eines GADNativeAdView platziert werden.

Wie bei allen Assetansichten muss der Inhalt der Medienansicht aufgefüllt werden. Er wird mit der Property mediaContent in GADMediaView festgelegt. Die Property mediaContent von GADNativeAd enthält Medieninhalte, die an eine GADMediaView weitergegeben werden können.

Hier ein Snippet aus demBeispiel für erweiterte native Anzeigen (Swift | Objective-C) das zeigt, wie die GADMediaView mit den nativen Anzeigen-Assets mit GADMediaContent aus GADNativeAd gefüllt werden:

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Objective-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

Achten Sie darauf, dass in der Schnittstellen-Builder-Datei für Ihre native Anzeigenansicht die benutzerdefinierte Ansichtsansicht auf GADMediaView festgelegt ist und dass sie mit der Steckdose mediaView verbunden ist.

Bildinhaltsmodus ändern

Die Klasse GADMediaView respektiert die UIView contentMode-Property, wenn Bilder angezeigt werden. Wenn du die Skalierung eines Bildes in GADMediaView ändern möchtest, lege die entsprechende UIViewContentMode für das contentMode-Attribut von GADMediaView fest.

So füllst du beispielsweise den GADMediaView, wenn ein Bild angezeigt wird (die Anzeige enthält kein Video):

Swift

nativeAdView.mediaView?.contentMode = .aspectFill

Objective-C

nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;

GADMediaContent

Die Klasse GADMediaContent enthält die Daten zum Mediacontent der nativen Anzeige, die mithilfe der Klasse GADMediaView angezeigt werden. Wenn er in der Property GADMediaView festgelegt wird:mediaContent

  • Wenn ein Video-Asset verfügbar ist, wird es zwischengespeichert und im GADMediaView abgespielt. Mit hasVideoContent kannst du feststellen, ob ein Video-Asset verfügbar ist.

  • Wenn die Anzeige kein Video-Asset enthält, wird das mainImage-Asset heruntergeladen und stattdessen in GADMediaView platziert.