Utiliser des formats personnalisés d'annonces natives

Formats d'annonces personnalisés

Comme leurs équivalents définis par le système, les formats d'annonces natives personnalisés sont chargés à l'aide d'objets GADAdLoader. L'inclusion de la constante GADAdLoaderAdTypeCustomNative dans le tableau adTypes lors de l'initialisation d'un GADAdLoader le configure pour qu'il demande des formats natifs personnalisés lors du chargement des annonces.

GADCustomNativeAdLoaderDelegate

Le protocole de chargement des formats personnalisés comporte deux méthodes. Le premier est utilisé par GADAdLoader pour identifier les ID de format qu'il doit demander :

public func customNativeAdFormatIDs(for adLoader: AdLoader) -> [Any]

- (NSArray *)customNativeAdFormatIDsForAdLoader:(AdLoader *)adLoader;

Chaque format d'annonce native personnalisée est associé à un ID de format qui l'identifie. Lorsque cette méthode est appelée, votre application doit renvoyer un tableau contenant les ID de format des annonces qu'elle est prête à afficher.

Le deuxième message est envoyé lorsque l'annonce native personnalisée est chargée, comme pour les formats définis par le système :

public func adLoader(_ adLoader: AdLoader,
    didReceive customNativeAd: CustomNativeAd)

- (void)adLoader:(AdLoader *)adLoader
    didReceiveCustomNativeAd:(CustomNativeAd *)customNativeAd;

ID de format

Les ID de format utilisés pour faire référence de manière unique aux formats d'annonces natives personnalisées sont disponibles dans l'interface utilisateur d'Ad Manager, dans la section Natif du menu déroulant Diffusion :

L'ID de format de chaque annonce native personnalisée s'affiche à côté de son nom. Cliquez sur l'un des noms pour accéder à un écran d'informations détaillées sur les champs du format :

Vous pouvez alors ajouter, modifier et supprimer des champs individuels. Notez le nom de chaque élément. Le nom est la clé utilisée pour obtenir les données de chaque asset lors de l'affichage de votre format d'annonce native personnalisé.

Afficher des formats d'annonces natives personnalisés

Les formats d'annonces natives personnalisés diffèrent de ceux définis par le système, car les éditeurs peuvent définir leur propre liste de composants qui constituent une annonce. Par conséquent, le processus d'affichage des annonces natives personnalisées diffère de celui des formats définis par le système de plusieurs manières :

1. Étant donné que GADCustomNativeAd est conçu pour gérer tous les formats d'annonces natives personnalisés que vous créez, il ne dispose pas d'accesseurs d'éléments nommés. À la place, elle propose des méthodes telles que imageForKey: et stringForKey:, qui prennent le nom du champ comme argument.
2. Il n'existe pas de classe de vue d'annonce dédiée comme GADNativeAdView à utiliser avec GADCustomNativeAd. Vous êtes libre d'utiliser la vue qui vous semble la plus adaptée à l'expérience utilisateur.
3. Comme il n'existe pas de classe de vue d'annonce dédiée, vous n'avez pas besoin d'enregistrer les vues que vous utilisez pour afficher les composants de l'annonce.

Voici un exemple de vue d'annonce capable d'afficher une annonce native personnalisée simple :

MySimpleNativeAdView.h

import UIKit
import GoogleMobileAds

/// Custom native ad view class with format ID 10063170.
class MySimpleNativeAdView: UIView {

  /// Weak references to this ad's asset views.
  @IBOutlet weak var headlineView: UILabel!
  @IBOutlet weak var mainImageView: UIImageView!
  @IBOutlet weak var captionView: UILabel!

  ...

  /// Populates the ad view with the custom native ad object.
  func populateWithCustomNativeAd(_ customNativeAd: CustomNativeAd) {
    ...
  }
}

@import UIKit;
@import GoogleMobileAds;

/// View representing a custom native ad format with format ID 10063170.
@interface MySimpleNativeAdView : UIView

// Weak references to this ad's asset views.
@property(weak, nonatomic) IBOutlet UILabel *headlineView;
@property(weak, nonatomic) IBOutlet UIImageView *mainImageView;
@property(weak, nonatomic) IBOutlet UILabel *captionView;

/// Populates the ad view with the custom native ad object.
- (void)populateWithCustomNativeAd:(GADCustomNativeAd *)customNativeAd;

@end

MySimpleNativeAdView.m (extrait)

...
func populateWithCustomNativeAd(_ customNativeAd: CustomNativeAd) {
  self.customNativeAd = customNativeAd

  // Populate the custom native ad assets.
  headlineView.text = self.customNativeAd.stringForKey("Headline")
  mainImageView.image = self.customNativeAd.imageForKey("MainImage")?.image
  captionView.text = self.customNativeAd.stringForKey("Caption")
}
...

...
- (void)populateWithCustomNativeAd:(GADCustomNativeAd *)customNativeAd {
  self.customNativeAd = customNativeAd;

  // Populate the custom native ad assets.
  self.headlineView.text = [customNativeAd stringForKey:@"Headline"];
  self.mainImageView.image = [customNativeAd imageForKey:@"MainImage"].image;
  self.captionView.text = [customNativeAd stringForKey:@"Caption"];
}
...

Afficher l'icône Choisir sa pub

Conformément au règlement sur les services numériques (DSA), les annonces par réservation diffusées dans l'Espace économique européen (EEE) doivent inclure une icône Choisir sa pub et un lien vers la page À propos de cette pub de Google. Lorsque vous intégrez des annonces natives personnalisées, l'affichage de l'icône Choisir sa pub relève de votre responsabilité. Il est important de prendre les mesures nécessaires pour afficher et définir l'écouteur de clics pour l'icône Choisir sa pub lors de l'affichage des principaux composants d'annonce.

L'exemple suivant affiche l'icône Choisir sa pub et configure le comportement des clics.

class MySimpleNativeAdView: UIView {
  @IBOutlet weak var adChoicesView: UIImageView!

  override func awakeFromNib() {
    super.awakeFromNib()

    // Enable clicks on AdChoices.
    adChoicesView.addGestureRecognizer(
      UITapGestureRecognizer(
        target: self,
        action: #selector(performClickOnAdChoices(_:))))
    adChoicesView.isUserInteractionEnabled = true
  }

  @objc func performClickOnAdChoices(_ sender: UIImage!) {
    customNativeAd.performClickOnAsset(withKey:
      NativeAssetIdentifier.adChoicesViewAsset.rawValue)
  }

  func populate(withCustomNativeAd customNativeAd: CustomNativeAd) {

    // Render the AdChoices image.
    let adChoicesKey = NativeAssetIdentifier.adChoicesViewAsset.rawValue
    let adChoicesImage = customNativeAd.image(forKey: adChoicesKey)?.image
    adChoicesView.image = adChoicesImage
    adChoicesView.isHidden = adChoicesImage == nil
    ...
  }
}

@interface MySimpleNativeAdView ()

@property(nonatomic, weak) IBOutlet UIImageView *adChoicesView;

@end

@implementation MySimpleNativeAdView

- (void)awakeFromNib {
  [super awakeFromNib];
  // Enable clicks on AdChoices.
  [self.adChoicesView addGestureRecognizer:[[UITapGestureRecognizer alloc]
                                            initWithTarget:self
                                            action:@selector(performClickOnAdChoices:)]];
  self.adChoicesView.userInteractionEnabled = YES;
}

- (void)performClickOnAdChoices:(UITapGestureRecognizer *)sender {
    [self.customNativeAd performClickOnAssetWithKey:GADNativeAdChoicesViewAsset];
}

- (void)populateWithCustomNativeAd:(GADCustomNativeAd *)customNativeAd {
  // Render the AdChoices image.
  GADNativeAdImage *adChoicesAsset = [customNativeAd
    imageForKey:GADNativeAdChoicesViewAsset];
  self.adChoicesView.image = adChoicesAsset.image;
  self.adChoicesView.hidden = (adChoicesAsset == nil);
  ...
}

Vidéo native pour les formats d'annonces natives personnalisés

Lorsque vous créez un format personnalisé, vous pouvez le rendre éligible aux vidéos.

Dans l'implémentation de votre application, utilisez la propriété GADCustomNativeAd.mediaContent pour obtenir l'instance GADMediaContent de l'annonce. Pour déterminer si l'annonce contient du contenu vidéo, vérifiez la propriété hasVideoContent. Si l'annonce comporte du contenu vidéo, créez une vue GADMediaView, attribuez la propriété mediaContent et ajoutez la vue multimédia à votre hiérarchie des vues. Si l'annonce ne comporte pas de contenu vidéo, affichez un autre élément, comme une image.

L'exemple suivant vérifie si l'annonce comporte du contenu vidéo et affiche une image si aucune vidéo n'est disponible :

func populate(withCustomNativeAd customNativeAd: CustomNativeAd) {
  // Remove all the media placeholder's subviews.
  for subview: UIView in mainPlaceholder.subviews {
    subview.removeFromSuperview()
  }

  // This custom native ad has both a video and image associated with it. Use the video
  // asset if available, or fall back to the image asset.
  let mainView: UIView
  if customNativeAd.mediaContent.hasVideoContent {
    let mediaView = MediaView()
    mediaView.mediaContent = customNativeAd.mediaContent
    mainView = mediaView
  } else {
    let image: UIImage? = customNativeAd.image(forKey: "MainImage")?.image
    mainView = UIImageView(image: image)
  }
  mainPlaceholder.addSubview(mainView)

  // Size the media view to fill the container size.
  mainView.translatesAutoresizingMaskIntoConstraints = false
  NSLayoutConstraint.activate([
    mainView.leadingAnchor.constraint(equalTo: mainPlaceholder.leadingAnchor),
    mainView.trailingAnchor.constraint(equalTo: mainPlaceholder.trailingAnchor),
    mainView.topAnchor.constraint(equalTo: mainPlaceholder.topAnchor),
    mainView.bottomAnchor.constraint(equalTo: mainPlaceholder.bottomAnchor),
  ])
}
NativeAdSnippets.swift

- (void)populateWithCustomNativeAd:(GADCustomNativeAd *)customNativeAd {
  // Remove all the media placeholder's subviews.
  for (UIView *subview in self.mainPlaceholder.subviews) {
    [subview removeFromSuperview];
  }

  // This custom native ad has both a video and image associated with it. Use the video
  // asset if available, or fall back to the image asset.
  UIView *mainView = nil;
  if (customNativeAd.mediaContent.hasVideoContent) {
    GADMediaView *mediaView = [[GADMediaView alloc] init];
    mediaView.mediaContent = customNativeAd.mediaContent;
    mainView = mediaView;
  } else {
    UIImage *image = [customNativeAd imageForKey:@"MainImage"].image;
    mainView = [[UIImageView alloc] initWithImage:image];
  }
  [self.mainPlaceholder addSubview:mainView];

  // Size the media view to fill the container size.
  mainView.translatesAutoresizingMaskIntoConstraints = NO;
  [NSLayoutConstraint activateConstraints:@[
    [mainView.leadingAnchor constraintEqualToAnchor:self.mainPlaceholder.leadingAnchor],
    [mainView.trailingAnchor constraintEqualToAnchor:self.mainPlaceholder.trailingAnchor],
    [mainView.topAnchor constraintEqualToAnchor:self.mainPlaceholder.topAnchor],
    [mainView.bottomAnchor constraintEqualToAnchor:self.mainPlaceholder.bottomAnchor],
  ]];
}
NativeAdSnippets.m

Pour en savoir plus sur la personnalisation d'une vidéo d'annonce native personnalisée, consultez la classe GADVideoController.

Pour implémenter une vidéo native personnalisée, consultez l'exemple d'affichage personnalisé Ad Manager en Swift et Objective-C.

Gérer les clics et les impressions des annonces natives personnalisées

Pour les formats d'annonces natives personnalisés, votre application est chargée d'enregistrer les impressions et de signaler les événements de clic au SDK.

Enregistrement des impressions

Pour enregistrer une impression pour une annonce native personnalisée, il vous suffit d'appeler la méthode recordImpression sur l'objet GADCustomNativeAd correspondant :

myCustomNativeAd.recordImpression()

[myCustomNativeAd recordImpression];

Le SDK empêche l'enregistrement d'impressions en double pour une même demande si votre application appelle accidentellement la méthode plusieurs fois pour la même annonce.

Rapports sur les clics

Pour signaler au SDK qu'un clic a été effectué sur une vue d'asset, appelez la méthode performClickOnAssetWithKey: sur l'objet GADCustomNativeAd correspondant et transmettez le nom de l'asset sur lequel l'utilisateur a cliqué. Par exemple, si vous avez un élément dans votre format personnalisé appelé "MainImage" et que vous souhaitez enregistrer un clic sur la vue correspondant à cet élément, votre code se présentera comme suit :

myCustomNativeAd.performClickOnAsset(withKey: "MainImage")

[myCustomNativeAd performClickOnAssetWithKey:@"MainImage"];

Notez que vous n'avez pas besoin d'appeler cette méthode pour chaque vue d'élément associée à votre annonce. Par exemple, si vous aviez un autre élément appelé "Légende" qui devait être affiché, mais sur lequel l'utilisateur ne devait pas cliquer ni appuyer, votre application n'aurait pas besoin d'appeler performClickOnAssetWithKey: pour cette vue.

Répondre aux actions de clic personnalisées

GADCustomNativeAd possède une propriété customClickHandler de type GADNativeAdCustomClickHandler.

typealias NativeAdCustomClickHandler = (assetID: String) -> Void

typedef void (^GADNativeAdCustomClickHandler)(NSString *assetID);

Il s'agit d'un bloc (Objective-C) / d'une fermeture (Swift) qui accepte un assetID comme paramètre d'entrée, qui identifie l'élément sur lequel l'utilisateur a cliqué.

Lorsqu'un clic est effectué sur une annonce native personnalisée, le SDK peut répondre de trois manières, dans l'ordre suivant :

1. Appelez le bloc customClickHandler en Objective-C ou la fermeture en Swift, si l'un d'eux a été défini.
2. Parcourez les URL de liens profonds de l'annonce et ouvrez la première pour laquelle une application correspondante est trouvée.
3. Ouvrez un navigateur et accédez à l'URL de destination traditionnelle de l'annonce.

La propriété customClickHandler accepte un bloc en Objective-C et une fermeture en Swift. Si vous définissez un bloc ou une fermeture, le SDK l'exécutera et n'effectuera aucune autre action. Toutefois, si vous définissez une valeur nulle, le SDK utilisera le lien profond et/ou les URL de destination enregistrés avec l'annonce.

Les gestionnaires de clics personnalisés permettent à votre application de décider elle-même de la meilleure action à effectuer en réponse à un clic, qu'il s'agisse de mettre à jour l'UI, de présenter un autre contrôleur de vue ou simplement de consigner le clic. Voici un exemple d'alerte :

myCustomNativeAd.customClickHandler = { assetID in
  if assetID == "MainImage" {
    let alertView = UIAlertView(title: "Custom Click",
        message: "You just clicked on the image!",
        delegate: self,
        cancelButtonTitle: "OK")
    alertView.alertViewStyle = .default
    alertView.show()
  }
}
myCustomNativeAd.performClickOnAsset(withKey: "MainImage")

[self.customNativeAd setCustomClickHandler:^(NSString *assetID){
  if ([assetID isEqualToString:@"MainImage"]) {
    [[[UIAlertView alloc] initWithTitle:@"Custom Click"
                                message:@"You just clicked on the image!"
                               delegate:self
                      cancelButtonTitle:@"OK"
                      otherButtonTitles:nil] show];
  }
}];
[self.customNativeAd performClickOnAssetWithKey:@"MainImage"];

Tester le code d'annonce native

Annonces vendues directement

Si vous souhaitez tester les annonces natives vendues en direct, vous pouvez utiliser l'ID de bloc d'annonces Ad Manager suivant :

/21775744923/example/native

Il est configuré pour diffuser des annonces d'installation d'application exemple et des annonces de contenu, ainsi qu'un format d'annonce native personnalisé avec les éléments suivants :

• Titre (texte)
• MainImage (image)
• Légende (texte)

Annonces de backfill natives

Pour tester le comportement des annonces de backfill natives, utilisez ce bloc d'annonces Ad Manager :

/21775744923/example/native-backfill

Elle diffusera des exemples d'annonces pour une application et d'annonces de contenu qui incluent la superposition Choisir sa pub.

N'oubliez pas de modifier votre code pour faire référence aux ID de vos blocs d'annonces et formats réels avant de mettre en ligne votre application.