Systemdefiniertes natives Anzeigenformat ausliefern
Beim Laden einer nativen Anzeige empfängt Ihre App ein natives Anzeigenobjekt über eine der GADAdLoaderDelegate
-Protokollmeldungen. Ihre App ist dann für die Auslieferung der Anzeige verantwortlich. Dies muss jedoch nicht sofort geschehen.
Das SDK enthält einige nützliche Ressourcen, um die Auslieferung systemdefinierter Anzeigenformate zu erleichtern.
GADNativeAdView
Für GADNativeAd
gibt es eine entsprechende Anzeigenansichtsklasse: GADNativeAdView
.
Diese Anzeigenansichtsklasse ist eine UIView
, die Publisher zum Ausliefern der Anzeige verwenden sollten.
Ein einzelnes GADNativeAdView
kann beispielsweise eine einzelne Instanz einer GADNativeAd
anzeigen. Jedes UIView
-Objekt, das zur Auslieferung der Assets dieser Anzeige verwendet wird, sollte Unteransichten dieses GADNativeAdView
-Objekts sein.
Wenn Sie beispielsweise eine Anzeige in einer UITableView
ausliefern, könnte die Ansichtshierarchie für eine der Zellen so aussehen:
Die Klasse GADNativeAdView
bietet außerdem IBOutlets
, mit dem die für jedes einzelne Asset verwendete Ansicht registriert wird, sowie eine Methode zum Registrieren des GADNativeAd
-Objekts selbst. Wenn die Ansichten auf diese Weise registriert werden, kann das SDK unter anderem die folgenden Aufgaben automatisch ausführen:
- Klicks werden erfasst.
- Impressionen werden erfasst, wenn das erste Pixel auf dem Bildschirm sichtbar ist.
- Anzeigenauswahl-Overlay
Datenschutzinfo-Overlay
Bei indirekten nativen Anzeigen, die über Ad Manager Backfill, Ad Exchange oder AdSense ausgeliefert werden, wird vom SDK ein Datenschutzinfo-Overlay hinzugefügt. Lassen Sie in der bevorzugten Ecke Ihrer nativen Anzeigenansicht Platz für das automatisch eingefügte Datenschutzinfo-Logo. Außerdem muss das Datenschutzinfo-Overlay auf Inhalten platziert werden, in denen das Symbol gut zu sehen ist. Weitere Informationen zu Darstellung und Funktion des Overlays finden Sie in den Implementierungsrichtlinien für programmatische native Anzeigen.
Anzeigenattribution für programmatische native Anzeigen
Bei der Auslieferung programmatischer nativer Anzeigen muss eine Anzeigenkennzeichnung eingeblendet werden, um darauf hinzuweisen, dass es sich um eine Anzeige handelt. Die Richtlinien finden Sie auf dieser Seite.
Codebeispiel
Sehen wir uns an, wie native Anzeigen mit Ansichten ausgeliefert werden, die dynamisch aus xib-Dateien geladen werden. Dies kann ein sehr nützlicher Ansatz sein, wenn Sie GADAdLoaders
verwenden, das für die Anforderung mehrerer Formate konfiguriert ist.
Layout der UIViews
Zuerst muss das Layout der UIViews
definiert werden, auf der die Assets nativer Anzeigen erscheinen sollen.
Sie können dies im Interface Builder genauso tun wie beim Erstellen jeder anderen xib-Datei. So könnte das Layout
einer nativen Anzeige aussehen:
Oben rechts im Bild sehen Sie den Wert für die benutzerdefinierte Klasse. Er ist auf
GADNativeAdView
:
Dies ist die Anzeigenansichtsklasse, mit der ein GADNativeAd
-Element ausgeliefert wird.
Außerdem müssen Sie die benutzerdefinierte Klasse für GADMediaView
festlegen, mit der das Video oder Bild für die Anzeige eingeblendet wird.
Outlets mit Datenansichten verknüpfen
Sobald die Ansichten vorhanden sind und Sie dem Layout die richtige Anzeigenansichtsklasse zugewiesen haben, verknüpfen Sie die Asset-Outlets der Anzeigenansicht mit der von Ihnen erstellten UIViews
.
So können Sie die Asset-Outlets der Anzeigenansicht mit dem UIViews
verknüpfen, der für eine Anzeige erstellt wurde:
Im Steckdosenfeld wurden die Steckdosen in GADNativeAdView
mit dem UIViews
im Interface Builder verknüpft. Dadurch weiß das SDK, welches UIView
welches Asset ausliefert.
Diese Outlets repräsentieren die Ansichten, auf die in der Anzeige geklickt werden kann.
Anzeige einblenden
Sobald das Layout fertig ist und die Outlets verknüpft sind, besteht der letzte Schritt darin, Ihrer App Code hinzuzufügen, mit dem eine Anzeige nach dem Laden ausgeliefert wird. Hier ist eine Methode zum Einblenden 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 die vollständigen Implementierungen für natives benutzerdefiniertes Rendering , die in Swift und Objective-C geschrieben sind.
Beispiel für benutzerdefiniertes Google Ad Manager-Rendering herunterladen
GADMediaView
Bild- und Video-Assets werden Nutzern über GADMediaView
angezeigt.
Dies ist ein UIView
, der in einer xib-Datei definiert oder dynamisch erstellt werden kann.
Sie sollte wie jede andere Asset-Ansicht innerhalb der Ansichtshierarchie eines GADNativeAdView
platziert werden.
Wie bei allen Asset-Ansichten muss der Inhalt der Medienansicht dargestellt werden. Dazu wird das Attribut mediaContent
für GADMediaView
verwendet. Das Attribut mediaContent
von GADNativeAd
enthält Medieninhalte, die an eine GADMediaView
übergeben werden können.
Hier ist ein Snippet aus dem
Beispiel für benutzerdefiniertes Rendering (Swift
| Objective-C)
aus dem GADMediaView
mit den Assets für native Anzeigen aus GADMediaContent
von GADNativeAd
:
Swift
nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent
Objective-C
nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;
In der UI-Builder-Datei für die native Anzeigenansicht muss die benutzerdefinierte Klasse für die Ansichten auf GADMediaView
gesetzt und mit der Steckdose mediaView
verbunden sein.
Modus für Bildinhalte ändern
Die Klasse GADMediaView
berücksichtigt beim Anzeigen von Bildern das Attribut UIView
contentMode
. Wenn Sie die Skalierung eines Bildes in GADMediaView
ändern möchten, legen Sie dafür im Attribut contentMode
von GADMediaView
den entsprechenden UIViewContentMode
fest.
So füllen Sie beispielsweise GADMediaView
aus, wenn ein Bild zu sehen ist (Anzeige enthält kein Video):
Swift
nativeAdView.mediaView?.contentMode = .aspectFill
Objective-C
nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;
GADMediaContent
Die Klasse GADMediaContent
enthält die Daten, die sich auf den Medieninhalt der nativen Anzeige beziehen, der mithilfe der Klasse GADMediaView
dargestellt wird. Wird für die Property GADMediaView
mediaContent
festgelegt:
Wenn ein Video-Asset verfügbar ist, wird es gepuffert und beginnt mit der Wiedergabe im
GADMediaView
. Anhand vonhasVideoContent
können Sie feststellen, ob ein Video-Asset verfügbar ist.Wenn die Anzeige kein Video-Asset enthält, wird das
mainImage
-Asset heruntergeladen und stattdessen innerhalb vonGADMediaView
platziert.