Antony Canut

8 février 2018

Comment monétiser son application – partie 2

Monétiser votre Application Xamarin

Dans mon précédent article sur comment monétiser votre App, je faisais la liste des différentes possibilités qui existent pour monétiser une application mobile. Les tutoriels pour implémenter chacune des solutions sont nombreux mais manquent parfois de “bonnes pratiques” qui expliquent quels sont les pièges à éviter dans leur implémentation. Pour les différentes méthodes d’implémentation, je vous donnerai également une source pour le faire en langage natif.

La publicité avec Firebase et AdMob

Il existe de nombreuses régies publicitaires pour monétiser une application. On rencontre des concurrents d’AdMob tel que Smaato, InMobi ou bien d’autres encore. Le choix d’une régie dépendra de votre projet mais aussi d’autres critères plus complexes. Il est à noter que vous n’êtes pas limités à une seule régie publicitaire, si l’une d’entre elle s’essouffle et propose moins de publicités dans votre application, vous pouvez toujours switcher, et ce de manière complètement transparente pour l’utilisateur.

Étape 1 : Inscription

Avant même d’inclure un quelconque package dans votre application, il va falloir disposer d’un compte Google. En effet, Firebase ou AdMob sont des produits du géant de la recherche. Voici donc le lien pour s’inscrire :

Sign in – Google Accounts

Une fois l’inscription faite, il vous suffit de créer un projet, en définissant la région. Vous n’avez pas besoin de préciser s’il s’agit d’un projet sous iOS ou Android, les deux pourront être ajoutés au même projet !

Ajoutez ensuite une application au projet, dans notre cas iOS. Sachez que cette étape sera quasiment identique lors du développement de l’application Android.

Remplissez les infos demandées, les “?” donneront suffisamment d’indications pour remplir chaque champs. Téléchargez ensuite le fichier .plist et mettez-le à la racine de votre projet iOS. Vous pouvez passer directement les étapes suivantes.

Rendez-vous ensuite sur l’onglet AdMob. Cette partie va nous servir à faire un pont entre Firebase et AdMob. Il va donc falloir créer un compte AdMob. Ce site servira à générer des publicités et connaître le montant des revenus. Ensuite, créez une application. Pas la peine de créer un bloc d’annonce pour le moment.

Une fois que c’est fait, allez dans les paramètres de l’application et associez-la à Firebase.

Et voilà. Vous pouvez désormais connecter votre application à une publicité !

Bannières publicitaires

Dans mon article précédent, je vous donnais tous les détails non techniques concernant les différents types de publicités qu’il est possible d’implémenter. Du côté technique, il y a quelques spécificités à connaître.

La bannière rapporte beaucoup moins que les autres types de bloc d’annonce. Il faut également la rafraîchir souvent. Avec AdMob, ce temps est facilement modifiable lors de la création ou de la modification de ce type de publicité.

Pour commencer, récupérez l’id de l’application enregistrée dans AdMob. Il se situe dans l’onglet “Application > Toute les applications“. Notez bien l’id de votre application pour la suite. Puis, il faut créer une bannière dans l’onglet “Bloc d’annonce” lorsque votre application est sélectionnée. Ajoutez un nouveau bloc d’annonce.

Pour chacun des différents blocs, la méthode sera la même, il faudra choisir un bloc et le configurer selon vos préférences. A la fin de la configuration, un id vous sera donné.

Avant de commencer la configuration, installez les packages Nugget suivants :

Pour iOS

Côté configuration de l’application, il va falloir sélectionner le fichier GoogleService-Info.plist rajouté précédemment et changer ses propriétés de “Build Action” pour le mettre en “Bundle Resource“. Ouvrez ensuite le fichier et passez la valeur IS_ADS_ENABLED à “Yes”. Enfin pour tout ce qui utilise Firebase, il faudra l’initialiser au démarrage de l’application. Dans la méthode FinishLaunching du fichier AppDelegate.cs, il sera nécessaire d’appeler la méthode suivante provenant du namespace “Firebase.Analytics”

App.Configure();

Pour Android

Côté configuration de l’application, il faudra certainement redémarrer la solution pour voir apparaître “GoogleServiceJson” dans les propriétés de “Build Action“, une fois fait, attribuez-le.

L’initialisation du projet n’est à faire qu’une seule fois et pour l’ensemble des services Firebase. Il y a cependant quelques ajustements à faire, pour utiliser l’analyse de crash par exemple, mais cela reste assez bien documenté et j’aurai l’occasion d’en reparler dans un prochain article.

Enfin, il est maintenant temps pour vous d’implémenter votre première bannière de pub. Créez dans le storyboard une View qui va accueillir votre bannière. Sachez qu’il faudra une taille minimum à votre contrôle pour que la publicité puisse s’afficher. Voici d’ailleurs les standards à respecter :

320×50 | Standard banner | Phones and tablets | kGADAdSizeBanner
320×100 | Large banner | Phones and tablets | kGADAdSizeLargeBanner
300×250 | IAB medium rectangle | Phones and tablets | kGADAdSizeMediumRectangle
468x60IAB | full-size banner | Tablets | kGADAdSizeFullBanner
728x90IAB | leaderboard | Tablets | kGADAdSizeLeaderboard
Screen width x 32,50,90 | Smart banner | Phones and tablets | kGADAdSizeSmartBannerPortrait, kGADAdSizeSmartBannerLandscape

Ce tableau présente les différentes tailles de bannières adaptables en fonction d’un smartphone ou d’une tablette. Les constantes ne sont pas à apprendre par cœur, vous pourrez les retrouver dans une classe statique : “AdSizeCons“.

Sur iOS

Une fois votre “View” créée et rendue accessible depuis le ViewController, il vous faudra rajouter le code suivant :

private BannerView _adView;
private bool _viewOnScreen = false;

...

{
...

// Création du contrôle de la banière
_adView = new BannerView(size: AdSizeCons.Banner)
{
// Id de publicité de test, à remplacer par le votre
AdUnitID = "ca-app-pub-3940256099942544/6300978111",
RootViewController = this
};
// Donne une position centré par rapport au contrôle "View" qui va accueillir la bannière
_adView.Center = new CGPoint(BannerView.Bounds.Width / 2, BannerView.Bounds.Height / 2);

// Recharge la bannière une fois la publicité reçu
_adView.AdReceived += (object sender, EventArgs e) =>
{
// Vérifie que la bannière n'existe pas déjà au sein de la "View"
if (!_viewOnScreen)
{
// Ajoute la bannière dans la "View"
BannerView.AddSubview(_adView);
_viewOnScreen = true;
}
};

// Fait un appel pour obtenir une publicité à AdMob en fonction de l'AdUnitID, la partie Request.SimulatorID remplace automatiquement, l'AdUnit par une valeur de test si l'application est lancé dans un simulateur
var request = Request.GetDefaultRequest();
request.TestDevices = new[] { Request.SimulatorId.ToString() };
_adView.LoadRequest(request);
}

Sur Android

Il faut faire la même chose en créant un contrôle, un type “LinearLayout” fera parfaitement l’affaire pour héberger la publicité :

<LinearLayout android:id="@+id/adsBanner" android:layout_marginTop="4dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" />

Puis, dans l’activité de l’application faire une requête similaire à iOS :

// Création de la publicité avec les données de taille et AdUnitId (à remplacer lors de la mise en production)
var ad = new AdView(this.Application.BaseContext);
ad.AdSize = AdSize.Banner;
ad.AdUnitId = "ca-app-pub-3940256099942544/6300978111";
var requestbuilder = new AdRequest.Builder();
ad.LoadAd(requestbuilder.Build());
// Récupère le Layout et ajoute la pub à l'intérieur
var layout = FindViewById<LinearLayout>(Resource.Id.adsBanner);
layout.AddView(ad);

Ce simple code permet d’intégrer une publicité à votre application mobile. L’AdUnit est à remplacer lors de la mise en production par celui que vous obtenez sur le site AdMob. Pour la partie développement, remplacez la valeur soit par une valeur de test, soit lancez l’application sur un émulateur avec un “TestDevice” dans la requête. La liste des ID est disponible ici :

Test Ads | AdMob for Android | Google Developers

Si jamais vous décidez d’ignorer ce précieux conseil et que votre application génère ses premiers revenus durant la phase de développement, Google peut le détecter et donc suspendre votre compte AdMob pendant une durée de 30 jours et supprimer également tous les bénéfices engendrés de façon honnête ou non. De plus, la suspension empêche la connexion et la gestion du compte, tout en arrêtant les revenus de tous les services Google (autres applications, site web, vidéos youtube, etc.).

L’interstitiel

Autre forme de publicité abordée dans mon premier article, la publicité interstitielle. Pratique dans certains cas (fin de niveau dans un jeu, avant la lecture d’un article, …) elle génère des revenues plus importants que la bannière et peut bloquer complètement l’ergonomie d’une application. Cela peut potentiellement avoir un impact négatif dans vos reviews dans le store, en voici d’ailleurs un bon exemple :

Une publicité interstitielle n’a pas besoin d’un conteneur pour s’afficher, elle prendra forcément tout l’espace disponible. Il faudra cependant la charger avant pour que celle-ci s’affiche directement lors de l’appel. L’effet est beaucoup moins glamour si elle s’affiche lorsque l’utilisateur a lu la moitié d’un article et se retrouve interrompue par une publicité en pleine écran…

Sur iOS

private Interstitial _adInterstitial;

...

private void CreateAndRequestInterstitial()
{
_adInterstitial = new Interstitial("ca-app-pub-3940256099942544/1033173712");
// Permet de recharger la publicité une fois celle-ci affiché une fois
_adInterstitial.ScreenDismissed += (sender, e) =>
{
_adInterstitial.Dispose();
_adInterstitial = null;
CreateAndRequestInterstitial();
};

var request = Request.GetDefaultRequest();
request.TestDevices = new[] { Request.SimulatorId.ToString() };

_adInterstitial.LoadRequest(request);
}

private void ShowIntersitialAds()
{
if (_adInterstitial != null)
if (_adInterstitial.IsReady)
{                     _adInterstitial.PresentFromRootViewController(this);
}
}

Pensez bien sûr à initialiser la publicité avant de faire un “Show” sinon celle-ci ne s’affichera tout simplement pas.

Sur Android

private InterstitialAd _interstitialAd;

...

{
... // OnCreate, Init, ...

_interstitialAd = new InterstitialAd(this.Application.BaseContext);
_interstitialAd.AdUnitId = "ca-app-pub-9497790989899590/5654324930";
var requestBuilder = new AdRequest.Builder();
_interstitialAd.LoadAd(requestbuilder.Build());
...
}

private void ShowInterstitialAds()
{
if (_interstitialAd != null)
_interstitialAd.Show();
}

Et ce n’est pas plus compliqué que ça, bien sûr, sur le site AdMob, il faut créer la publicité de la même manière que pour la bannière. Celle-ci dispose d’ailleurs d’options intéressantes comme la limitation par user, qui permet par exemple de donner un peu de répit à un utilisateur qui à déjà vu 10 fois votre publicité. Vous pouvez également choisir de ne pas afficher de publicités vidéos, permettant ainsi à un utilisateur de quitter directement les interstitiels sans le faire attendre. L’objectif étant de toujours rendre la navigation dans l’application plus agréable.

La Vidéo récompense

Presque uniquement réservée au domaine du jeu vidéo, la vidéo récompense représente une publicité longue, très longue que l’utilisateur regarde par choix. Les vidéos peuvent durer plus d’une minute et elles détruisent complètement l’expérience utilisateur et la navigation dans votre application. Elles sont aussi beaucoup plus rémunératrices que les autres publicités, pour une simple raison d’ailleurs : elles fonctionnent. Vos utilisateurs ont alors un risque plus grand de cliquer sur la publicité, d’être attirés par ce qu’elle propose et donc de quitter purement et simplement votre application.

Sur iOS

private RewardBasedVideoAd _adVideo;
private bool _getReward = false;

// On Charge la vidéo avant de l'appeler, généralement dans l'init
private void CreateAndRequestMovieAds()
{
_adVideo = RewardBasedVideoAd.SharedInstance;
var request = Request.GetDefaultRequest();
request.TestDevices = new[] { Request.SimulatorId.ToString() };
_adVideo.LoadRequest(request, "ca-app-pub-3940256099942544/5224354917");
}
// On récompense l'utilisateur d'avoir visionné la vidéo, le montant est défini par avance dans AdMob lors de la création de la publicité
private void AdVideo_UserRewarded(object sender, RewardBasedVideoAdRewardEventArgs e)
{
var reward = e.Reward;
if (_getReward)
{
_getReward = false;
_viewModel.AddReward(e.Reward.Amount.Int32Value);
}
_adVideo.UserRewarded -= AdVideo_UserRewarded;
CreateAndRequestMovieAds();
}
// On Affiche la publicité si celle-ci est prête, on s'abonne également au fait que l'utilisateur puisse recevoir la récompense.
partial void ShowRewardAd_Clicked(NSObject sender)
{
if (_adVideo.Ready)
{
_getReward = true;
_adVideo.PresentFromRootViewController(this);
}
_adVideo.UserRewarded += AdVideo_UserRewarded;
}

Sur Android

// Il faut bien penser à ajouter "IRewardedVideoAdListener"
public class MyActivity : Activity, IRewardedVideoAdListener
{
private IRewardedVideoAd _videoAd;
private bool _adVideoIsReady = false;

...

{
... // Dans le OnCreate, Init, ...

_videoAd = MobileAds.GetRewardedVideoAdInstance(this.Application.BaseContext);
_videoAd.LoadAd("ca-app-pub-9497790989899590/4640626164", new AdRequest.Builder().Build());
_videoAd.RewardedVideoAdListener = this;
}

private void Button_Click(object sender, EventArgs e)
{
if (_adVideoIsReady)
_videoAd.Show();
}

public void OnRewarded(IRewardItem reward)
{
// todo: Récompenser l'utilisateur
// reward.Amount contient la valeur de récompense;
_adVideoIsReady = false;
}

public void OnRewardedVideoAdClosed()
{
_videoAd.LoadAd("ca-app-pub-3940256099942544/5224354917", new AdRequest.Builder().Build());
}

public void OnRewardedVideoAdFailedToLoad(int errorCode)
{
throw new NotImplementedException();
}

public void OnRewardedVideoAdLeftApplication()
{
throw new NotImplementedException();
}

public void OnRewardedVideoAdLoaded()
{
_adVideoIsReady = true;
}

public void OnRewardedVideoAdOpened()
{
throw new NotImplementedException();
}

public void OnRewardedVideoStarted()
{
throw new NotImplementedException();
}

Implémenter une vidéo dans Android demande d’avoir plus de méthode, libre à vous d’implémenter ou non les autres afin de notifier l’utilisateur qu’il n’aura pas accès à ses récompenses par exemple.

Conclusion

L’implémentation de publicités peut rapporter gros, il faudra cependant faire attention à ne pas trop altérer l’expérience utilisateur. Certaines publicités seront plus adaptées que d’autres à une application, c’est à vous de choisir laquelle vous souhaitez implémenter. Il en existe d’autres que je n’ai pas détaillées ici.

J’ai re-développé le jeu 4 Images 1 Mot en utilisant les publicités mentionnées plus haut, le jeu peut être téléchargé ici :

4 Images 1 Mot : Ex – Android Apps on Google Play

4 Images 1 Mot : Ex dans l’App Store

Vous aurez un exemple plus concret de la manière dont elles s’affichent.