Natif avancé

Afficher un format d'annonce native défini par le système

Lors du chargement d'une annonce native, votre application reçoit un objet d'annonce native via l'un des messages du protocole GADAdLoaderDelegate. Votre application se charge ensuite d'afficher l'annonce (même si elle ne doit pas nécessairement le faire immédiatement). Pour faciliter l'affichage des formats d'annonces définis par le système, le SDK propose des ressources utiles.

GADNativeAdView

Pour GADNativeAd, il existe une classe "ad view" correspondante : GADNativeAdView. Cette classe d'affichage de l'annonce est un UIView que les éditeurs doivent utiliser pour afficher l'annonce. Un seul élément GADNativeAdView, par exemple, peut afficher une seule instance d'un objet GADNativeAd. Chacun des objets UIView utilisés pour afficher les éléments de cette annonce doit être des sous-vues de cet objet GADNativeAdView.

Par exemple, si vous affichez une annonce dans un UITableView, la hiérarchie des vues de l'une des cellules peut se présenter comme suit:

La classe GADNativeAdView fournit également un IBOutlets permettant d'enregistrer la vue utilisée pour chaque élément, ainsi qu'une méthode pour enregistrer l'objet GADNativeAd lui-même. Enregistrer les vues de cette manière permet au SDK de gérer automatiquement des tâches telles que:

• Enregistrement des clics.
• Enregistrement d'impressions (lorsque le premier pixel est visible à l'écran)
• Affichage de la superposition "Choisir sa pub".

Superposition "Choisir sa pub"

Pour les annonces natives indirectes (diffusées via des Ad Managerannonces de remplissage ou avec Ad Exchange ou AdSense), une superposition "Choisir sa pub" est ajoutée par le SDK. Veuillez laisser de l'espace dans l'angle de votre choix de la vue de votre annonce native pour le logo "Choisir sa pub" inséré automatiquement. Assurez-vous également que la superposition "Choisir sa pub" est placée sur du contenu qui permet à l'icône d'être bien visible. Pour en savoir plus sur l'apparence et la fonction de la superposition, consultez les Consignes d'implémentation des annonces natives programmatiques.

Attribution d'annonces pour les annonces natives programmatiques

Lorsque vous affichez des annonces natives programmatiques, vous devez afficher une attribution d'annonce pour indiquer que la vue est une publicité. Pour connaître le règlement, consultez cette page.

Exemple de code

Voyons comment afficher des annonces natives à l'aide de vues chargées dynamiquement à partir de fichiers Xib. Cette approche peut s'avérer très utile lorsque vous utilisez GADAdLoaders configuré pour demander plusieurs formats.

Mettre en page les UIViews

La première étape consiste à mettre en page l'UIViews qui affichera les composants des annonces natives. Vous pouvez le faire dans Interface Builder comme vous le feriez pour tout autre fichier xib. Voici à quoi pourrait ressembler une annonce native:

Notez la valeur de classe personnalisée en haut à droite de l'image. Elle est réglée sur

GADNativeAdView. Il s'agit de la classe d'affichage de l'annonce utilisée pour afficher un GADNativeAd.

Vous devez également définir la classe personnalisée pour GADMediaView, qui permet d'afficher la vidéo ou l'image de l'annonce.

Associer des points de vente à des vues

Une fois que les vues sont en place et que vous avez attribué la classe d'affichage d'annonce appropriée à la mise en page, associez les sorties d'éléments de la vue d'annonce au UIViews que vous avez créé. Pour associer les composants du visionnage de l'annonce au UIViews créé pour une annonce, procédez comme suit :

Dans le panneau de prise, les prises de GADNativeAdView ont été associées aux UIViews disposées dans Interface Builder. Cela permet au SDK de savoir quel UIView affiche quel élément. N'oubliez pas non plus que ces prises représentent les vues sur lesquelles il est possible de cliquer dans l'annonce.

Affichage de l'annonce

Une fois la mise en page terminée et les prises liées, la dernière étape consiste à ajouter à votre application un code permettant d'afficher une annonce une fois celle-ci chargée. Voici une méthode pour afficher une annonce dans l'affichage défini ci-dessus:

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

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

Notre dépôt GitHub contient toutes les implémentations d'avec affichage personnalisé natif écrit à la fois en Swift et en Objective-C.

Télécharger l'exemple d'affichage personnalisé Google Ad Manager

GADMediaView

Les éléments image et vidéo sont présentés aux utilisateurs via GADMediaView. Il s'agit d'un UIView qui peut être défini dans un fichier xib ou construit de manière dynamique. Il doit être placé dans la hiérarchie des vues d'un GADNativeAdView, comme pour toute autre vue d'élément.

Comme pour toutes les vues d'éléments, le contenu de la vue multimédia doit être renseigné. Ce paramètre est défini à l'aide de la propriété mediaContent sur GADMediaView. La propriété mediaContent de GADNativeAd inclut du contenu multimédia qui peut être transmis à un GADMediaView.

Voici un extrait de l'exemple Exemple d'affichage personnalisé (Swift | Objective-C) qui montre comment renseigner le GADMediaView avec les composants d'annonces natives à l'aide de GADMediaContent de GADNativeAd:

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

Assurez-vous que la classe personnalisée des vues est définie sur GADMediaView dans le fichier de générateur d'interface de la vue de votre annonce native et que vous l'avez connectée à la prise mediaView.

Modification du mode de contenu des images

La classe GADMediaView respecte la propriété UIView contentMode lors de l'affichage des images. Si vous souhaitez modifier la mise à l'échelle d'une image dans GADMediaView, définissez le UIViewContentMode correspondant sur la propriété contentMode de GADMediaView.

Par exemple, pour remplir le champ GADMediaView lorsqu'une image s'affiche (l'annonce ne comporte pas de vidéo):

nativeAdView.mediaView?.contentMode = .aspectFill

nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;

GADMediaContent

La classe GADMediaContent contient les données liées au contenu multimédia de l'annonce native, qui s'affiche à l'aide de la classe GADMediaView. Lorsque ce paramètre est défini dans la propriété GADMediaView mediaContent:

• Si un asset vidéo est disponible, il est mis en mémoire tampon et sa lecture commence dans GADMediaView. Pour savoir si un asset vidéo est disponible, consultez hasVideoContent.

• Si l'annonce ne contient pas d'asset vidéo, l'asset mainImage est téléchargé et placé dans GADMediaView.

Étapes suivantes

En savoir plus sur la confidentialité des utilisateurs