Native Ads ‒ Custom Rendering

Diese Funktion ist derzeit nur im Rahmen eines eingeschränkten Betaprogramms verfügbar. Wenden Sie sich an Ihren Account Manager, wenn Sie daran teilnehmen möchten. Die Funktion wird nach Abschluss der Betaphase allen Publishern zur Verfügung gestellt.

In diesem Leitfaden zeigen wir Ihnen, wie Sie das Google Mobile Ads SDK zum Implementieren nativer DFP-Anzeigen in einer iOS-App verwenden. Ergänzend finden Sie noch wichtige Punkte, die Sie in diesem Zusammenhang berücksichtigen sollten.

Voraussetzungen

In diesem Leitfaden wird vorausgesetzt, dass Sie bereits praktische Erfahrungen mit dem Google Mobile Ads SDK gesammelt haben. Falls noch nicht geschehen, sollten Sie unseren Startleitfaden durcharbeiten.

Was ist eine native Anzeige?

Native Anzeigen sind Anzeigen, die Nutzern über Komponenten der Benutzeroberfläche präsentiert werden, die plattformspezifisch sind. Sie werden unter Verwendung derselben Klassen dargestellt, die Sie bereits in Ihren Storyboards verwenden, und lassen sich so formatieren, dass sie dem visuellen Design Ihrer App entsprechen. Beim Laden einer nativen Anzeige empfängt Ihre App ein natives Anzeigenobjekt, das seine Assets enthält. Die App und nicht das SDK ist dann für die Darstellung zuständig.

Systemdefinierte native Anzeigenformate

Es gibt zwei systemdefinierte Formate für native Anzeigen: App-Installationsanzeigen und Contentanzeigen. App-Installationsanzeigen sind durch GADNativeAppInstallAd repräsentiert, Contentanzeigen durch GADNativeContentAd. Instanzen der Klassen enthalten die Assets für die native Anzeige.

Benutzerdefinierte native Anzeigenformate

Zusätzlich zu den systemdefinierten nativen Formaten haben DFP-Publisher die Möglichkeit, eigene native Anzeigenformate zu erstellen, indem sie benutzerdefinierte Listen mit Assets definieren. Diese werden als benutzerdefinierte native Anzeigenformate bezeichnet und lassen sich mit direkt verkauften nativen Anzeigen verwenden. Publisher können damit ihren Apps beliebig strukturierte Daten übergeben. Diese Anzeigen werden von der Klasse GADNativeCustomTemplateAd repräsentiert.

Benutzerdefinierte native Anzeigenformate werden auch als "benutzerdefinierte Anzeigenvorlagen" bezeichnet. Dies kommt daher, dass Publisher für benutzerdefinierte native Anzeigenformate eigene Vorlagen (Listen mit Assetnamen und -typen) definieren. Im weiteren Verlauf des Leitfadens wird dies deutlicher. Für den Moment sollten Sie sich nur merken, dass sich "benutzerdefinierte Anzeigenvorlagen" und "benutzerdefinierte native Anzeigenformate" auf dieselbe Art von Anzeigen beziehen.

Systemdefinierte native Anzeigenformate laden

Native Anzeigen werden über GADAdLoader-Objekte geladen. Diese senden unter Einhaltung des GADAdLoaderDelegate-Protokolls Nachrichten an ihre Delegate.

GADAdLoader initialisieren

Der folgende Code zeigt, wie Sie GADAdLoader für eine App-Installationsanzeige initialisieren:

Objective-C

self.adLoader = [[GADAdLoader alloc]
      initWithAdUnitID:@"/6499/example/native"
    rootViewController:rootViewController
               adTypes:@[ ... ad type constants ... ]
               options:@[ ... ad loader options objects ... ]];
self.adLoader.delegate = self;

Swift

adLoader = GADAdLoader(adUnitID: "/6499/example/native",
    rootViewController: self,
    adTypes: [ ... ad type constants ... ],
    options: [ ... ad loader options objects ... ])
adLoader.delegate = self

Über den Array-Parameter adTypes können von Ihrer App Konstanten übergeben werden, mit denen festgelegt wird, welche nativen Formate angefragt werden sollen. Das Array muss mindestens eine der folgenden Konstanten enthalten:

  • kGADAdLoaderAdTypeNativeAppInstall
  • kGADAdLoaderAdTypeNativeContent
  • kGADAdLoaderAdTypeNativeCustomTemplate

Native Anzeige anfragen

Sobald das GADAdLoader-Objekt initialisiert ist, rufen Sie seine loadRequest:-Methode auf, um eine Anzeige anzufragen:

Objective-C

[self.adLoader loadRequest:[DFPRequest request]];

Swift

adLoader.loadRequest(DFPRequest())

Die loadRequest-Methode in GADAdLoader akzeptiert dieselben DFPRequest-Objekte wie Banner- und Interstitial-Anzeigen. Sie können Anfrageobjekte verwenden, um Ausrichtungsinformationen wie bei anderen Anzeigentypen hinzuzufügen.

Ein einzelnes GADAdLoader-Objekt kann mehrere Anfragen senden, allerdings immer nur jeweils eine. Wird ein GADAdLoader erneut verwendet, muss gewartet werden, bis eine Anfrage abgeschlossen ist, bevor loadRequest erneut aufgerufen wird, um die nächste Anfrage zu senden. Falls Sie mehrere Anzeigen gleichzeitig anfragen müssen, können Sie mehrere GADAdLoader-Objekte verwenden.

GADAdLoaderDelegate-Protokolle

Für jedes angefragte native Anzeigenformat muss für den AdLoader-Delegaten ein entsprechendes Protokoll implementiert werden:

GADNativeAppInstallAdLoaderDelegate

Dieses Protokoll enthält eine Nachricht, die an den Delegaten gesendet wird, wenn eine App-Installationsanzeige geladen wurde:

Objective-C

- (void)adLoader:(GADAdLoader *)adLoader
    didReceiveNativeAppInstallAd:(GADNativeAppInstallAd *)nativeAppInstallAd;

Swift

public func adLoader(adLoader: GADAdLoader!,
    didReceiveNativeAppInstallAd nativeAppInstallAd: GADNativeAppInstallAd!)

GADNativeContentAdLoaderDelegate

In diesem Protokoll ist eine Nachricht definiert, die gesendet wird, wenn eine Contentanzeige geladen wurde:

Objective-C

- (void)adLoader:(GADAdLoader *)adLoader
    didReceiveNativeContentAd:(GADNativeContentAd *)nativeContentAd;

Swift

public func adLoader(adLoader: GADAdLoader!,
    didReceiveNativeContentAd nativeContentAd: GADNativeContentAd!)

Fehlgeschlagene Anfragen behandeln

Die oben beschriebenen Protokolle sind eine Erweiterung des GADAdLoaderDelegate-Protokolls. Dieses definiert eine Nachricht, die gesendet wird, wenn Anzeigen nicht geladen werden können:

Objective-C

- (void)adLoader:(GADAdLoader *)adLoader
    didFailToReceiveAdWithError:(GADRequestError *)error;

Swift

public func adLoader(adLoader: GADAdLoader!,
    didFailToReceiveAdWithError error: GADRequestError!)

Mit dem GADRequestError-Objekt können Sie die Ursache des Fehlers ermitteln.

Optionen für native Anzeigen

Der letzte an der Erstellung von GADAdLoader von oben beteiligte Parameter ist ein optionales Array von Objekten:

Objective-C

self.adLoader = [[GADAdLoader alloc]
      initWithAdUnitID:@"/6499/example/native"
    rootViewController:rootViewController
               adTypes:@[ ... ad type constants ... ]
               options:@[ ... ad loader options objects ... ]];

Swift

adLoader = GADAdLoader(adUnitID: "/6499/example/native",
    rootViewController: self,
    adTypes: [ ... ad type constants ... ],
    options: [ ... ad loader options objects ... ])

GADNativeAdImageAdLoaderOptions enthält Properties im Zusammenhang mit Bildern in nativen Anzeigen. Apps können steuern, wie ein GADAdLoader-Objekt Bildassets nativer Anzeigen handhabt, indem ein GADNativeAdImageAdLoaderOptions-Objekt erstellt, seine Properties festgelegt und es bei der Initialisierung übergeben wird.

GADNativeAdImageAdLoaderOptions weist folgende Properties auf:

disableImageLoading: Bildassets werden über Instanzen von GADNativeAdImage zurückgegeben. Darin sind die Properties image und imageURL enthalten. Ist disableImageLoading auf "false" gesetzt (Standardeinstellung), werden vom SDK Bildassets automatisch abgerufen und die Properties image und imageURL befüllt. Ist die Option hingegen auf "true" gesetzt, wird vom SDK lediglich die Property imageURL gefüllt. So können Sie die eigentlichen Bilder nach Belieben herunterladen.

preferredImageOrientation: Creatives können mehrere Bilder enthalten, die für unterschiedliche Geräteausrichtungen bestimmt sind. Apps können Bilder für eine bestimmte Ausrichtung anfragen, indem diese Property auf eine der folgenden Ausrichtungskonstanten gesetzt wird:

  • GADNativeAdImageAdLoaderOptionsOrientationAny
  • GADNativeAdImageAdLoaderOptionsOrientationLandscape
  • GADNativeAdImageAdLoaderOptionsOrientationPortrait

Wird die Methode nicht aufgerufen, wird der Standardwert GADNativeAdImageAdLoaderOptionsOrientationAny verwendet.

shouldRequestMultipleImages: Bildassets können mehrere Bilder enthalten. Wenn von Ihrer App dieser Wert auf "true" gesetzt wird, können alle Bilder aus allen Assets, in denen mehr als ein Bild enthalten ist, angezeigt werden. Ist dieser Wert "false" (Standardeinstellung), wird das SDK von Ihrer App angewiesen, nur das erste Bild aus Assets, in denen mehrere Bilder enthalten sind, anzuzeigen.

Falls beim Initialisieren von GADAdLoader keine GADAdLoaderOptions-Objekte übergeben werden, wird der Standardwert für jede Option verwendet.

GADNativeAdViewOptions

GADNativeAdViewAdOptions enthält die Property preferredAdChoicesPosition. Mit ihr können Publisher die Position angeben, an der das Datenschutzinfo-Symbol platziert werden soll. Das Symbol kann in jeder Ecke der Anzeige dargestellt werden. Die Standardeinstellung ist GADAdChoicesPositionTopRightCorner.

Im folgenden Beispiel wird gezeigt, wie Sie das Datenschutzinfo-Symbol in der linken oberen Ecke eine Anzeige platzieren:

Objective-C

GADNativeAdViewAdOptions *adViewOptions = [[GADNativeAdViewAdOptions alloc] init];
adViewOptions.preferredAdChoicesPosition = GADAdChoicesPositionTopLeftCorner;
self.adLoader = [[GADAdLoader alloc]
      initWithAdUnitID:@"/6499/example/native"
    rootViewController:self
               adTypes:@[ kGADAdLoaderAdTypeNativeAppInstall, kGADAdLoaderAdTypeNativeContent ]
               options:@[ adViewOptions ]];

Swift

let adViewOptions = GADNativeAdViewAdOptions()
adViewOptions.preferredAdChoicesPosition = .TopLeftCorner
adLoader = GADAdLoader(adUnitID: "/6499/example/native",
    rootViewController: self,
    adTypes: [ kGADAdLoaderAdTypeNativeAppInstall, kGADAdLoaderAdTypeNativeContent],
    options: [ adViewOptions ])

Zeitpunkt der Anzeigenanfrage

Apps, von denen native Anzeigen ausgeliefert werden, können diese vor der eigentlichen Auslieferung anfragen. In vielen Fällen ist dies die empfohlene Praxis. Von einer App, die eine Liste von Elementen darstellt, in die native Anzeigen eingestreut sind, können beispielsweise native Anzeigen für die gesamte Liste geladen werden, obwohl einige davon entweder überhaupt nicht oder erst ausgeliefert werden, wenn der Nutzer scrollt.

Anzeigen vorab zu laden ist eine programmiertechnisch clevere Lösung. Allerdings sollten Publisher alte Anzeigen nicht immer mitschleppen, ohne sie nochmals auszuliefern. Alle nativen Anzeigenobjekte, die noch nach mehr als einer Stunde ohne Auslieferung vorhanden sind, sollten verworfen und durch neue Anzeigen aus einer neuen Anfrage ersetzt werden.

Systemdefinierte native Anzeigenformate ausliefern

Beim Laden einer nativen Anzeige empfängt Ihre App ein natives Anzeigenobjekt über eine Nachricht des GADAdLoaderDelegate-Protokolls. Anschließend ist Ihre App für die Auslieferung der Anzeige zuständig. Dies ist allerdings nicht sofort nötig. Um die Auslieferung systemdefinierter Anzeigenformate zu erleichtern, enthält das SDK einige nützliche Ressourcen.

Anzeigenansichtsklassen

Für jedes systemdefinierte Format gibt es eine entsprechende Anzeigenansichtsklasse: GADNativeAppInstallAdView für App-Installationsanzeigen und GADNativeContentAdView für Contentanzeigen. Diese Anzeigenansichtsklassen sind UIViews, die Publisher zur Auslieferung nativer Anzeigen des entsprechenden Formats verwenden müssen. Eine einzelne GADNativeAppInstallAdView kann beispielsweise eine einzelne Instanz von GADNativeAppInstallAd ausliefern. Jede UIView, die zur Auslieferung der Assets dieser Anzeige verwendet wird, muss ein untergeordnetes Objekt des Objekts GADNativeAppInstallAdView sein.

Die Ansichtshierarchie für eine der Zellen könnte bei einer App-Installationsanzeige, die in einer UITableView ausgeliefert wird, wie folgt aussehen:

Die Anzeigenansichtsklassen enthalten auch IBOutlets zum Registrieren der für jedes einzelne Asset verwendeten Ansicht und Methoden zum Registrieren des GADNativeAd-Objekts selbst. Wenn die Ansichten und das native Anzeigenobjekt so registriert werden, können vom SDK unter anderem die folgenden Aufgaben automatisch gehandhabt werden:

  • Klicks erfassen
  • Impressionen erfassen (wenn das erste Pixel auf dem Bildschirm sichtbar ist)
  • Datenschutzinfo-Overlay für native Backfill-Creatives präsentieren

Datenschutzinfo-Overlay

Für indirekte native Anzeigen (über DFP-Backfill, Ad Exchange oder AdSense ausgeliefert) wird vom SDK ein Datenschutzinfo-Overlay hinzugefügt. Lassen Sie bitte in der bevorzugten Ecke Ihrer nativen Anzeigenansicht Platz für das automatisch eingefügte Datenschutzinfo-Logo. Das Datenschutzinfo-Overlay muss auf Content platziert werden, der die Erkennbarkeit des Symbols nicht beeinträchtigt. Weitere Informationen zu Darstellung und Funktion des Overlays finden Sie in den Richtlinien für programmatische native Anzeigen mit nativen Designs.

Codebeispiel

Sehen wir uns einmal an, wie native Anzeigen mithilfe von Ansichten ausgeliefert werden, die dynamisch aus xib-Dateien geladen werden. Diese Vorgehensweise kann sehr nützlich sein, wenn GADAdLoaders so konfiguriert sind, dass mehrere Formate angefragt werden.

Layout von UIViews in xib-Datei definieren

Zuerst muss das Layout der UIViews definiert werden, die native Anzeigenassets ausliefern sollen. Sie können dazu genau wie beim Erstellen jeder anderen xib-Datei den Interface Builder verwenden. So könnte das Layout für eine App-Installationsanzeige aussehen:

Und so könnte das Layout für eine Contentanzeige aussehen:

In beiden Bildern sehen Sie rechts oben einen Custom Class-Wert. Er ist auf GADNativeAppInstallAdView bzw. GADNativeContentAdView festgelegt. Dies sind die Anzeigenansichtsklassen, die zur Auslieferung einer GADNativeAppInstallAd bzw. GADNativeContentAd verwendet werden. Bei systemdefinierten Formaten müssen Sie die Anzeigenansichtsklasse verwenden, die mit dem Anzeigenformat übereinstimmt, das mit dem Layout ausgeliefert werden soll.

Outlets mit den Ansichten verknüpfen

Nachdem die Ansichten eingerichtet sind und Sie dem Layout die korrekte Anzeigenansichtsklasse zugewiesen haben, müssen Sie die Asset-Outlets mit den von Ihnen erstellten UIViews verknüpfen. In diesem Bild sehen Sie die Verknüpfung der Asset-Outlets der Anzeigenansicht mit den für eine App-Installationsanzeige erstellten UIViews:

In diesem Bild sehen Sie die Verknüpfung der Asset-Outlets der Anzeigenansicht mit den UIViews, die für eine Contentanzeige erstellt wurde:

Im Outlet-Bereich sind die Outlets in GADNativeAppInstallAdView und GADNativeContentAdView mit den UIViews verknüpft, deren Layouts im Interface Builder definiert wurden. Damit ist dem SDK bekannt, welche UIView welches Asset ausliefert. Diese Outlets repräsentieren die Ansichten, auf die in der Anzeige geklickt werden kann.

Anzeige ausliefern

Nachdem das Layout fertig und die Outlets verknüpft sind, besteht der letzte Schritt darin, Ihrer App Code hinzuzufügen, von dem eine Anzeige nach dem Laden ausgeliefert wird. Hier sehen Sie eine Methode, mit der eine App-Installationsanzeige in der oben definierten Ansicht ausgeliefert wird:

Objective-C

#pragma mark GADNativeAppInstallAdLoaderDelegate implementation

- (void)adLoader:(GADAdLoader *)adLoader
    didReceiveNativeAppInstallAd:(GADNativeAppInstallAd *)nativeAppInstallAd {
  // Create and place ad in view hierarchy.
  GADNativeAppInstallAdView *appInstallAdView =
      [[[NSBundle mainBundle] loadNibNamed:@"NativeAppInstallAdView"
                                     owner:nil
                                   options:nil] firstObject];
  // TODO: Make sure to add the GADNativeAppInstallAdView to the view hierarchy.

  // Associate the app install ad view with the app install ad object. This is required to make the
  // ad clickable.
  appInstallAdView.nativeAppInstallAd = nativeAppInstallAd;

  // Populate the app install ad view with the app install ad assets.
  // Some assets are guaranteed to be present in every app install ad.
  ((UILabel *)appInstallAdView.headlineView).text = nativeAppInstallAd.headline;
  ((UIImageView *)appInstallAdView.iconView).image = nativeAppInstallAd.icon.image;
  ((UILabel *)appInstallAdView.bodyView).text = nativeAppInstallAd.body;
  ((UIImageView *)appInstallAdView.imageView).image =
      ((GADNativeAdImage *)[nativeAppInstallAd.images firstObject]).image;
  [((UIButton *)appInstallAdView.callToActionView)setTitle:nativeAppInstallAd.callToAction
                                                  forState:UIControlStateNormal];

  // Other assets are not, however, and should be checked first.
  if (nativeAppInstallAd.starRating) {
    ((UIImageView *)appInstallAdView.starRatingView).image =
        [self imageForStars:nativeAppInstallAd.starRating];
    appInstallAdView.starRatingView.hidden = NO;
  } else {
    appInstallAdView.starRatingView.hidden = YES;
  }

  if (nativeAppInstallAd.store) {
    ((UILabel *)appInstallAdView.storeView).text = nativeAppInstallAd.store;
    appInstallAdView.storeView.hidden = NO;
  } else {
    appInstallAdView.storeView.hidden = YES;
  }

  if (nativeAppInstallAd.price) {
    ((UILabel *)appInstallAdView.priceView).text = nativeAppInstallAd.price;
    appInstallAdView.priceView.hidden = NO;
  } else {
    appInstallAdView.priceView.hidden = YES;
  }

  // In order for the SDK to process touch events properly, user interaction should be disabled on
  // all views associated with the GADNativeAppInstallAdView. Since UIButton has
  // userInteractionEnabled set to YES by default, views of this type must explicitly set
  // userInteractionEnabled to NO.
  appInstallAdView.callToActionView.userInteractionEnabled = NO;
}

Swift

// Mark: - GADNativeAppInstallAdLoaderDelegate

func adLoader(adLoader: GADAdLoader!,
    didReceiveNativeAppInstallAd nativeAppInstallAd: GADNativeAppInstallAd!) {
  // Create and place the ad in the view hierarchy.
  let appInstallAdView = NSBundle.mainBundle().loadNibNamed("NativeAppInstallAdView", owner: nil,
      options: nil).first as! GADNativeAppInstallAdView
  // TODO: Make sure to add the GADNativeAppInstallAdView to the view hierarchy.

  // Associate the app install ad view with the app install ad object. This is required to make
  // the ad clickable.
  appInstallAdView.nativeAppInstallAd = nativeAppInstallAd

  // Populate the app install ad view with the app install ad assets.
  // Some assets are guaranteed to be present in every app install ad.
  (appInstallAdView.headlineView as! UILabel).text = nativeAppInstallAd.headline
  (appInstallAdView.iconView as! UIImageView).image = nativeAppInstallAd.icon?.image
  (appInstallAdView.bodyView as! UILabel).text = nativeAppInstallAd.body
  (appInstallAdView.imageView as! UIImageView).image =
      (nativeAppInstallAd.images?.first as! GADNativeAdImage).image
  (appInstallAdView.callToActionView as! UIButton).setTitle(
      nativeAppInstallAd.callToAction, forState: UIControlState.Normal)

  // Other assets are not, however, and should be checked first.
  let starRatingView = appInstallAdView.starRatingView
  if let starRating = nativeAppInstallAd.starRating {
    (starRatingView as! UIImageView).image = imageOfStarsFromStarRating(starRating)
    starRatingView.hidden = false
  } else {
    starRatingView.hidden = true
  }

  let storeView = appInstallAdView.storeView
  if let store = nativeAppInstallAd.store {
    (storeView as! UILabel).text = store
    storeView.hidden = false
  } else {
    storeView.hidden = true
  }

  let priceView = appInstallAdView.priceView
  if let price = nativeAppInstallAd.price {
    (priceView as! UILabel).text = price
    priceView.hidden = false
  } else {
    priceView.hidden = true
  }

  // In order for the SDK to process touch events properly, user interaction should be disabled on
  // all views associated with the GADNativeAppInstallAdView. Since UIButton has
  // userInteractionEnabled set to true by default, views of this type must explicitly set
  // userInteractionEnabled to false.
  (appInstallAdView.callToActionView as! UIButton).userInteractionEnabled = false
}

Von dieser Methode wird eine Contentanzeige in der oben definierten Ansicht ausgeliefert:

Objective-C

#pragma mark GADNativeContentAdLoaderDelegate implementation

- (void)adLoader:(GADAdLoader *)adLoader
    didReceiveNativeContentAd:(GADNativeContentAd *)nativeContentAd {
  // Create and place ad in view hierarchy.
  GADNativeContentAdView *contentAdView =
      [[[NSBundle mainBundle] loadNibNamed:@"NativeContentAdView"
                                     owner:nil
                                   options:nil] firstObject];
  // TODO: Make sure to add the GADNativeContentAdView to the view hierarchy.

  // Associate the content ad view with the content ad object. This is required to make the ad
  // clickable.
  contentAdView.nativeContentAd = nativeContentAd;

  // Populate the content ad view with the content ad assets.
  // Some assets are guaranteed to be present in every content ad.
  ((UILabel *)contentAdView.headlineView).text = nativeContentAd.headline;
  ((UILabel *)contentAdView.bodyView).text = nativeContentAd.body;
  ((UIImageView *)contentAdView.imageView).image =
      ((GADNativeAdImage *)[nativeContentAd.images firstObject]).image;
  ((UILabel *)contentAdView.advertiserView).text = nativeContentAd.advertiser;
  [((UIButton *)contentAdView.callToActionView)setTitle:nativeContentAd.callToAction
                                               forState:UIControlStateNormal];

  // Other assets are not, however, and should be checked first.
  if (nativeContentAd.logo && nativeContentAd.logo.image) {
    ((UIImageView *)contentAdView.logoView).image = nativeContentAd.logo.image;
    contentAdView.logoView.hidden = NO;
  } else {
    contentAdView.logoView.hidden = YES;
  }

  // In order for the SDK to process touch events properly, user interaction should be disabled on
  // all views associated with the GADNativeContentAdView. Since UIButton has userInteractionEnabled
  // set to YES by default, views of this type must explicitly set userInteractionEnabled to NO.
  contentAdView.callToActionView.userInteractionEnabled = NO;
}

Swift

// Mark: - GADNativeContentAdLoaderDelegate

func adLoader(adLoader: GADAdLoader!,
    didReceiveNativeContentAd nativeContentAd: GADNativeContentAd!) {
  // Create and place the ad in the view hierarchy.
  let contentAdView = NSBundle.mainBundle().loadNibNamed("NativeContentAdView", owner: nil,
      options: nil).first as! GADNativeContentAdView
  // TODO: Make sure to add the GADNativeContentAdView to the view hierarchy.

  // Associate the content ad view with the content ad object. This is required to make the ad
  // clickable.
  contentAdView.nativeContentAd = nativeContentAd

  // Populate the content ad view with the content ad assets.
  // Some assets are guaranteed to be present in every content ad.
  (contentAdView.headlineView as! UILabel).text = nativeContentAd.headline
  (contentAdView.bodyView as! UILabel).text = nativeContentAd.body
  (contentAdView.imageView as! UIImageView).image =
      (nativeContentAd.images?.first as! GADNativeAdImage).image
  (contentAdView.advertiserView as! UILabel).text = nativeContentAd.advertiser
  (contentAdView.callToActionView as! UIButton).setTitle(
      nativeContentAd.callToAction, forState: UIControlState.Normal)

  // Other assets are not, however, and should be checked first.
  let logoView = contentAdView.logoView
  if let logoImage = nativeContentAd.logo?.image {
    (logoView as! UIImageView).image = logoImage
    logoView.hidden = false
  } else {
    logoView.hidden = true
  }

  // In order for the SDK to process touch events properly, user interaction should be disabled on
  // all views associated with the GADNativeContentAdView. Since UIButton has userInteractionEnabled
  // set to true by default, views of this type must explicitly set userInteractionEnabled to false.
  (contentAdView.callToActionView as! UIButton).userInteractionEnabled = false
}

Sie sehen, dass in den Codebeispielen oben die Nutzerinteraktion für die Schaltfläche UIButton, die den Call-to-Action einblendet, deaktiviert ist. Wenn Sie mit UIButtons native Anzeigenassets ausliefern, müssen Sie auch ihre Nutzerinteraktion deaktivieren, damit vom Google Mobile Ads SDK Benutzeroberflächenereignisse korrekt empfangen und verarbeitet werden können. Wegen diesem zusätzlichen Schritt ist es häufig besser, UIButtons komplett zu meiden und stattdessen UILabel und UIImageView zu verwenden.

In unserem GitHub-Repository finden Sie vollständige Implementierungen für das benutzerdefinierte Rendern nativer App-Installationsanzeigen und Contentanzeigen in den Programmiersprachen Swift und Objective-C.

Beispiel für benutzerdefiniertes DFP-Rendering herunterladen

Benutzerdefinierte native Anzeigenformate laden

Genau wie ihre systemdefinierten Pendants werden benutzerdefinierte native Anzeigenformate mithilfe von GADAdLoader-Objekten geladen. Wenn im Array adTypes beim Initialisieren eines GADAdLoader-Objekts die Konstante kGADAdLoaderAdTypeNativeCustomTemplate enthalten ist, wird es so konfiguriert, dass beim Laden von Anzeigen benutzerdefinierte native Formate angefragt werden.

GADNativeCustomTemplateAdLoaderDelegate

Das Protokoll zum Laden benutzerdefinierter Vorlagen enthält zwei Methoden. Die erste wird von GADAdLoader verwendet, um zu ermitteln, welche Vorlagen-IDs angefragt werden sollen:

Objective-C

- (NSArray *)nativeCustomTemplateIDsForAdLoader:(GADAdLoader *)adLoader;

Swift

public func nativeCustomTemplateIDsForAdLoader(adLoader: GADAdLoader!) -> [AnyObject]!

Jedem benutzerdefinierten nativen Anzeigenformat ist eine Vorlagen-ID zugeordnet, durch die es identifiziert wird. Beim Aufruf dieser Methode muss Ihre App ein Array zurückgeben, das die Vorlagen-IDs der Formate enthält, die damit ausgeliefert werden könnten.

Die zweite Nachricht wird gesendet, wenn die benutzerdefinierte Vorlage geladen ist. Dies ähnelt dem Vorgang für systemdefinierte Formate:

Objective-C

- (void)adLoader:(GADAdLoader *)adLoader
    didReceiveNativeCustomTemplateAd:(GADNativeCustomTemplateAd *)nativeCustomTemplateAd;

Swift

public func adLoader(adLoader: GADAdLoader!,
    didReceiveNativeCustomTemplateAd nativeCustomTemplateAd: GADNativeCustomTemplateAd!)

Vorlagen-IDs

Die zur eindeutigen Bezugnahme auf native benutzerdefinierte Anzeigenformate verwendeten Vorlagen-IDs finden Sie in der DFP-Benutzeroberfläche auf dem Tab Auslieferung im Bereich Creatives > Native Anzeigenformate:

Die Vorlagen-ID jedes benutzerdefinierten nativen Anzeigenformats steht unterhalb seines Namens. Ein Klick auf einen Namen bringt Sie auf einen Bildschirm mit Informationen zu den Feldern der Vorlage:

Hier können einzelne Felder hinzugefügt, bearbeitet oder entfernt werden. Rechts sehen Sie die Spalte Variablen-ID. Diese IDs werden für den Zugriff auf die einzelnen Assets verwendet. Im nächsten Abschnitt finden Sie dazu nähere Informationen.

Benutzerdefinierte native Anzeigeformate ausliefern

Benutzerdefinierte native Anzeigenformate unterscheiden sich von systemdefinierten darin, dass Publisher die Möglichkeit haben, ihre eigenen "Vorlagen" oder Listen mit Assets zu definieren, die eine Anzeige ausmachen. Die Vorgehensweise zur Auslieferung eines solchen Formats unterscheidet sich daher von systemdefinierten Formaten in einigen Punkten:

  1. Da die Klasse GADNativeCustomTemplateAd dazu gedacht ist, von Ihnen erstellte benutzerdefinierte native Anzeigenformate zu verarbeiten, hat sie keine benannten Abrufmethoden für Assets. Stattdessen enthält sie Methoden wie imageForKey: und stringForKey:, die die Variablen-ID eines Vorlagenfelds als Argument übernehmen.
  2. Es gibt keine spezielle Anzeigenansichtsklasse wie GADNativeContentAdView zur Verwendung mit GADNativeCustomTemplateAd. Sie können jede Benutzeroberfläche verwenden, die eine gute Nutzererfahrung ermöglicht.
  3. Da es keine spezielle Anzeigenansichtsklasse gibt, müssen Sie keine der Ansichten registrieren, die zum Ausliefern der Assets der Anzeige verwendet werden.

Hier sehen Sie das Beispiel einer Klasse, die eine einfache GADNativeCustomTemplateAd ausliefern kann:

MySimpleNativeAdView.h

Objective-C

@import UIKit;
@import GoogleMobileAds;

/// View representing a custom native ad format with template ID 10063170.
@interface MySimpleNativeAdView : UIView

// Weak references to this ad's asset views.
@property(weak, nonatomic) IBOutlet UILabel *headlineView;
@property(weak, nonatomic) IBOutlet UIImageView *mainImageView;
@property(weak, nonatomic) IBOutlet UILabel *captionView;

/// Populates the ad view with the custom native ad object.
- (void)populateWithCustomNativeAd:(GADNativeCustomTemplateAd *)customNativeAd;

@end

Swift

import UIKit
import GoogleMobileAds

/// Custom native ad view class with template ID 10063170.
class MySimpleNativeAdView: UIView {

  /// Weak references to this ad's asset views.
  @IBOutlet weak var headlineView: UILabel!
  @IBOutlet weak var mainImageView: UIImageView!
  @IBOutlet weak var captionView: UILabel!

  ...

  /// Populates the ad view with the custom native ad object.
  func populateWithCustomNativeAd(customNativeAd: GADNativeCustomTemplateAd) {
    ...
  }
}

MySimpleNativeAdView.m (Ausschnitt)

Objective-C

...
- (void)populateWithCustomNativeAd:(GADNativeCustomTemplateAd *)customNativeAd {
  self.customNativeAd = customNativeAd;

  // Populate the custom native ad assets.
  self.headlineView.text = [customNativeAd stringForKey:@"Headline"];
  self.mainImageView.image = [customNativeAd imageForKey:@"MainImage"].image;
  self.captionView.text = [customNativeAd stringForKey:@"Caption"];
}
...

Swift

...
func populateWithCustomNativeAd(customNativeAd: GADNativeCustomTemplateAd) {
  self.customNativeAd = customNativeAd

  // Populate the custom native ad assets.
  headlineView.text = self.customNativeAd.stringForKey("Headline")
  mainImageView.image = self.customNativeAd.imageForKey("MainImage")?.image
  captionView.text = self.customNativeAd.stringForKey("Caption")
}
...

Klicks und Impressionen bei benutzerdefinierten nativen Anzeigenformaten verarbeiten

Bei benutzerdefinierten nativen Anzeigenformaten ist Ihre App für das Erfassen von Impressionen und das Melden von Klickereignissen an das SDK zuständig.

Impressionen erfassen

Zum Erfassen einer Impression für eine benutzerdefinierte Vorlagenanzeige müssen Sie lediglich die Methode recordImpression der entsprechenden GADNativeCustomTemplateAd aufrufen:

Objective-C

[myCustomTemplateAd recordImpression];

Swift

myCustomTemplateAd.recordImpression()

Das SDK verhindert, dass für eine einzelne Anfrage Impressionen doppelt gezählt werden, falls Ihre App versehentlich die Methode für dieselbe Anzeige zweimal aufruft.

Klicks melden

Um dem SDK zu melden, dass bei einer Assetansicht ein Klick aufgetreten ist, rufen Sie die Methode performClickOnAssetWithKey:customClickHandler: für die entsprechende GADNativeCustomTemplateAd auf und übergeben Sie ihr den Namen des Assets, auf das geklickt wurde. Optional können Sie gleichzeitig einen benutzerdefinierten Klick-Handler übergeben (mehr dazu weiter unten). Wenn beispielsweise in Ihrer benutzerdefinierten Vorlage ein Asset namens "MainImage" enthalten ist und Sie einen Klick auf die Ansicht melden möchten, die diesem Asset entspricht, sieht der Code wie folgt aus:

Objective-C

[myCustomTemplateAd performClickOnAssetWithKey:@"MainImage"
                            customClickHandler:^{ /* an optional block */ }];

Swift

myCustomTemplateAd.performClickOnAssetWithKey(
    assetKey: "MainImage", customClickHandler: { /* an optional closure */ })

Sie müssen diese Methode nicht für jede Assetansicht aufrufen, die Ihrer Anzeige zugeordnet ist. Wenn Sie beispielsweise ein weiteres Asset namens "Bildunterschrift" verwenden, das zwar zu sehen sein soll, Nutzer jedoch nicht darauf klicken oder tippen, muss Ihre App performClickOnAssetWithKey:customClickHandler: für diese Ansicht nicht aufrufen.

Auf Klickaktionen bei benutzerdefinierten Vorlagenanzeigen reagieren

Wenn auf eine benutzerdefinierte Vorlagenanzeige geklickt wird, gibt es drei mögliche Reaktionen vom SDK. Sie werden in dieser Reihenfolge versucht:

  1. Den customClickHandler-Block in Objective-C bzw. customClickHandler-Closure in Swift aufrufen (falls übergeben)
  2. Jede Deep-Link-URL der Anzeige durchlaufen und die erste öffnen, für die eine passende App gefunden wurde
  3. Einen Browser öffnen und zur normalen Ziel-URL der Anzeige wechseln

Die Methode performClickOnAssetWithKey:customClickHandler: akzeptiert als zweiten Parameter in Objective-C einen Block und in Swift einen Closure. Wenn Sie einen Block oder einen Closure übergeben, wird er vom SDK ausgeführt. Mehr erfolgt nicht. Wenn Sie einen Null-Wert übergeben, verwendet das SDK jedoch wieder den Deep-Link und/oder die Ziel-URLs, die mit der Anzeige registriert sind.

Mit benutzerdefinierten Klick-Handlern kann Ihre App die beste Aktion als Reaktion auf einen Klick auswählen. Das kann beispielsweise die Aktualisierung der Benutzeroberfläche, die Darstellung eines weiteren Ansicht-Controllers oder einfach nur die Protokollierung des Klicks sein. In diesem Beispiel wird eine Meldung ausgegeben:

Objective-C

[self.customTemplateAd
    performClickOnAssetWithKey:@"MainImage"
            customClickHandler:^{
              [[[UIAlertView alloc] initWithTitle:@"Custom Click"
                                          message:@"You just clicked on the image!"
                                         delegate:self
                                cancelButtonTitle:@"OK"
                                otherButtonTitles:nil] show];
            }
];

Swift

customTemplateAd.performClickOnAssetWithKey(
    assetKey: "MainImage",
    customClickHandler: {
      let alertView = UIAlertView(title: "Custom Click",
          message: "You just clicked on the image!",
          delegate: self,
          cancelButtonTitle: "OK")
      alertView.alertViewStyle = .Default
      alertView.show()
    }
)

Nativen Anzeigencode testen

Direkt verkaufte Anzeigen

Wenn Sie gerne einmal testen möchten, wie sich direkt verkaufte native Anzeigen verhalten, können Sie diese DFP-Anzeigenblock-ID verwenden:

/6499/example/native

Dieser Anzeigenblock ist so konfiguriert, dass App-Installationsanzeigen und Contentanzeigen sowie ein benutzerdefiniertes natives Anzeigenformat mit den folgenden Assets ausgeliefert werden:

  • Anzeigentitel (Text)
  • MainImage (Bild)
  • Bildunterschrift (Text)

Die Vorlagen-ID für das benutzerdefinierte native Anzeigenformat lautet 10063170. Publisher dürfen derzeit nicht die Property testDevices in Verbindung mit nativen Anzeigenanfragen verwenden. Stattdessen sollte zum Testen die oben genannte Anzeigenblock-ID ohne über die Property testDevices registrierte Geräte verwendet werden.

Native Backfill-Anzeigen

Wenn Sie gerne einmal testen möchten, wie sich native Backfill-Anzeigen verhalten, können Sie diesen DFP-Anzeigenblock verwenden:

/6499/example/native-backfill

In diesem Anzeigenblock werden App-Installationsanzeigen und Contentanzeigen ausgeliefert, in denen das Datenschutzinfo-Overlay enthalten ist.

Bevor Sie die Anzeige live schalten, müssen Sie Ihren Code so ändern, dass er auf die tatsächlichen Anzeigenblock- und Vorlagen-IDs verweist.

Feedback geben zu...

SDK for DFP Users on iOS