Tutoriel iAd - Comment intégrer des bannières iAd dans votre application

Maintenant que vous avez passé tout ce temps à créer une application, vous souhaitez la monétiser d'une façon ou d'une autre, n'est-ce pas ? Apple possède une plate-forme appelée iAd, qui permet aux éditeurs de monétiser leurs applications en plaçant des bannières publicitaires ou des annonces en plein écran (ou les deux) dans celle-ci.

Voici la page de ressources iAd pour développeurs.

En fait, cela a été assez facile d'intégrer la bannière publicitaire dans mon application. Je n'ai pas essayé la publicité en plein écran, donc je ne sais pas ce qu'elle implique, mais dans ce tutoriel je vais vous montrer comment j'ai pu ajouter des bannières à mon application.

Vous devrez vous inscrire dans le programme pour développeurs iOS d'Apple, pour 99 $/an, afin d'avoir accès à iAd (de toute façon, vous devez y être inscrits pour publier des applications sur l'App Store).

Une fois inscrits, vous pouvez vous connecter sur votre compte iTunes Connect et la première chose que vous devez faire c'est de mettre en place vos contrats.

Sur l'écran suivant, demandez celui pour le réseau publicitaire iAd.

Après avoir cliqué sur Request, vous pouvez être invité à ajouter une nouvelle entité juridique (personne autorisée à conclure des contrats), puis il vous sera demandé d'examiner le contrat. Une fois que vous acceptez et revenez à l'écran des contrats, vous verrez celui d'iAd en attente, avec encore trois choses à configurer.

Utilisez chacun des boutons et renseignez Contact Info, Bank Info et Tax Info. Vous serez guidé par le système pendant ces opérations.

Après avoir fait cela, il suffit d'attendre !

Si vous suivez le lien ci-dessus, vous trouverez quelques informations importantes concernant le programme iAd et les bonnes pratiques, mais je vais les énumérer ci-dessous pour votre commodité.

Pour utiliser iAd dans votre application, vous devez être inscrit sur iAd App Network

C'est ce que nous avons déjà fait à l'étape 1.

Les vues de type Banner utilisent une partie de l'écran pour afficher une bannière publicitaire

La première façon d'intégrer iAd c'est avec une bannière publicitaire. En général, elle apparaît en bas de l'écran et en couvre une partie.

Dans cette intégration, une fois qu'une annonce publicitaire a été téléchargée, nous allons animer la bannière sur la vue ; sinon, nous la garderions hors de la vue.

Les publicités en plein écran fournissent des annonces plus étendues pour applications iPad

La seconde méthode pour intégrer iAd est représentée par les publicités en plein écran. Par exemple, vous pouvez ajouter une annonce en plein écran comme étant l'une des « pages » d'une application de type magazine. Dans d'autres cas, vous pouvez les afficher en plein écran comme l'utilisateur qui passerait d'une vue à l'autre.

Interrompre les activités non essentielles tandis que les utilisateurs interagissent avec les publicités

Une fois que l'utilisateur appuie sur l'annonce, il va lancer une expérience interactive en plein écran. Cela occulte tout ce qui se passe en même temps dans l'application, il est donc conseillé de mettre votre application en « pause » lorsque cela se produit.

L'annulation de la publicité a un impact négatif sur votre application

Vous pouvez annuler programmatiquement l'expérience publicitaire interactive et forcer l'utilisateur à retourner à votre application, si celle-ci a besoin de son attention. Toutefois, Apple conseille de le faire uniquement si c'est absolument nécessaire, car cela peut affecter votre taux de remplissage.

Valider le support iAd de votre App avant de la publier

Lorsque vous avez intégré iAd et que vous testez votre application, vous verrez des publicités de test s'afficher à la place de vos bannières et annonces en plein écran. En utilisant celles-ci, vous pouvez vous assurer qu'elles suivent les Human Interface Guidelines pour iAd.

Ce tutoriel vous montrera comment ajouter la bannière publicitaire en bas de l'écran de votre application.

Commençons par la création d'un projet dans lequel nous allons intégrer la bannière. Ouvrez Xcode 5 et créez un nouveau projet Xcode Single View Application.

Peu importent le nom et les identificateurs du projet puisque c'est juste une démonstration.

En bref, nous allons passer par ces étapes :

3.1 — Ajouter le framework iAd à notre projet Xcode.

3.2 — Créer, initialiser et ajouter l'objet AdBannerView à notre vue.

3.3 — Animer la bannière sur la vue après une récupération de publicité réussie.

3.4 — Gérer le cas où l'application ne parvient pas à charger une publicité à partir du réseau.

III-A. Ajouter le framework iAd à notre projet Xcode▲

Accédez aux paramètres du projet dans General :

Ensuite, faites défiler vers le bas où vous voyez une section intitulée Linked Frameworks and Libraries. Cliquez sur l'icône + et recherchez iAd.

Maintenant que vous avez ajouté avec succès le framework iAd au projet, nous pouvons utiliser ses classes !

III-B. Créer, initialiser et ajouter l'objet AdBannerView à notre vue▲

Allez dans ViewController.m et ajoutez ce code en dessous de la méthode viewDidLoad :

 

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

#import "ViewController.h"
#import <iAd/iAd.h>
 
@interface ViewController ()
 
@end
 
@implementation ViewController
 
- (void)viewDidLoad
{
    [super viewDidLoad];
    // Faites toute configuration supplémentaire après le chargement de la vue, généralement à partir d'un fichier nib.
}
 
- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    
    ADBannerView *adView = [[ADBannerView alloc] initWithFrame:CGRectMake(0, self.view.frame.size.height - 50, 320, 50)];
    [self.view addSubview:adView];
}

Les lignes à commenter sont :

Ligne 2 : nous devons importer le framework iAd avant de pouvoir utiliser ses classes !

Lignes 16-22 : ici, nous redéfinissons la méthode viewDidAppear, créons un nouvel objet AdBannerView et puis définissons sa taille et sa position. Enfin, nous l'ajoutons à la vue.

Si vous exécutez votre application maintenant, vous verrez la bannière s'afficher en bas de votre écran.

III-C. Animer la bannière sur la vue après une récupération de publicité réussie▲

Pour animer la bannière sur la vue, nous devons au départ la positionner hors de la vue.

Tout d'abord, nous devons rendre la classe ViewController conforme au protocole AdBannerDelegate afin que l'objet ViewController puisse être averti quand une bannière a été chargée avec succès. C'est seulement alors que nous allons l'animer (si nous ne savons pas quand la bannière a été chargée, nous ne savons pas quand l'animer !).

Allez donc dans ViewController.h, importez le framework et rendez-le conforme au protocole de cette manière :

 

Sélectionnez

1.
2.
3.
4.
5.
6.

#import <UIKit/UIKit.h>
#import <iAd/iAd.h>
 
@interface ViewController : UIViewController<ADBannerViewDelegate>
 
@end

Puis revenons simplement en arrière et modifions légèrement le code dans ViewController.m :

 

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

#import "ViewController.h"
 
@interface ViewController ()
{
    BOOL _bannerIsVisible;
    ADBannerView *_adBanner;
}
@end
 
@implementation ViewController
 
- (void)viewDidLoad
{
    [super viewDidLoad];
    // Faites toute configuration supplémentaire après le chargement de la vue, généralement à partir d'un fichier nib.
}
 
- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    
    _adBanner = [[ADBannerView alloc] initWithFrame:CGRectMake(0, self.view.frame.size.height, 320, 50)];
    _adBanner.delegate = self;
}

Remarquez ces changements :

Ligne 2 : ici, nous avons enlevé l'import du framework iAd, car nous le faisons déjà dans le fichier .H.

Lignes 4-7 : notez que nous avons ajouté ici quelques variables d'instance, pour garder trace de la bannière et de son état de visibilité.

Lignes 18-24 : remarquez que nous sommes en train de créer l'objet bannière publicitaire et de le configurer comme notre variable d'instance. Notez également que l'origine Y est définie de sorte que la bannière soit en fait en dehors du bas de l'écran. Enfin, nous avons également configuré le délégué pour la bannière comme « self », qui se réfère à l'objet ViewController.

Maintenant, en bas du même fichier, nous allons implémenter la méthode déléguée AdBanner qui nous dit quand une annonce a été téléchargée avec succès :

 

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Débarrassez-vous des ressources qui peuvent être recréées.
}
 
- (void)bannerViewDidLoadAd:(ADBannerView *)banner
{
    if (!_bannerIsVisible)
    {
        // Si la bannière ne fait pas partie de la hiérarchie de la vue, l'y ajouter
        if (_adBanner.superview == nil)
        {
            [self.view addSubview:_adBanner];
        }
        
        [UIView beginAnimations:@"animateAdBannerOn" context:NULL];
        
        // Suppose que la bannière est juste en dessous de la partie inférieure de l'écran.
        banner.frame = CGRectOffset(banner.frame, 0, -banner.frame.size.height);
        
        [UIView commitAnimations];
        
        _bannerIsVisible = YES;
    }
}
 
- (void)bannerView:(ADBannerView *)banner didFailToReceiveAdWithError:(NSError *)error
{
    NSLog(@"Failed to retrieve ad");
}
 
@end

Ligne 7 : maintenant, nous mettons en œuvre la méthode déléguée bannerViewDidLoadAd. Celle-ci se déclenche quand une annonce est chargée avec succès, mais si vous n'avez pas configuré ViewController comme délégué de l'objet bannière, la méthode ne se déclenchera pas, alors assurez-vous que vous avez suivi l'étape précédente où nous configurons le délégué.

Ligne 9 : ici, nous vérifions si la bannière est visible avant de faire quoi que ce soit. La raison est que cette méthode peut se déclencher périodiquement et rafraîchir la bannière de façon automatique lors du déclenchement de cette méthode. Or, nous ne voulons l'animer que dans un premier temps.

Lignes 11-15 : ici, nous ajoutons à la vue le véritable objet bannière publicitaire, car nous ne le faisons plus dans viewDidAppear.

Lignes 17-22 : ici, nous animons la bannière pour la faire glisser du bas de l'écran vers le haut. Rappelez-vous qu'elle a été initialement positionnée juste en dessous du bord inférieur. Donc maintenant, nous devons uniquement ajuster le décalage Y.

Ligne 24 : enfin, nous avons configuré notre drapeau BOOL de sorte que, si cette méthode se déclenche à nouveau, il n'essayera pas d'encore l'animer.

Lignes 28-31 : ici, nous traitons la situation où l'application ne parvient pas à récupérer une annonce.

Pendant vos essais, le réseau iAd va faire parfois délibérément échouer la tentative de récupération des annonces, pour que vous puissiez tester des scénarios réussis ou pas. Donc, ne vous inquiétez pas si votre bannière ne s'affiche pas. Il suffit d'arrêter votre application et de l'exécuter à nouveau jusqu'à ce que vous obteniez un chargement d'annonce réussi.

III-D. Gérer le cas où l'application ne peut pas récupérer une annonce à partir du réseau▲

- (void)bannerView:(ADBannerView *)banner didFailToReceiveAdWithError:(NSError *)error
{
    NSLog(@"Failed to retrieve ad");
    
    if (_bannerIsVisible)
    {
        [UIView beginAnimations:@"animateAdBannerOff" context:NULL];
        
        // Suppose que la bannière est juste en dessous de la partie inférieure de l'écran.
        banner.frame = CGRectOffset(banner.frame, 0, banner.frame.size.height);
        
        [UIView commitAnimations];
        
        _bannerIsVisible = NO;
    }
}

Maintenant que votre application affiche des bannières iAd, que devez-vous encore configurer pour diffuser de vraies annonces, lorsque vous publiez votre application sur l'App Store ?

Rien !

Vous aviez l'habitude de configurer cela dans votre catalogue d'applications sur iTunes Connect, mais ce n'est plus nécessaire.

Maintenant, vous ne devez plus rien faire. Selon ce guide :

Notez cependant que si vous voulez cesser l'affichage des annonces, vous devez publier une nouvelle mise à jour de l'application, sans le framework iAd.

Dans ce tutoriel, vous avez vu combien c'est facile d'intégrer une bannière publicitaire iAd dans votre application. iAd peut être un excellent moyen de monétiser votre application et de vous faire récompenser pour la satisfaction que celle-ci donne aux utilisateurs.

Merci d'avoir lu et suivi ce tutoriel ! Si vous l'avez trouvé utile et que vous le partagez avec vos amis et collègues, je vous en serai reconnaissant !

Nous remercions Chris Ching de nous avoir aimablement autorisés à publier son article. Cet article est une traduction autorisée dont le texte original peut être trouvé sur codewithchris.com. Nous remercions aussi Mishulyna pour sa traduction, LeBzul pour sa relecture technique ainsi que jacques_jean pour sa relecture orthographique.