Nombreuses sont les applications gratuites que nous trouvons sur les différents stores tels que Apple Store ou Google Play Store. Parmi elles, il y en a qui utilisent les publicités afin de rentabiliser pour couvrir les charges liées à la maintenance de celles-ci. D’autres par contre, les utilisent pour faire gagner des points à l’utilisateur afin de débloquer des niveaux ou des articles.
Il existe plusieurs outils de régie publicitaire à savoir : Google AdMob, Flurry, Tapjoy, etc. Aujourd’hui, nous nous intéresserons à Google AdMob à travers son implémentation dans une application Ionic/Angular💙 couplée au framework Cordova. Nous implémenterons un interstitiel qui n’est rien d’autre une bannière publicitaire plein écran. Let’s go on !😁
Don’t comment bad code – rewrite it.
🚀 Création du projet Ionic :
🚀Ajout du framework Cordova à travers l’ajout de notre plateforme Android :
🚀Ajout du plugin Cordova AdMob Free :
Nous exécuterons deux lignes de commandes séparées. En premier lieu, nous ferons:
Ici, la variable ADMOB_APP_ID est l’ID de votre projet AdMob créé précédemment sur le site officiel de Google AdMob : https://admob.google.com/intl/fr/home/get-started/
Ensuite, on exécutera cette ligne de commande :
Enfin, dans le fichier app.module.ts du dossier app, ajoutez la dépendance AdMobFree que nous venons d’installer :
🚀Création d’un service AdmobService :
Dans ce service, nous implémenterons nos méthodes pour configurer notre régie publicitaire et également mettre à disposition la méthode pour afficher l’interstitiel.
a- Création du service :
b- Configuration de notre régie publicitaire interstitielle :
c- Appel de la dépendance AdMobFree dans le constructeur :
d- Ajout de quelques méthodes essentielles pour initialiser notre régie publicitaire :
- Méthode permettant de configurer notre annonce publicitaire
- Méthode permettant d’écouter l’évènement de fermeture de la fenêtre affichant notre interstitiel
e- Ajout de la méthode permettant d’afficher la régie publicitaire :
Nous avons créé une méthode permettant d’afficher l’annonce publicitaire. Cette méthode est juste après le constructeur. Voici ce à quoi elle correspond :
Nous avons terminé l’implémentation de notre service pour afficher les annonces publicitaires. Etant donné qu’il est réutilisable, vous pouvez l’utiliser dans vos projets à chaque fois que vous en aurez besoin. Le code complet du service est :
🚀 Utilisation de notre service dans notre page Home (src > app > home) :
Dans cet exemple, nous implémenterons l’affichage de l’interstitiel au niveau de la page Home de notre projet. Ce n’est absolument rien de compliqué, ni d’extraordinaire🤓
a- Légère modification du fichier home.page.html :
Nous ajouterons juste un bouton qui une fois cliqué, affichera la régie publicitaire. Voici ce à quoi ressemble notre vue home.page.html :
b- Appel du service dans le constructeur de la classe HomePage (home.page.ts) :
c- Implémentation de la méthode showInterstitialAd() de notre service :
Nous ferons appel à cette méthode dans notre précédente méthode onShowInterstitial() :
Voyez vous-même c’est simple comme bonjour😌. Voici le code complet de notre classe HomePage:
Le job est fin…!😎
🚀 Test de l’application sur Android (bien-sûr) :
Après un petit moment de build, voici ce que vous verrez à l’écran de votre smartphone Android :
Vous pouvez retrouver le code source de l’application sur GitHub en suivant ce lien : https://github.com/vy-group/ionic-admob-interstitiel
Que ce soit sous iOS ou sous Android, le code demeure le même. Dès que vous passerez en production sur iOS, vous aurez le même rendu.
Enjoy coding and stayed tuned !!!