Ajout de publicités natives à votre application iOS

L’API Native Ad vous permet de créer une expérience personnalisée pour les publicités que vous diffusez dans votre application. Lorsque vous utilisez l’API Native Ad, vous ne recevez pas une publicité prête à être affichée, mais une série de propriétés de cette publicité, comme un titre, une image et un call-to-action, que vous devez utiliser pour créer une UIView dans laquelle la publicité s’affichera.

Passons à la mise en œuvre du placement publicitaire natif suivant. Vous allez créer les affichages suivants pour notre publicité native :

Étape 1 : créer des affichages publicitaires natifs dans Storyboard

Étape 2 : charger et afficher la publicité native

Étape 3 : comment connaître le format du contenu et appliquer une largeur et une hauteur naturelles

Étape 4 : vérifier l’enregistrement de l’impression et du clic

Étape 5 : processus de débogage lorsque la publicité n’apparaît pas

Étape 6 : charger la publicité sans mise en cache automatique

Étape 7 : tester l’intégration des publicités

Consulter les problèmes connus dans le Changelog

Étape 1 : créer des affichages publicitaires natifs dans Storyboard

1. Lorsque vous avez créé un projet conformément aux guides de démarrage sur iOS, ouvrez Main.storyboard. Ajoutez un élément UIView à l’élément View principal, puis nommez-le adUIView.
   
   
   
2. En outre, ajoutez adIconImageView (FBAdIconView), adTitleLabel (UILabel), adCoverMediaView (FBMediaView), adSocialContext (UILabel), adCallToActionButton (UIButton), adOptionsView (FBAdOptionsView), adBodyLabel (UILabel), sponsoredLabel (UILabel) sous adUIView comme l’indique l’image ci-dessous.
   
   
   
3. Vous remarquerez peut-être la présence d’une flèche rouge à proximité de View Controller Scene (Scène du contrôleur d’affichage). Cela signifie généralement qu’il y a des contraintes manquantes dans votre disposition.
   
   
   Vous devrez sélectionner tous les objets d’affichage dans votre scène et cliquer sur l’icône Résoudre le problème de disposition pour ajouter les contraintes manquantes.
   
   
   
4. Maintenant que vous avez créé tous les éléments de l’interface utilisateur nécessaires à l’affichage d’une publicité native, vous devez référencer ces éléments dans l’interface ViewController. Ouvrez d’abord ViewController.m (ViewController.swift si vous utilisez Swift), puis faites glisser adUIView dans l’objet ViewController. Vous pouvez le nommer adUIView. Ensuite, vous devrez procéder de la même façon pour adIconImageView, adTitleLabel, adCoverMediaView, adSocialContext, adCallToActionButton, adOptionsView, adBodyLabel et sponsoredLabel.
   
   
   
5. Créez et lancez le projet. Sur votre appareil ou le simulateur, vous devriez voir du contenu vide semblable à ce qui suit :
   

Maintenant que vous avez créé tous les éléments de l’interface utilisateur nécessaires à l’affichage d’une publicité native, l’étape suivante consiste à charger la publicité native et à associer le contenu à ces éléments d’interface.

Étape 2 : charger et afficher la publicité native

1. Dans votre fichier source View Controller, importez le SDK, déclarez que ViewController est conforme au protocole FBNativeAdDelegate, puis ajoutez une variable d’instance FBNativeAd.
   SwiftObjective-C

   import UIKit
   import FBAudienceNetwork
   
   class ViewController: UIViewController, FBNativeAdDelegate {
       
     private var nativeAd: FBNativeAd?
   }

   #import <UIKit/UIKit.h>
   @import FBAudienceNetwork;
   
   @interface ViewController () <FBNativeAdDelegate>
   
   @property (strong, nonatomic) FBNativeAd *nativeAd;
   
   @end



2. Dans la méthode viewDidLoad, ajoutez les lignes de code suivantes pour charger le contenu publicitaire natif.
   SwiftObjective-C

   override func viewDidLoad() {
     super.viewDidLoad()
       
     let nativeAd = FBNativeAd(placementID: "YOUR_PLACEMENT_ID")
     nativeAd.delegate = self
     nativeAd.loadAd()
   }

   - (void)viewDidLoad 
   {
     [super viewDidLoad];
   
     FBNativeAd *nativeAd = [[FBNativeAd alloc] initWithPlacementID:@"YOUR_PLACEMENT_ID"];
     nativeAd.delegate = self;
     [nativeAd loadAd];
   }

   
   

   L’ID correspondant à YOUR_PLACEMENT_ID est un ID temporaire à des fins de tests uniquement.

   Si vous utilisez cet ID temporaire dans votre code en direct, vos utilisateurs et utilisatrices ne recevront pas de publicité, mais une erreur No Fill. Vous devez revenir ici après le test et remplacer cet ID temporaire par un ID de placement en direct.

   Pour découvrir comment générer un ID de placement en direct, reportez-vous à Configuration d’Audience Network.

3. L’étape suivante consiste à afficher la publicité lorsque le contenu est prêt. Pour cela, il est nécessaire que ViewController implémente la méthode de délégué nativeAdDidLoad.
   SwiftObjective-C

   func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
       
     // 1. If there is an existing valid native ad, unregister the view
     if let previousNativeAd = self.nativeAd, previousNativeAd.isAdValid {
       previousNativeAd.unregisterView()
     }
       
     // 2. Retain a reference to the native ad object
     self.nativeAd = nativeAd
   
     // 3. Register what views will be tappable and what the delegate is to notify when a registered view is tapped
     // Here only the call-to-action button and the media view are tappable, and the delegate is the view controller
     nativeAd.registerView(
       forInteraction: adUIView,
       mediaView: adCoverMediaView,
       iconView: adIconImageView,
       viewController: self,
       clickableViews: [adCallToActionButton, adCoverMediaView]
     )
       
     // 4. Render the ad content onto the view
     adTitleLabel.text = nativeAd.advertiserName
     adBodyLabel.text = nativeAd.bodyText
     adSocialContextLabel.text = nativeAd.socialContext
     sponsoredLabel.text = nativeAd.sponsoredTranslation
     adCallToActionButton.setTitle(nativeAd.callToAction, for: .normal)
     adOptionsView.nativeAd = nativeAd
   }

   - (void)nativeAdDidLoad:(FBNativeAd *)nativeAd
   {
     // 1. If there is an existing valid native ad, unregister the view
     if (self.nativeAd && self.nativeAd.isAdValid) {
       [self.nativeAd unregisterView];
     }
   
     // 2. Retain a reference to the native ad object
     self.nativeAd = nativeAd;
   
     // 3. Register what views will be tappable and what the delegate is to notify when a registered view is tapped
     // Here only the call-to-action button and the media view are tappable, and the delegate is the view controller
     [self.nativeAd registerViewForInteraction:self.adUIView
                                     mediaView:self.adCoverMediaView
                                      iconView:self.adIconImageView
                                viewController:self
                                clickableViews:@[self.adCallToActionButton, self.adCoverMediaView]];
   
     // 4. Render the ad content onto the view
     self.adTitleLabel.text = self.nativeAd.advertiserName;
     self.adBodyLabel.text = self.nativeAd.bodyText;
     self.adSocialContextLabel.text = self.nativeAd.socialContext;
     self.sponsoredLabel.text = self.nativeAd.sponsoredTranslation;
     [self.adCallToActionButton setTitle:self.nativeAd.callToAction forState:UIControlStateNormal];
     self.adOptionsView.nativeAd = self.nativeAd; 
   }

Contrôle des zones cliquables

Pour garantir une meilleure expérience utilisateur et de meilleurs résultats, vous devez toujours penser à contrôler la zone cliquable de votre publicité pour éviter les clics accidentels. N’hésitez pas à consulter la page Politique relative au SDK de l’Audience Network pour obtenir des détails sur la mise en application du règlement sur les espaces blancs non cliquables.




4. Choisissez Appareil en tant que cible de version, puis exécutez le code ci-dessus. Vous devriez voir une fenêtre comme celle-ci :
   
   
   
   

Étape 3 : comment connaître le format du contenu et appliquer une largeur et une hauteur naturelles

Dans l’exemple ci-dessus, le contenu multimédia de la publicité est affiché dans adCoverMediaView et son type d’objet est FBMediaView. Lors de l’étape précédente, vous avez appris à utiliser FBMediaView pour charger un contenu multimédia à partir d’un objet FBNativeAd donné. Cet affichage remplace le chargement manuel d’une image de couverture. Lorsque vous créez le FBMediaView, sa largeur et sa hauteur peuvent être déterminées par les contraintes de disposition automatiques du storyboard ou elles peuvent être figées dans le code. Cependant, la largeur et la hauteur de l’affichage peuvent ne pas correspondre à l’image de couverture de l’annonce téléchargée plus tard. Pour résoudre cela, l’exemple suivant montre comment connaître le format du contenu, et appliquer une largeur et une hauteur naturelles :

1. Déclarez que votre contrôleur d’affichage implémente le protocole FBMediaViewDelegate.
   SwiftObjective-C

   class ViewController: UIViewController, FBNativeAdDelegate, FBMediaViewDelegate {
     ...
   }

   @interface ViewController : UIViewController <FBNativeAdDelegate, FBMediaViewDelegate>
   ...
   @end



2. Une fois la publicité native chargée, définissez le délégué de l’objet FBMediaView en tant que contrôleur d’affichage.
   SwiftObjective-C

   func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
     adCoverMediaView.delegate = self
   }

   - (void)nativeAdDidLoad:(FBNativeAd *)nativeAd 
   {
     self.adCoverMediaView.delegate = self;
   }



3. Implémentez la méthode mediaViewDidLoad dans votre contrôleur d’affichage.
   SwiftObjective-C

   func mediaViewDidLoad(_ mediaView: FBMediaView) {
     let currentAspect = mediaView.frame.size.width / mediaView.frame.size.height
     print(currentAspect)
     
     let actualAspect = mediaView.aspectRatio
     print(actualAspect)
   }

   - (void)mediaViewDidLoad:(FBMediaView *)mediaView
   {
     CGFloat currentAspect = mediaView.frame.size.width / mediaView.frame.size.height;
     NSLog(@"current aspect of media view: %f", currentAspect);
     
     CGFloat actualAspect = mediaView.aspectRatio;
     NSLog(@"actual aspect of media view: %f", actualAspect);
   }

   
   mediaView.aspectRatio renvoie une valeur CGFloat positive ou 0.0 si aucune publicité n’est actuellement chargée. Sa valeur est valide une fois l’affichage du contenu multimédia chargé. Certaines méthodes définissent la largeur et la hauteur de l’objet FBMediaView en respectant le format du contenu multimédia chargé. Vous pouvez appeler applyNaturalWidth ou applyNaturalHeight pour mettre à jour la largeur ou la hauteur de l’objet FBMediaView afin de respecter le format du contenu multimédia.

Étape 4 : vérifier l’enregistrement de l’impression et du clic

Vous avez également la possibilité d’ajouter les fonctions suivantes pour gérer les cas où la publicité native est close ou lorsque l’utilisateur ou l’utilisatrice décide de cliquer dessus.

func nativeAdDidClick(_ nativeAd: FBNativeAd) {
  print("Native ad was clicked.")
}

func nativeAdDidFinishHandlingClick(_ nativeAd: FBNativeAd) {
  print("Native ad did finish click handling.")
}

func nativeAdWillLogImpression(_ nativeAd: FBNativeAd) {
  print("Native ad impression is being captured.")
}

- (void)nativeAdDidClick:(FBNativeAd *)nativeAd
{
  NSLog(@"Native ad was clicked.");
}

- (void)nativeAdDidFinishHandlingClick:(FBNativeAd *)nativeAd
{
  NSLog(@"Native ad did finish click handling.");
}

- (void)nativeAdWillLogImpression:(FBNativeAd *)nativeAd
{
  NSLog(@"Native ad impression is being captured.");
}

Étape 5 : processus de débogage lorsque la publicité n’apparaît pas

Ajoutez et implémentez la fonction suivante dans votre contrôleur d’affichage pour gérer les échecs de chargement de la publicité.

func nativeAd(_ nativeAd: FBNativeAd, didFailWithError error: Error) {
  print("Native ad failed to load with error: \(error.localizedDescription)")
}

- (void)nativeAd:(FBNativeAd *)nativeAd didFailWithError:(NSError *)error
{
  NSLog(@"Native ad failed to load with error: %@", error);
}

Étape 6 : chargement de la publicité sans mise en cache automatique

1. Nous vous déconseillons de désactiver le cache multimédia par défaut. Cependant, nous vous autorisons à remplacer la valeur par défaut. Veuillez faire preuve de prudence si vous décidez de remplacer notre mise en cache par défaut des contenus multimédias.
   SwiftObjective-C

   let nativeAd = FBNativeAd(placementID: "YOUR_PLACEMENT_ID")
   nativeAd.delegate = self
   nativeAd.loadAd(withMediaCachePolicy: .none)

   FBNativeAd *nativeAd = [[FBNativeAd alloc] initWithPlacementID:@"YOUR_PLACEMENT_ID"];
   nativeAd.delegate = self;
   [nativeAd loadAdWithMediaCachePolicy:FBNativeAdsCachePolicyNone];



2. Tout d’abord, vous devez télécharger manuellement tous les contenus multimédias de la publicité native.
   SwiftObjective-C

   func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
     
     ...
     
     self.adCoverMediaView.delegate = self
     nativeAd.downloadMedia()
     self.nativeAd = nativeAd
     
     ...
   }

   - (void)nativeAdDidLoad:(FBNativeAd *)nativeAd
   {
     ...
   
     self.adCoverMediaView.delegate = self;
     [nativeAd downloadMedia];
     self.nativeAd = nativeAd;
   
     ...
   }



3. Ensuite, il ne vous reste qu’à appeler registerViewForInteraction et à afficher la publicité après le rappel de mediaViewDidLoad. Tous les contenus multimédias doivent être chargés et affichés pour une impression admissible.
   SwiftObjective-C

   func mediaViewDidLoad(_ mediaView: FBMediaView) {
     guard let nativeAd = nativeAd else {
       return
     }
     
     // 1. Register what views will be tappable and what the delegate is to notify when a registered view is tapped
     // Here only the call-to-action button and the media view are tappable, and the delegate is the view controller
     nativeAd.registerView(
       forInteraction: adUIView,
       mediaView: mediaView,
       iconView: adIconImageView,
       viewController: self,
       clickableViews: [adCallToActionButton, mediaView]
     )
       
     // 2. Render the ad content onto the view
     adTitleLabel.text = nativeAd.advertiserName
     adBodyLabel.text = nativeAd.bodyText
     adSocialContextLabel.text = nativeAd.socialContext
     sponsoredLabel.text = nativeAd.sponsoredTranslation
     adCallToActionButton.setTitle(nativeAd.callToAction, for: .normal)
     adOptionsView.nativeAd = nativeAd
   }

   - (void)mediaViewDidLoad:(FBMediaView *)mediaView 
   {
     if (!self.nativeAd) {
       return;
     }
   
     // 1. Register what views will be tappable and what the delegate is to notify when a registered view is tapped
     // Here only the call-to-action button and the media view are tappable, and the delegate is the view controller
     [self.nativeAd registerViewForInteraction:self.adUIView
                                     mediaView:mediaView
                                      iconView:self.adIconImageView
                             viewController:self
                            clickableViews:@[self.adCallToActionButton, mediaView]];
   
     // 2. Render the ad content onto the view
     self.adTitleLabel.text = self.nativeAd.advertiserName;
     self.adBodyLabel.text = self.nativeAd.bodyText;
     self.adSocialContextLabel.text = self.nativeAd.socialContext;
     self.sponsoredLabel.text = self.nativeAd.sponsoredTranslation;
     [self.adCallToActionButton setTitle:self.nativeAd.callToAction forState:UIControlStateNormal];
     self.adOptionsView.nativeAd = self.nativeAd; 
   }