Nativo avanzato

Visualizzazione di un formato dell'annuncio nativo definito dal sistema

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

Punto chiave: Scopri di più sugli annunci nativi nel nostro Playbook degli annunci nativi. Leggi anche le norme e linee guida sugli annunci nativi per indicazioni su come visualizzare gli annunci nativi.

Visualizzazione annunci nativi GAD

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

Se stessi visualizzando un annuncio in un UITableView, ad esempio, la gerarchia di visualizzazione di una delle celle avrebbe il seguente aspetto:

La classe GADNativeAdView fornisce anche IBOutlets utilizzato per registrare la vista utilizzata per ogni singola risorsa, oltre a un metodo per registrare l'oggetto GADNativeAd stesso. La registrazione delle viste in questo modo consente all'SDK di gestire automaticamente attività come:

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

Overlay Scegli Tu!

Per gli annunci nativi indiretti (pubblicati tramite AdMob backfill oppure tramite Ad Exchange o AdSense), l'SDK aggiunge un overlay Scegli Tu!. Lascia lo spazio nell'angolo che preferisci 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 sulle funzioni dell'overlay, consulta le linee guida per l'implementazione di annunci nativi programmatici.

Attribuzione dell'annuncio

Quando mostri annunci nativi programmatici, devi mostrare un'attribuzione a indicare che la visualizzazione è una pubblicità.

Esempio di codice

Diamo un'occhiata a come visualizzare gli annunci nativi usando le visualizzazioni caricate dinamicamente da file xib. Questo può essere un approccio molto utile quando si utilizza GADAdLoaders configurato per richiedere più formati.

Definire gli elementi UIView

Il primo passaggio consiste nel definire gli UIViews in cui verranno visualizzati gli asset degli annunci nativi. Puoi eseguire questa operazione nel generatore di interfacce come faresti con qualsiasi altro file xib. Ecco come potrebbe apparire il layout di un annuncio nativo:

Annota il valore del corso personalizzato in alto a destra nell'immagine. È impostata su

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

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

Collegamento delle prese alle viste

Una volta posizionate le visualizzazioni e assegnata la classe di visualizzazione dell'annuncio corretta al layout, collega gli asset delle visualizzazioni della visualizzazione dell'annuncio al UIViews che hai creato. Ecco come puoi collegare gli asset della visualizzazione annuncio alla UIViews creata per un annuncio:

Nel pannello delle prese, le prese in GADNativeAdView sono state collegate alla pagina UIViews del generatore di interfacce. Questo consente all'SDK di sapere quale UIView mostra quale asset. È importante ricordare, inoltre, che queste uscite rappresentano le visualizzazioni selezionabili nell'annuncio.

Visualizzazione dell'annuncio

Una volta completato il layout e collegati le uscite, l'ultimo passaggio è aggiungere alla tua app il codice che mostra un annuncio dopo il caricamento. Ecco un metodo per mostrare un annuncio nella vista 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 disattiva l'interazione dell'utente per UIButton che mostra l'invito all'azione. Se utilizzi UIButtons per visualizzare gli asset degli annunci nativi, devi anche disattivare la loro interazione dell'utente in modo che l'SDK Google Mobile Ads possa ricevere ed elaborare correttamente gli eventi UI. A causa di questo passaggio aggiuntivo, spesso è meglio evitare del tutto i pulsanti UI e utilizzare invece UILabel e UIImageView.

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

Scarica l'esempio di annunci nativi avanzati

Visualizzazione media GAD

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

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 posizionato all'interno della gerarchia di visualizzazione di un elemento GADNativeAdView, come in qualsiasi altra visualizzazione di asset.

Come per tutte le visualizzazioni asset, è necessario inserire i contenuti nella visualizzazione multimediale. Ciò viene impostato utilizzando la proprietà mediaContent su GADMediaView. La proprietà mediaContent di GADNativeAd include contenuti multimediali che possono essere passati a GADMediaView.

Ecco uno snippet di Esempio di annunci nativi avanzati (Swift | Objective-C) che mostra come completare GADMediaView con gli asset degli annunci nativi usando GADMediaContent da GADNativeAd:

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Objective-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

Assicurati che nel file del generatore di interfacce della tua visualizzazione dell'annuncio nativo la classe personalizzata delle visualizzazioni sia impostata su GADMediaView e di averlo collegato alla presa mediaView.

Cambiare la modalità dei contenuti delle immagini

La classe GADMediaView rispetta la proprietà UIViewcontentMode quando mostra le immagini. Se vuoi modificare il modo in cui un'immagine viene ridimensionata nel GADMediaView, imposta il corrispondente UIViewContentMode sulla proprietà contentMode del GADMediaView per ottenere questo risultato.

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

Swift

nativeAdView.mediaView?.contentMode = .aspectFill

Objective-C

nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;

Contenuto multimediale GAD

La classe GADMediaContent contiene i dati relativi ai contenuti multimediali dell'annuncio nativo, che viene visualizzato utilizzando la classe GADMediaView. Quando è impostato nella proprietà GADMediaView mediaContent:

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

• Se l'annuncio non contiene un asset video, l'asset mainImage viene scaricato e posizionato all'interno di GADMediaView.

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