Nativo avanzato

Visualizzazione di un formato dell'annuncio nativo definito dal sistema

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

Punto chiave: Consulta le norme e le linee guida sugli annunci nativi per indicazioni su come eseguire il rendering degli annunci nativi.

GADNativeAdView

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

Ad esempio, se visualizzi un annuncio in un UITableView, la gerarchia delle viste per una delle celle potrebbe essere la seguente:

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

• Registrazione dei clic.
• Registrazione di impressioni (quando il primo pixel è visibile sullo schermo).
• Visualizzazione dell'overlay Scegli Tu!.

Overlay Scegli Tu!

Per gli annunci nativi indiretti (pubblicati tramite Ad Manager backfill oppure tramite Ad Exchange o AdSense), l'SDK aggiunge un overlay Scegli Tu!. Lascia spazio nell'angolo preferito della visualizzazione dell'annuncio nativo per il logo Scegli Tu! inserito automaticamente. Inoltre, assicurati che l'overlay Scegli Tu! sia posizionato sui contenuti in modo che l'icona sia facilmente visibile. Per ulteriori informazioni sull'aspetto e sul funzionamento dell'overlay, consulta le linee guida per l'implementazione degli annunci nativi programmatici.

Nota: Scegli Tu! viene mostrato solo per gli annunci venduti direttamente nello Spazio economico europeo.

Attribuzione degli annunci nativi programmatici

Quando mostri annunci nativi programmatici, devi mostrare un'attribuzione dell'annuncio per indicare che la visualizzazione è una pubblicità. Consulta questa pagina per le linee guida sulle norme.

Esempio di codice

Vediamo come mostrare gli annunci nativi utilizzando le visualizzazioni caricate dinamicamente dai file xib. Questo può essere un approccio molto utile quando si utilizzano GADAdLoaders configurati per richiedere più formati.

Presentazione degli elementi UIView

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

Nota il valore Classe personalizzata in alto a destra nell'immagine. È impostata su

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

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

Collegamento tra punti vendita e visualizzazioni

Una volta che le visualizzazioni sono attive e hai assegnato la classe di visualizzazione dell'annuncio corretta al layout, collega i punti di distribuzione degli asset della visualizzazione annuncio al UIViews che hai creato. Ecco come potresti collegare i punti vendita degli asset della visualizzazione dell'annuncio al UIViews creato per un annuncio:

Nel riquadro delle prese, le prese in GADNativeAdView sono state collegate alla UIViews prevista in Interface Builder. In questo modo l'SDK può sapere quale UIView mostra quale asset. È importante ricordare anche che queste piattaforme rappresentano le visualizzazioni su cui è possibile fare clic nell'annuncio.

Visualizzazione dell'annuncio

Suggerimento: scopri come visualizzare annunci nativi utilizzando SwiftUI.

Una volta completato il layout e collegati le prese, l'ultimo passaggio consiste nell'aggiungere codice alla tua app che mostri un annuncio una volta caricato. Per mostrare un annuncio nella visualizzazione definita sopra:

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

Nota: come puoi vedere, l'esempio di codice riportato sopra disabilita l'interazione dell'utente per UIButton che mostra l'invito all'azione. Se utilizzi UIButtons per mostrare gli asset di annunci nativi, devi anche disattivare la loro interazione 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 conviene evitare del tutto UIButtons e usare invece UILabel e UIImageView.

Il nostro repository GitHub include le implementazioni complete per gliper gli annunci con rendering personalizzato nativo scritte sia in Swift che in Objective-C.

Scarica l'esempio di rendering personalizzato di Google Ad Manager

GADMediaView

Punto chiave: se vuoi includere un asset immagine principale nel layout del tuo annuncio nativo, devi utilizzare l'asset GADMediaView anziché l'asset UIImageView.

Gli asset immagine e video vengono mostrati agli utenti tramite GADMediaView. Questo è un UIView che può essere definito in un file xib o creato dinamicamente. Deve essere collocato all'interno della gerarchia di visualizzazione di GADNativeAdView, come per qualsiasi altra visualizzazione di asset.

Come per tutte le visualizzazioni degli asset, anche la visualizzazione multimediale deve avere i relativi contenuti completati. Questo valore viene impostato utilizzando la proprietà mediaContent su GADMediaView. La proprietà mediaContent di GADNativeAd contiene contenuti multimediali che possono essere trasmessi a GADMediaView.

Ecco uno snippet dell' Esempio di rendering personalizzato (Swift | Objective-C) che mostra come completare GADMediaView con gli asset annuncio nativi utilizzando GADMediaContent di GADNativeAd:

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Objective-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

Verifica che nel file di creazione delle interfacce per la visualizzazione dell'annuncio nativo la classe personalizzata delle visualizzazioni sia impostata su GADMediaView e di averla collegata all'uscita mediaView.

Modifica della modalità dei contenuti delle immagini

La classe GADMediaView rispetta la proprietà UIView contentMode quando mostri le immagini. Se vuoi cambiare il modo in cui un'immagine viene ridimensionata in GADMediaView, imposta il valore corrispondente UIViewContentMode nella proprietà contentMode di GADMediaView per ottenere questo risultato.

Ad esempio, per compilare il campo GADMediaView quando viene visualizzata un'immagine (l'annuncio non contiene video):

Swift

nativeAdView.mediaView?.contentMode = .aspectFill

Objective-C

nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;

GADMediaContent

La classe GADMediaContent contiene i dati relativi ai contenuti multimediali dell'annuncio nativo, che vengono visualizzati utilizzando la classe GADMediaView. Se impostato nella proprietà mediaContent GADMediaView:

• Se è disponibile un asset video, viene eseguito il buffering e la riproduzione inizia all'interno dell'GADMediaView. Per verificare se un asset video è disponibile, controlla hasVideoContent.

• Se l'annuncio non contiene un asset video, l'asset mainImage viene scaricato e inserito all'interno dell'elemento GADMediaView.

Punto chiave: per impostazione predefinita, mainImage è il primo asset immagine scaricato. Se viene utilizzato disableImageLoading, mainImage è nil e devi impostare questa proprietà sull'immagine scaricata manualmente. Tieni presente che questa immagine verrà utilizzata solo se non sono disponibili asset video.

Passaggi successivi

Scopri di più sulla privacy dell'utente.