Formats personnalisés d'annonces natives

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. Inclure la constante GADAdLoaderAdTypeCustomNative dans le tableau adTypes lors de l'initialisation d'un GADAdLoader le configurera pour qu'il demande des formats natifs personnalisés lors du chargement d'annonces.

Remarque :Vous pouvez demander des formats d'annonces natives personnalisés et définis par le système simultanément avec un seul GADAdLoader si vous disposez d'un bloc d'annonces configuré pour diffuser plusieurs formats d'annonces. Ad Manager sélectionnera la meilleure création native associée à l'un des formats que vous avez demandés.

GADCustomNativeAdLoaderDelegate

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

Swift

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

Objective-C

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

Chaque format d'annonce native personnalisée 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 à afficher.

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

Swift

public func adLoader(_ adLoader: GADAdLoader,
    didReceive customNativeAd: GADCustomNativeAd)

Objective-C

- (void)adLoader:(GADAdLoader *)adLoader
    didReceiveCustomNativeAd:(GADCustomNativeAd *)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 se trouvent dans l'interface utilisateur d'Ad Manager, sous la section Native dans le 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 afficher un écran d'informations sur les champs du format:

Vous pouvez ensuite ajouter, modifier et supprimer des champs individuels. Notez le nom de chacun des éléments. Le nom est la clé utilisée pour obtenir les données de chaque composant lorsque vous affichez votre format d'annonce native personnalisée.

Afficher des formats d'annonces natives personnalisés

Les formats d'annonces natives personnalisés diffèrent des formats définis par le système en ce sens que les éditeurs peuvent définir leur propre liste d'assets qui constituent une annonce. Par conséquent, le processus de diffusion d'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 destiné à gérer tous les formats d'annonces natifs personnalisés que vous créez, il ne dispose pas d'accesseurs d'éléments nommés. À la place, il 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 convient le mieux pour 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

Swift

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: GADCustomNativeAd) {
    ...
  }
}

Objective-C

@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)

Swift

...
func populateWithCustomNativeAd(_ customNativeAd: GADCustomNativeAd) {
  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")
}
...

Objective-C

...
- (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

Pour respecter le 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 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 AdChoices et configure le comportement de clic approprié.

Important :Définissez l'icône "Choisir sa pub" sur au moins 15 x 15 pixels.

Swift

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:
      GADNativeAssetIdentifier.adChoicesViewAsset.rawValue)
  }

  func populate(withCustomNativeAd customNativeAd: GADCustomNativeAd) {

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

Objective-C

@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);
  ...
}

Important :Si vous utilisez le contrôle du téléchargement d'images pour ne demander que des URL d'image, l'asset AdChoices respecte ce paramètre et ne renvoie que l'URL de l'image.

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

Lorsque vous créez un format personnalisé, vous pouvez le rendre compatible avec les vidéos.

Dans l'implémentation de votre application, vous pouvez utiliser la propriété GADCustomNativeAd.mediaView pour obtenir la vue de la vidéo. Ajoutez ensuite cette vue à votre hiérarchie des vues. Si l'annonce ne comporte pas de contenu vidéo, prévoyez d'autres options pour la diffuser sans vidéo.

Remarque :Contrairement aux annonces natives, qui contiennent une image dans la vue multimédia lorsque la vidéo n'est pas disponible, la vue multimédia d'une annonce native personnalisée ne contient aucun contenu si elle ne contient pas de vidéo.

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

Swift

...
  /// Populates the ad view with the custom native ad object.
  func populate(withCustomNativeAd customNativeAd: GADCustomNativeAd) {
    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]()))
  }
...

Objective-C

...
- (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 savoir comment personnaliser l'expérience vidéo d'une annonce native personnalisée, consultez GADVideoController.

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

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

Pour les formats d'annonces natives personnalisées, votre application est chargée d'enregistrer les impressions et de signaler les é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:

Swift

myCustomNativeAd.recordImpression()

Objective-C

[myCustomNativeAd recordImpression];

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

Créer des rapports sur les clics

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

Swift

myCustomNativeAd.performClickOnAsset(withKey: "MainImage")

Objective-C

[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 composant appelé "Caption" (Sous-titre) qui devait s'afficher, mais sur lequel l'utilisateur n'a pas cliqué ou appuyé, votre application n'aurait pas besoin d'appeler performClickOnAssetWithKey: pour cette vue.

Répondre aux actions personnalisées de clic

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

Swift

typealias GADNativeAdCustomClickHandler = (assetID: String) -> Void

Objective-C

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, trois réponses sont possibles de la part du SDK, 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 lien profond de l'annonce et ouvrez la première pour laquelle une application correspondante peut être 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 blocage ou une fermeture, le SDK l'exécute et ne prend aucune autre mesure. 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 qui affiche une alerte:

Swift

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")

Objective-C

[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"];

Au premier abord, il peut sembler étrange que des gestionnaires de clics personnalisés existent. Après tout, votre application vient de dire au SDK qu'un clic s'est produit. Pourquoi le SDK devrait-il ensuite le signaler à l'application ?

Ce flux d'informations est utile pour plusieurs raisons, mais surtout, il permet au SDK de garder le contrôle de la réponse au clic. Il peut par exemple envoyer automatiquement des requêtes ping aux URL de suivi tierces définies pour la création et gérer d'autres tâches en arrière-plan, sans code supplémentaire.

Tester le code des annonces natives

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 de contenu, ainsi qu'un format d'annonce native personnalisée avec les composants suivants:

• Titre (texte)
• MainImage (image)
• Caption (text) (Légende, texte)

Annonces natives de remplissage

Pour tester le comportement des annonces natives de remplissage, 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 AdChoices.

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