Comment intégrer une régie publicitaire dans une application mobile Ionic/Cordova : AdMob - Reward Video ?

🚀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 la vidéo publicitaire.

a- Création du service :

b- Configuration de notre régie publicitaire :

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 régie publicitaire vidéo

• Méthode permettant d’écouter l’évènement de fermeture de la fenêtre affichant la vidéo

• Méthode permettant de récupérer le nombre de points attribué à chaque vidéo suivie

e- Ajout de la méthode permettant d’afficher la régie publicitaire :

Nous avons créé une méthode permettant d’afficher la régie 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 régies 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 la régie publicitaire 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 showRewardVideoAd() de notre service :

Nous ferons appel à cette méthode dans notre précédente méthode onShowRewardVideo() :

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-reward-video

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 !!!