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

Maintenant que vous avez passé tout ce temps à créer une application(tutoriel précédent) vous souhaitez la monétiser d'une façon ou d'une autre, n'est-ce pas ?

Dans ce tutoriel je vais vous montrer comment j'ai pu ajouter des bannières à mon application.

Les commentaires et les suggestions d'amélioration sont les bienvenus, alors, après votre lecture, n'hésitez pas. Commentez Donner une note à l'article (5)

Article lu   fois.

Les deux auteur et traducteur

Traducteur :

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

Introduction

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.

1. Créer votre compte sur iAd

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.

Image non disponible
Image non disponible

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.

Image non disponible

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 !

2. Aperçu du réseau publicitaire iAd

Pour référence, c'est ce guide de configuration iAd d'Apple que j'ai suivi pour faire ma propre mise en œuvre et c'est celui que nous allons parcourir ensemble ici.

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.

Le taux de remplissage est la vitesse avec laquelle iAd fournit une annonce à afficher chaque fois que votre application en demande une. Il peut y avoir des moments où votre application demande une annonce pour l'afficher et le réseau publicitaire iAd ne renvoie rien, car cela dépend de nombreux facteurs tels que leur inventaire publicitaire.

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.

3. Intégrer iAd dans votre application

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.

Image non disponible

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

Image non disponible

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.

3-1. Ajouter le framework iAd à notre projet Xcode

Image non disponible

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.

Image non disponible
Image non disponible

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

3-2. 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.

Image non disponible

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

Image non disponible

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

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
- (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;
    }
}

Ligne 5 : nous vérifions si la bannière est visible parce que si ce n'est pas le cas, nous n'avons pas besoin de l'animer afin de la masquer.

Lignes 7-12 : dans le cas où elle est visible, nous l'animons en la faisant glisser vers le bas de l'écran.

Ligne 14 : enfin, nous avons mis ce drapeau à NO afin que, si une publicité est récupérée avec succès, il sache qu'il doit animer la bannière vers le haut.

Maintenant, si vous exécutez votre application, vous verrez la bannière glisser dans la vue lors de la récupération réussie d'une annonce. Ensuite, si elle se rafraîchit et ne parvient pas à obtenir une autre annonce, elle va glisser hors de la vue.

4. Publier l'App

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 ( + LIEN ARTICLE DVP ?) ?

Rien !

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

Image non disponible

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

Après que votre application est approuvée et prête pour la vente, Apple l'examine afin de déterminer sa pertinence pour recevoir les pubs des annonceurs iAd. Lorsque votre application est approuvée pour iAd, vous allez commencer à voir les annonces dans les prochains jours.

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.

5. Conclusion

Le code source de la démonstration : vous pouvez télécharger le code source ici.

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 !

6. Remerciements Developpez

Nous remercions Chris Ching de nous avoir aimablement autorisé à 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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2015 Chris Ching - Developpez.com. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.