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 GADAdLoaderDelegate messages de protocole. Votre application est alors responsable l'affichage de l'annonce (mais pas nécessairement immédiatement). Pour faciliter l'affichage des formats d'annonces définis par le système, le SDK propose des ressources.

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

GADNativeAdView

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

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

La classe GADNativeAdView fournit également des IBOutlets permettant de s'inscrire la vue utilisée pour chaque élément et une méthode pour enregistrer GADNativeAd lui-même. Cet enregistrement des vues permet au SDK de gèrent des tâches telles que:

• Enregistrement des clics.
• Enregistrement des 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 Ad Manager) ou via Ad Exchange ou AdSense), une superposition "Choisir sa pub" est ajoutée le SDK. Veuillez laisser de l'espace de votre choix d'angle de la vue de votre annonce native pour le logo "Choisir sa pub" inséré automatiquement. Faites également assurez-vous que la superposition "Choisir sa pub" s'affiche sur du contenu qui permet à l'icône facilement visible. Pour en savoir plus sur l'apparence et la fonction de la superposition, consultez les consignes d'implémentation des annonces natives programmatiques.

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

Attribution des annonces pour les annonces natives programmatiques

Lorsque vous affichez des annonces natives programmatiques, vous devez indiquer une attribution d'annonce à indiquez que la vue est une publicité. Pour connaître les consignes à suivre, consultez cette page.

Exemple de code

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

Mettre en page les UIViews

La première étape consiste à définir le UIViews qui affichera les éléments des annonces natives. Vous pouvez le faire dans Interface Builder comme vous le feriez pour n'importe quelle autre xib. Voici comment la mise en page d'une annonce native peut ressembler à:

Notez la valeur "Custom Class" (Classe personnalisée) en haut à droite de l'image. Elle est réglée sur

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

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

Associer des points de vente à des vues

Une fois que les vues sont en place et que vous avez attribué la classe de visionnage d'annonce appropriée la mise en page, associez les sorties des assets de l'affichage de l'annonce au UIViews que vous avez créé. Voici comment vous pourriez associer les sorties d'assets du visionnage de l'annonce à l'UIViews créée pour une annonce:

Dans le panneau des prises, les prises de l'appareil GADNativeAdView ont été associées à le UIViews présenté dans Interface Builder. Cela permet au SDK savoir quelle UIView affiche quel élément. Il est également important de se rappeler que ces prises représentent les points de vue qui sont cliquables 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 celle-ci chargée:

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

  // 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éer un ViewModel qui charge une annonce native et en publie les données modifications:

import GoogleMobileAds

class NativeAdViewModel: NSObject, ObservableObject, GADNativeAdLoaderDelegate {
  @Published var nativeAd: GADNativeAd?
  private var adLoader: GADAdLoader!

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

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

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

Créer un UIViewRepresentable

Créez un UIViewRepresentable pour GADNativeView, et vous abonner aux modifications de données dans ViewModel classe:

private struct NativeAdView: UIViewRepresentable {
  typealias UIViewType = GADNativeAdView

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

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

  func updateUIView(_ nativeAdView: GADNativeAdView, 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 vue hiérarchique:

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) {
        NativeAdView(nativeViewModel: nativeViewModel)  // Updates when the native ad data changes.
          .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 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;
}

Remarque :L'exemple de code désactive l'interaction utilisateur pour l'incitation à l'action. UIButton Si vous utilisez UIButton pour afficher des éléments d'annonces natives, vous devez désactiver leurs interactions avec les utilisateurs. Ainsi, le SDK Google Mobile Ads peut recevoir et pour traiter les événements de l'interface utilisateur. En raison de cette étape supplémentaire, il est préférable de diffuser une annonce native éléments avec UILabel et UIImageView à la place.

Exemple complet sur GitHub

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

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

GADMediaView

Important :Vous devez utiliser le GADMediaView au lieu de 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 élément GADNativeAdView, comme toute autre vue d'élément.

Comme pour toutes les vues d'élément, la vue multimédia doit comporter du contenu renseignés. Ce paramètre est défini à l'aide de la méthode mediaContent sur GADMediaView. La propriété mediaContent de GADNativeAd comporte du contenu multimédia pouvant être transmis GADMediaView

Voici un extrait de Exemple d'affichage personnalisé (Swift | Objective-C) qui montre comment renseigner le GADMediaView avec les éléments de l'annonce native en utilisant GADMediaContent à partir du GADNativeAd:

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Objective-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

Assurez-vous que le fichier de l'outil de création d'interface pour l'affichage de votre annonce native la classe personnalisée des vues définie sur GADMediaView et que vous l'avez connectée au Prise mediaView.

Modification du mode de contenu des images

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

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

Swift

nativeAdView.mediaView?.contentMode = .aspectFill

Objective-C

nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;

GADMediaContent

GADMediaContent contient les données liées au contenu multimédia de l'annonce native, affiché à l'aide de la classe GADMediaView. Si défini sur GADMediaView Propriété mediaContent:

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

• Si l'annonce ne contient aucun asset vidéo, l'asset mainImage est téléchargé et placé dans GADMediaView à la place.

Important :Par défaut, mainImage est le premier asset image téléchargé. Si disableImageLoading est utilisé, mainImage est nil. Vous devez donc le définir. à l'image téléchargée manuellement. Notez que cette image sera utilisée Uniquement en l'absence d'éléments vidéo disponibles.

Étapes suivantes

En savoir plus sur la confidentialité des utilisateurs