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.
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.
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
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; }
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
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, controllahasVideoContent
.Se l'annuncio non contiene un asset video, l'asset
mainImage
viene scaricato e inserito all'interno dell'elementoGADMediaView
.
Passaggi successivi
Scopri di più sulla privacy dell'utente.