Format natif avancé

Sélectionnez une plate-forme : Android iOS

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

Lorsqu'une annonce native est chargée, votre application reçoit un objet d'annonce native via l'un des messages du protocole GADAdLoaderDelegate. Votre application est ensuite responsable de l'affichage de l'annonce (bien qu'elle ne soit pas nécessairement tenue de le faire immédiatement). Pour faciliter l'affichage des formats d'annonces définis par le système, le SDK propose des ressources utiles.

Important : Consultez les Règles et consignes relatives aux annonces natives pour savoir comment afficher vos annonces natives.

GADNativeAdView

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

Si vous diffusiez une annonce dans un UITableView, par exemple, la hiérarchie des vues pour l'une des cellules pourrait se présenter comme suit :

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

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

Superposition "Choisir sa pub"

Pour les annonces natives indirectes (diffusées par remplissage Ad Manager ou via Ad Exchange ou AdSense), une icône "Vos choix de publicité" est ajoutée par le SDK. Laissez 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 un contenu qui permet de voir facilement l'icône. Pour en savoir plus sur l'apparence et le fonctionnement de l'overlay, consultez les consignes d'implémentation des annonces natives programmatiques.

Remarque : Les choix de l'utilisateur ne s'affichent que pour les annonces vendues directement dans l'EEE.

Attribution des annonces natives programmatiques

Lorsque vous diffusez des annonces natives programmatiques, vous devez afficher une attribution d'annonce pour indiquer que la vue est une publicité. Pour en savoir plus, consultez nos consignes relatives au règlement.

Exemple de code

Voyons comment afficher des annonces natives à l'aide de vues chargées de manière dynamique à 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 à définir la mise en page de l'UIViews qui affichera les composants d'annonce native. Vous pouvez le faire dans Interface Builder, comme vous le feriez pour créer n'importe quel autre fichier xib. Voici à quoi peut ressembler la mise en page d'une annonce native :

Notez la valeur de la classe personnalisée en haut à droite de l'image. Il est défini sur

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

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

Associer des points de vente à des vues

Une fois les vues en place et la classe de vue d'annonce appropriée attribuée à la mise en page, associez les points de vente des composants de la vue d'annonce au UIViews que vous avez créé. Voici comment associer les emplacements de composants de la vue d'annonce au UIViews créé pour une annonce :

Dans le panneau des points de vente, les points de vente de GADNativeAdView ont été associés à UIViews dans Interface Builder. Cela permet au SDK de savoir quel UIView affiche quel élément. Il est également important de noter que ces sources représentent les points de vue sur lesquels il est possible de cliquer dans l'annonce.

Afficher l'annonce

Une fois la mise en page terminée et les points de vente associés, ajoutez le code suivant à votre application pour afficher une annonce une fois qu'elle est chargée :

Swift

// Mark: - NativeAdLoaderDelegate
func adLoader(_ adLoader: AdLoader, didReceive nativeAd: NativeAd) {
  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? NativeAdView 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 MediaView 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

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

SwiftUI

Créer un ViewModel

Créez un modèle de vue qui charge une annonce native et publie les modifications apportées aux données de l'annonce native :

import GoogleMobileAds

class NativeAdViewModel: NSObject, ObservableObject, NativeAdLoaderDelegate {
  @Published var nativeAd: NativeAd?
  private var adLoader: AdLoader!

  func refreshAd() {
    adLoader = AdLoader(
      adUnitID: "ca-app-pub-3940256099942544/3986624511",
      // The UIViewController parameter is optional.
      rootViewController: nil,
      adTypes: [.native], options: nil)
    adLoader.delegate = self
    adLoader.load(Request())
  }

  func adLoader(_ adLoader: AdLoader, didReceive nativeAd: NativeAd) {
    // Native ad data changes are published to its subscribers.
    self.nativeAd = nativeAd
    nativeAd.delegate = self
  }

  func adLoader(_ adLoader: AdLoader, didFailToReceiveAdWithError error: Error) {
    print("\(adLoader) failed with error: \(error.localizedDescription)")
  }
}
NativeAdViewModel.swift

Créer un UIViewRepresentable

Créez un UIViewRepresentable pour NativeView et abonnez-vous aux modifications de données dans la classe ViewModel :

private struct NativeAdViewContainer: UIViewRepresentable {
  typealias UIViewType = NativeAdView

  // Observer to update the UIView when the native ad value changes.
  @ObservedObject var nativeViewModel: NativeAdViewModel

  func makeUIView(context: Context) -> NativeAdView {
    return
      Bundle.main.loadNibNamed(
        "NativeAdView",
        owner: nil,
        options: nil)?.first as! NativeAdView
  }

  func updateUIView(_ nativeAdView: NativeAdView, context: Context) {
    guard let nativeAd = nativeViewModel.nativeAd else { return }

    // Each UI property is configurable using your native ad.
    (nativeAdView.headlineView as? UILabel)?.text = nativeAd.headline

    nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

    (nativeAdView.bodyView as? UILabel)?.text = nativeAd.body

    (nativeAdView.iconView as? UIImageView)?.image = nativeAd.icon?.image

    (nativeAdView.starRatingView as? UIImageView)?.image = imageOfStars(from: nativeAd.starRating)

    (nativeAdView.storeView as? UILabel)?.text = nativeAd.store

    (nativeAdView.priceView as? UILabel)?.text = nativeAd.price

    (nativeAdView.advertiserView as? UILabel)?.text = nativeAd.advertiser

    (nativeAdView.callToActionView as? UIButton)?.setTitle(nativeAd.callToAction, for: .normal)

    // 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
  }
NativeContentView.swift

Ajouter la vue à la hiérarchie des vues

Le code suivant montre comment ajouter UIViewRepresentable à la hiérarchie des vues :

struct NativeContentView: View {
  // Single source of truth for the native ad data.
  @StateObject private var nativeViewModel = NativeAdViewModel()

  var body: some View {
    ScrollView {
      VStack(spacing: 20) {
        // Updates when the native ad data changes.
        NativeAdViewContainer(nativeViewModel: nativeViewModel)
          .frame(minHeight: 300)  // minHeight determined from xib.
NativeContentView.swift

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

Remarque : L'exemple de code désactive l'interaction de l'utilisateur pour l'appel à l'action UIButton. Si vous utilisez des UIButtons pour afficher des composants d'annonces natives, vous devez désactiver leur interaction utilisateur afin que le SDK Google Mobile Ads puisse recevoir et traiter correctement les événements d'UI. En raison de cette étape supplémentaire, il est préférable d'afficher les composants d'annonces natives à l'aide de UILabel et UIImageView.

Exemple complet sur GitHub

Consultez l'exemple complet d'intégration d'annonces natives en Swift, SwiftUI et Objective-C en cliquant sur le lien GitHub correspondant.

Exemple de rendu personnalisé Swift Exemple d'annonces natives SwiftUI Exemple de rendu personnalisé Objective-C

GADMediaView

Important : Vous devez utiliser l'asset GADMediaView plutôt que l'asset UIImageView si vous souhaitez inclure une image principale dans la mise en page de votre annonce native.

Les composants 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éments.

Comme pour toutes les vues d'assets, le contenu de la vue média doit être renseigné. Elle est définie à l'aide de la propriété mediaContent sur GADMediaView. La propriété mediaContent de GADNativeAd contient du contenu multimédia qui peut être transmis à un GADMediaView.

Voici un extrait de l'exemple de rendu personnalisé (Swift | Objective-C) qui montre comment remplir GADMediaView avec les composants d'annonce native à l'aide de GADMediaContent à partir de GADNativeAd :

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Objective-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

Assurez-vous que dans le fichier de l'interface Builder pour votre vue d'annonce native, la classe personnalisée des vues est définie sur GADMediaView et qu'elle est connectée à la sortie mediaView.

Modifier le mode de contenu de l'image

La classe GADMediaView respecte la propriété UIView contentMode lors de l'affichage des images. Pour modifier la façon dont une image est mise à l'échelle dans le GADMediaView, définissez le UIViewContentMode correspondant sur la propriété contentMode du GADMediaView.

Par exemple, pour remplir GADMediaView lorsqu'une image est affichée (l'annonce ne comporte pas de vidéo) :

Swift

nativeAdView.mediaView?.contentMode = .aspectFill

Objective-C

nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;

GADMediaContent

La classe GADMediaContent contient les données liées au contenu multimédia de l'annonce native, qui est affiché à l'aide de la classe GADMediaView. Lorsque la propriété mediaContent de GADMediaView est définie :

• Si un élément vidéo est disponible, il est mis en mémoire tampon et la lecture commence dans le GADMediaView. Pour savoir si un composant vidéo est disponible, vérifiez hasVideoContent.

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

Important : Par défaut, mainImage est le premier composant Image téléchargé. Si disableImageLoading est utilisé, mainImage est défini sur nil. Vous devez définir cette propriété sur l'image que vous avez téléchargée manuellement. Notez que cette image ne sera utilisée que si aucun composant vidéo n'est disponible.

Étapes suivantes

En savoir plus sur la confidentialité des utilisateurs