Utiliser des formats personnalisés d'annonces natives

Sélectionnez une plate-forme : Android (bêta) Android iOS

Formats d'annonces personnalisés

Comme leurs homologues définis par le système, les formats d'annonces natives personnalisés sont chargés à l'aide d'objets GADAdLoader. Si vous incluez la GADAdLoaderAdTypeCustomNative constante dans le adTypes tableau lorsque vous initialisez un GADAdLoader, celui-ci sera configuré pour demander des formats natifs personnalisés lors du chargement des annonces.

GADCustomNativeAdLoaderDelegate

Le protocole de chargement des formats personnalisés comporte deux méthodes. La première est utilisée par GADAdLoader pour déterminer les ID de format à demander :

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

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

Chaque format d'annonce native personnalisé possède un ID de format correspondant 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 à diffuser.

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és se trouvent dans l'interface utilisateur Ad Manager dans la section Native du menu déroulant Diffusion :

L'ID de format de chaque annonce native personnalisée apparaît à côté de son nom. Si vous cliquez sur l'un des noms, vous accédez à un écran de détails affichant des informations sur les champs du format :

Vous pouvez ajouter, modifier et supprimer des champs individuels. Notez le nom de chacun des composants. Le nom est la clé utilisée pour obtenir les données de chaque composant 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 ont la possibilité de définir leur propre liste de composants qui composent 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 comporte pas d'accesseurs de composants nommés. Il propose plutôt 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 convient le mieux à votre 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

Dans le cadre de la prise en charge du règlement sur les services numériques, 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 annonce" 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 de clic approprié.

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, vous pouvez utiliser la GADCustomNativeAd.mediaView propriété pour obtenir la vue de la vidéo. Ajoutez ensuite cette vue à votre hiérarchie de vues. Si l'annonce ne contient pas de contenu vidéo, prévoyez d'autres solutions pour l'afficher sans vidéo.

L'exemple ci-dessous vérifie si l'annonce contient du contenu vidéo et affiche une image à la place si aucune vidéo n'est disponible :

...
  /// Populates the ad view with the custom native ad object.
  func populate(withCustomNativeAd customNativeAd: CustomNativeAd) {
    if customNativeAd.videoController.hasVideoContent(),
      let mediaView = customNativeAd.mediaView {
      updateMainView(mediaView)
    } else {
      // Assumes your native format has an image asset with the name MainImage.
      let image: UIImage? = customNativeAd.image(forKey: "MainImage")?.image
      updateMainView(UIImageView(image: image))
    }
  }

  private func updateMainView(_ mainView:UIView) {
    // Assumes you have a placeholder view for your media content.
    // Remove all the placeholder's subviews.
    for subview: UIView in mainPlaceholder.subviews {
      subview.removeFromSuperview()
    }
    mainPlaceholder.addSubview(mainView)
    // Size the media view to fill our container size.
    mainView.translatesAutoresizingMaskIntoConstraints = false
    let viewDictionary: [AnyHashable: Any] = ["mainView":mainView]
    mainPlaceholder.addConstraints(NSLayoutConstraint.constraints(
      withVisualFormat: "H:|[mainView]|", options: [], metrics: nil,
      views: viewDictionary as? [String : Any] ?? [String : Any]()))
    mainPlaceholder.addConstraints(NSLayoutConstraint.constraints(
      withVisualFormat: "V:|[mainView]|", options: [], metrics: nil,
      views: viewDictionary as? [String : Any] ?? [String : Any]()))
  }
...

...
- (void)populateWithCustomNativeAd:(GADCustomNativeAd *)ad {
  UIView *mainView = nil;
  if (ad.videoController.hasVideoContent) {
    mainView = ad.mediaView;
  } else {
    // Assumes your native format has an image asset with the name MainImage.
    UIImage *image = [ad imageForKey:@"MainImage"].image;
    mainView = [[UIImageView alloc] initWithImage:image];
  }
  // Assumes you have a placeholder view for your media content.
  for (UIView *subview in self.mainPlaceholder.subviews) {
    [subview removeFromSuperview];
  }
  [self.mainPlaceholder addSubview:mainView];

  // Size the main view to fill our container size.
  [mainView setTranslatesAutoresizingMaskIntoConstraints:NO];
  NSDictionary *viewDictionary = NSDictionaryOfVariableBindings(mainView);
  [self.mainPlaceholder
      addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[mainView]|"
                                                             options:0
                                                             metrics:nil
                                                               views:viewDictionary]];
}
...

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

Téléchargez l'exemple d'affichage personnalisé d'Ad Manager pour voir un exemple concret de vidéo native.

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

Pour les formats d'annonces natives personnalisés, votre application est responsable de l'enregistrement des impressions et du signalement des événements de clic au SDK.

Enregistrer les impressions

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

myCustomNativeAd.recordImpression()

[myCustomNativeAd recordImpression];

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

Signaler les clics

Pour signaler au SDK qu'un clic a été effectué sur une vue de composant, appelez la méthode performClickOnAssetWithKey: sur le GADCustomNativeAd correspondant et transmettez le nom du composant sur lequel l'utilisateur a cliqué. Par exemple, si vous aviez un composant dans votre format personnalisé appelé "MainImage" et que vous souhaitiez signaler un clic sur la vue correspondant à ce composant, votre code se présenterait comme suit :

myCustomNativeAd.performClickOnAsset(withKey: "MainImage")

[myCustomNativeAd performClickOnAssetWithKey:@"MainImage"];

Notez que vous n'avez pas besoin d'appeler cette méthode pour chaque vue de composant associée à votre annonce. Par exemple, si vous aviez un autre composant appelé "Légende" qui était destiné à ê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) ou d'une fermeture (Swift) qui accepte un assetID comme paramètre d'entrée, ce qui identifie le composant 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 différentes, dans l'ordre suivant :

1. Appeler le bloc customClickHandler dans Objective-C ou la fermeture dans Swift, si l'un d'eux a été défini.
2. Parcourir les URL de lien profond de l'annonce et ouvrir la première pour laquelle une application correspondante peut être trouvée.
3. Ouvrir un navigateur et accéder à l'URL de destination traditionnelle de l'annonce.

La propriété customClickHandler accepte un bloc dans Objective-C et une fermeture dans Swift. Si vous définissez un bloc ou une fermeture, le SDK l'exécute et ne prend aucune autre mesure. Toutefois, si vous définissez une valeur nulle, le SDK revient aux liens profonds et/ou aux 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 à entreprendre en réponse à un clic, qu'il s'agisse de mettre à jour l'interface utilisateur, de présenter un autre contrôleur de vue ou simplement d'enregistrer le clic. Voici un exemple qui montre une 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 directement, vous pouvez utiliser cet ID de bloc d'annonces Ad Manager :

/21775744923/example/native

Il est configuré pour diffuser des exemples d'annonces incitant à installer une application et d'annonces de contenu, ainsi qu'un format d'annonce native personnalisé avec les composants suivants :

• Titre (texte)
• Image principale (image)
• Légende (texte)

Annonces de remplissage natives

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

/21775744923/example/native-backfill

Il diffusera des exemples d'annonces incitant à installer une application et d'annonces de contenu qui incluent la superposition Choisir sa pub.

N'oubliez pas de mettre à jour votre code pour qu'il fasse référence à votre bloc d'annonces et à vos ID de format réels avant de passer en production.