Google utilise la technologie IA pour traduire le contenu dans votre langue préférée. Les traductions générées par IA peuvent contenir des erreurs.

Afficher une annonce native

Sélectionnez une plate-forme : Android iOS Android (ancienne version)

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

Lorsqu'une annonce native se charge, votre application reçoit un objet d'annonce native à l'aide de l'un des messages de protocole GADAdLoaderDelegate. Votre application est ensuite chargée d'afficher l'annonce (bien qu'elle ne soit pas nécessairement obligée 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.

GADNativeAdView

Pour 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. Par exemple, un seul GADNativeAdView peut afficher une seule instance d'un GADNativeAd. Chacun des objets UIView utilisés pour afficher les composants de cette annonce doit être une sous-vue 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 IBOutlets, qui permet d'enregistrer la vue utilisée pour chaque élément individuel, ainsi qu'une méthode pour 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 via les annonces de remplissage AdMob, ou via la place de marché Ad Exchange ou AdSense), une superposition "Choisir sa pub" est ajoutée par le SDK. Laissez de l'espace dans l'angle de votre choix de votre vue d'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 clairement l'icône. Pour en savoir plus sur l'apparence et le fonctionnement de la superposition, consultez les Consignes d'implémentation des annonces natives programmatiques.

Attribution d'annonce

Lorsque vous diffusez des annonces natives programmatiques, vous devez afficher une attribution d'annonce pour indiquer qu'il s'agit d'une publicité.

Exemple de code

Cette section explique 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 à disposer le UIViews qui affichera les composants d'annonce native. Pour ce faire, utilisez 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 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 outlets à 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 sorties d'éléments de la vue d'annonce au UIViews que vous avez créé. Voici comment associer les sorties d'assets de la vue d'annonce au UIViews créé pour une annonce :

Dans le panneau des prises, les prises de GADNativeAdView ont été associées à l'élément UIViews disposé dans Interface Builder. Cela permet au SDK de savoir quel UIView affiche quel asset. Il est également important de se rappeler que ces points de vente représentent les vues sur lesquelles il est possible de cliquer dans l'annonce.

Afficher l'annonce

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

Swift

func adLoader(_ adLoader: AdLoader, didReceive nativeAd: NativeAd) {
  // ...

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

  // Some native ads will include a video asset, while others do not. Apps can use the
  // GADVideoController's hasVideoContent property to determine if one is present, and adjust their
  // UI accordingly.
  let mediaContent = nativeAd.mediaContent
  if mediaContent.hasVideoContent {
    // By acting as the delegate to the GADVideoController, this ViewController receives messages
    // about events in the video lifecycle.
    mediaContent.videoController.delegate = self
    videoStatusLabel.text = "Ad contains a video asset."
  } else {
    videoStatusLabel.text = "Ad does not contain a video."
  }

  // 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 aspectRatioConstraint = NSLayoutConstraint(
      item: mediaView,
      attribute: .width,
      relatedBy: .equal,
      toItem: mediaView,
      attribute: .height,
      multiplier: CGFloat(nativeAd.mediaContent.aspectRatio),
      constant: 0)
    mediaView.addConstraint(aspectRatioConstraint)
    nativeAdView.layoutIfNeeded()
  }

  // 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(from: 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
}ViewController.swift

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 relatives aux annonces natives :

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

- (void)adLoader:(GADAdLoader *)adLoader didReceiveNativeAd:(GADNativeAd *)nativeAd {
  // ...

  GADNativeAdView *nativeAdView = self.nativeAdView;

  // Set ourselves as the 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.
  ((UILabel *)nativeAdView.headlineView).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 content it displays.
  if (nativeAdView.mediaView != nil && nativeAd.mediaContent.aspectRatio > 0) {
    NSLayoutConstraint *aspectRatioConstraint =
        [NSLayoutConstraint constraintWithItem:nativeAdView.mediaView
                                     attribute:NSLayoutAttributeWidth
                                     relatedBy:NSLayoutRelationEqual
                                        toItem:nativeAdView.mediaView
                                     attribute:NSLayoutAttributeHeight
                                    multiplier:(nativeAd.mediaContent.aspectRatio)
                                      constant:0];
    [nativeAdView.mediaView addConstraint:aspectRatioConstraint];
    [nativeAdView layoutIfNeeded];
  }

  if (nativeAd.mediaContent.hasVideoContent) {
    // By acting as the delegate to the GADVideoController, this ViewController
    // receives messages about events in the video lifecycle.
    nativeAd.mediaContent.videoController.delegate = self;

    self.videoStatusLabel.text = @"Ad contains a video asset.";
  } else {
    self.videoStatusLabel.text = @"Ad does not contain a video.";
  }

  // 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.
  // Note: this should always be done after populating the ad views.
  nativeAdView.nativeAd = nativeAd;
}ViewController.m

Exemple complet sur GitHub

Pour voir l'exemple complet d'intégration d'annonces natives en Swift, SwiftUI et Objective-C, suivez le lien GitHub correspondant.

Exemple de format natif avancé en Swift Exemple d'annonce native en SwiftUI Exemple de format natif avancé en Objective-C

GADMediaView

Les composants Image et Vidéo sont présentés aux utilisateurs à l'aide de 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 n'importe quelle autre vue d'asset.

Comme pour toutes les vues d'assets, la vue multimédia doit être renseignée. Cette valeur 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 format natif avancé (Swift | Objective-C) qui montre comment renseigner le GADMediaView avec les composants d'annonce native à l'aide de GADMediaContent de GADNativeAd :

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContentViewController.swift

Objective-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;ViewController.m

Dans le fichier de l'outil de création d'interface de votre vue d'annonce native, assurez-vous que la classe personnalisée des vues est définie sur GADMediaView et que vous l'avez 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. Si vous souhaitez modifier la mise à l'échelle d'une image dans GADMediaView, définissez la propriété UIViewContentMode correspondante sur la propriété contentMode de GADMediaView.

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

Swift

nativeAdView.mediaView?.contentMode = .scaleAspectFitNativeAdSnippets.swift

Objective-C

nativeAdView.mediaView.contentMode = UIViewContentModeScaleAspectFit;NativeAdSnippets.m

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. Lorsqu'elle est définie sur la propriété mediaContent de GADMediaView :

Si un composant Vidéo est disponible, il est mis en mémoire tampon et commence à être lu dans le GADMediaView. Vous pouvez vérifier si un composant vidéo est disponible en consultant hasVideoContent.
Si l'annonce ne contient pas de composant vidéo, le composant mainImage est téléchargé et placé dans GADMediaView à la place.

Étapes suivantes

En savoir plus sur la confidentialité des utilisateurs

Afficher une annonce native Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

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

GADNativeAdView

Superposition "Choisir sa pub"

Attribution d'annonce

Exemple de code

Mettre en page les UIViews

Associer des outlets à des vues

Afficher l'annonce

Swift

SwiftUI

Créer un ViewModel

Créer un UIViewRepresentable

Ajouter la vue à la hiérarchie des vues

Objective-C

Exemple complet sur GitHub

GADMediaView

Swift

Objective-C

Modifier le mode de contenu de l'image

Swift

Objective-C

GADMediaContent

Étapes suivantes

Afficher une annonce native