Nativo avanzato

Visualizzazione di un formato di annuncio nativo definito dal sistema

Quando viene caricato un annuncio nativo, la tua app riceverà un oggetto annuncio nativo tramite uno dei messaggi del protocollo GADAdLoaderDelegate . La tua app è quindi responsabile della visualizzazione dell'annuncio (sebbene non debba necessariamente farlo immediatamente). Per semplificare la visualizzazione dei formati di annunci definiti dal sistema, l'SDK offre alcune risorse utili.

Punto chiave: Ulteriori informazioni sugli annunci nativi nel nostro Playbook sugli annunci nativi . Inoltre, consulta le norme e le linee guida per gli annunci nativiper indicazioni su come visualizzare i tuoi annunci nativi.

GADNativeAdView

Per GADNativeAd , esiste una classe "visualizzazione annuncio" corrispondente: GADNativeAdView . Questa classe di visualizzazione dell'annuncio è una UIView che i publisher devono utilizzare per visualizzare l'annuncio. Un singolo GADNativeAdView , ad esempio, può visualizzare una singola istanza di un GADNativeAd . Ciascuno degli oggetti UIView utilizzati per visualizzare gli asset dell'annuncio deve essere viste secondarie di quell'oggetto GADNativeAdView .

Ad esempio, se stavi visualizzando un annuncio in un UITableView , la gerarchia di visualizzazione per una delle celle potrebbe essere simile a questa:

La classe GADNativeAdView fornisce anche IBOutlets utilizzato per registrare la vista utilizzata per ogni singolo asset e un metodo per registrare l'oggetto GADNativeAd stesso. La registrazione delle viste in questo modo consente all'SDK di gestire automaticamente attività quali:

• Registrazione dei clic.
• Registrazione delle impressioni (quando il primo pixel è visibile sullo schermo).
• Visualizzazione dell'overlay AdChoices.

L'overlay AdChoices

Per gli annunci nativi indiretti (pubblicati tramite il backfill AdMobo tramite Ad Exchange o AdSense), l'SDK aggiunge un overlay AdChoices. Si prega di lasciare spazio nell'angolo preferito della visualizzazione dell'annuncio nativo per il logo AdChoices inserito automaticamente. Inoltre, assicurati che l'overlay AdChoices sia posizionato su un contenuto che consenta di visualizzare facilmente l'icona. Per ulteriori informazioni sull'aspetto e sulla funzione dell'overlay, consulta le linee guida per l'implementazione degli annunci nativi programmatici .

Attribuzione dell'annuncio

Quando visualizzi annunci nativi programmatici, devi visualizzare un'attribuzione dell'annuncio per indicare che la visualizzazione è un annuncio pubblicitario.

Esempio di codice

Diamo un'occhiata a come visualizzare annunci nativi utilizzando visualizzazioni caricate dinamicamente da file xib. Questo può essere un approccio molto utile quando si utilizzano GADAdLoaders configurati per richiedere più formati.

Disposizione delle UIViews

Il primo passaggio consiste nel disporre le UIViews che visualizzeranno gli asset degli annunci nativi. Puoi farlo in Interface Builder come faresti quando crei qualsiasi altro file xib. Ecco come potrebbe apparire il layout di un annuncio nativo:

Nota il valore della classe personalizzata in alto a destra nell'immagine. È impostato su

GADNativeAdView . Questa è la classe di visualizzazione dell'annuncio utilizzata per visualizzare un GADNativeAd .

Dovrai anche impostare la classe personalizzata per GADMediaView , che viene utilizzata per visualizzare il video o l'immagine per l'annuncio.

Collegamento di punti vendita alle viste

Una volta che le visualizzazioni sono a posto e hai assegnato la classe di visualizzazione annuncio corretta al layout, collega i punti vendita delle risorse della visualizzazione annuncio alle UIViews che hai creato. Ecco come puoi collegare gli sbocchi delle risorse della visualizzazione dell'annuncio alle UIViews create per un annuncio:

Nel pannello outlet, i punti vendita in GADNativeAdView sono stati collegati alle UIViews disposte in Interface Builder. Ciò consente all'SDK di sapere quale UIView mostra quale risorsa. È anche importante ricordare che questi punti vendita rappresentano le visualizzazioni selezionabili nell'annuncio.

Visualizzazione dell'annuncio

Una volta completato il layout e collegati i punti vendita, l'ultimo passaggio consiste nell'aggiungere codice alla tua app che visualizza un annuncio una volta caricato. Ecco un metodo per visualizzare un annuncio nella vista definita sopra:

Veloce

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

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

Nota: come puoi vedere, l'esempio di codice sopra disabilita l'interazione dell'utente per l' UIButton che mostra l'invito all'azione. Se utilizzi UIButtons per visualizzare gli asset degli annunci nativi, devi anche disabilitare la loro interazione con l'utente in modo che l'SDK Google Mobile Ads possa ricevere ed elaborare correttamente gli eventi dell'interfaccia utente. A causa di questo passaggio aggiuntivo, spesso è meglio evitare completamente UIButtons e utilizzare invece UILabel e UIImageView .

Il nostro repository GitHub ha le implementazioni complete perannunci nativi avanzati scritti sia in Swift che in Objective-C.

Scarica l'esempio avanzato nativo

GADMediaView

Punto chiave: se desideri includere un asset immagine principale nel layout del tuo annuncio nativo, devi utilizzare l'asset GADMediaView invece dell'asset UIImageView .

Le risorse di immagini e video vengono visualizzate agli utenti tramite GADMediaView . Questo è un UIView che può essere definito in un file xib o costruito dinamicamente. Dovrebbe essere posizionato all'interno della gerarchia di visualizzazione di un GADNativeAdView , come con qualsiasi altra visualizzazione di risorse.

Come per tutte le visualizzazioni delle risorse, la visualizzazione multimediale deve avere il contenuto popolato. Questo viene impostato utilizzando la proprietà mediaContent su GADMediaView . La proprietà mediaContent di GADNativeAd contiene contenuto multimediale che può essere passato a un GADMediaView .

Ecco uno snippet dall'esempioNative Advanced ( Swift | Objective-C )che mostra come popolare GADMediaView con gli asset degli annunci nativi utilizzando GADMediaContent da GADNativeAd :

Veloce

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Obiettivo-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

Assicurati che nel tuo file di interfaccia per la visualizzazione dell'annuncio nativo di avere la classe personalizzata delle visualizzazioni impostata su GADMediaView e di averlo collegato all'outlet mediaView .

Modifica della modalità del contenuto dell'immagine

La classe GADMediaView rispetta la proprietà UIView contentMode durante la visualizzazione delle immagini. Se desideri modificare il modo in cui un'immagine viene ridimensionata in GADMediaView , imposta la UIViewContentMode corrispondente sulla proprietà contentMode di GADMediaView per ottenere questo risultato.

Ad esempio, per riempire GADMediaView quando viene visualizzata un'immagine (l'annuncio non ha video):

Veloce

nativeAdView.mediaView?.contentMode = .aspectFill

Obiettivo-C

nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;

GADMediaContent

La classe GADMediaContent contiene i dati relativi al contenuto multimediale dell'annuncio nativo, che viene visualizzato utilizzando la classe GADMediaView . Quando è impostato sulla proprietà GADMediaView mediaContent :

• Se una risorsa video è disponibile, viene memorizzata nel buffer e inizia la riproduzione all'interno di GADMediaView . Puoi sapere se una risorsa video è disponibile controllando hasVideoContent .

• Se l'annuncio non contiene una risorsa video, la risorsa immagine principale viene scaricata e inserita all'interno GADMediaView mainImage

Punto chiave: per impostazione predefinita, mainImage è la prima risorsa immagine scaricata. Se viene utilizzato disableImageLoading , mainImage è nil e dovresti impostare questa proprietà sull'immagine scaricata manualmente. Tieni presente che questa immagine verrà utilizzata solo quando non è disponibile alcuna risorsa video .