×

En savoir plus

Boîte d'auteur


Discutez de votre projet

À propos de nous

Nous sommes un partenaire Microsoft Gold avec sa présence aux États-Unis et en Inde. Nous sommes un fournisseur de services informatiques dynamique et professionnel au service des entreprises et des startups, en les aidant à relever les défis de l'économie mondiale. Nous offrons des services dans le domaine de la consultation et de la mise en œuvre CRM, du développement d'applications, du développement d'applications mobiles, du développement Web et du développement offshore.

Admob annonce à Flutter Application

Comment mettre en œuvre les publicités Admob dans les applications Flutter

By Subodh Dharmwan / 27 janvier 2020

3 novembre 2023
Comment mettre en œuvre les publicités Admob dans les applications Flutter

Imaginez ceci : vous avez développé une application Flutter fantastique et elle est prête à prendre d'assaut le monde numérique. Vous y avez mis tout votre cœur et votre âme, créant quelque chose qui est non seulement visuellement époustouflant, mais aussi incroyablement fonctionnel. Mais qu'est-ce qui manque ? Une façon de monétiser votre travail acharné, bien sûr ! C'est là qu'intervient AdMob, la plateforme de publicité mobile de Google.

Si vous vous demandez comment intégrer de manière transparente les publicités AdMob dans votre application Flutter, vous êtes au bon endroit. Monétiser votre application est une décision judicieuse, et nous sommes là pour vous guider tout au long du processus. Alors retroussons nos manches et plongeons dans le monde d'AdMob et de Flutter, où le potentiel de revenus de votre application est sur le point d'augmenter.

Voici le processus étape par étape pour implémenter les publicités Admob dans les applications Flutter.

Trouvez admob_flutter : ^0.3.2 en visitant https://pub.dev/.

Ce blog tutoriel vous montrera comment implémenter ou afficher une bannière publicitaire à l'aide du plugin admob_flutter. 

Suivez les étapes de synthèse: 

 1. Ouvrez votre Pubspec.yaml

 2. Inclure le package admob_flutter en ajoutant admob_flutter: ^ 0.3.2  dans le fichier pubspec.yaml. 

 3. Installer le package à partir de la ligne de commande $ flutter pub obtenir 

 4. Vous devez maintenant créer un identifiant d'application pour admob, vous pouvez vérifier le lien et obtenir l'identifiant de l'application. https://developers.google.com/admob 

 5. Configurez l'application avec l'identifiant de compte admob qui peut être utilisé dans notre projet. Par exemple, "Ca-app-pub-3940256099942544/6300978111 " 

Ajoutez maintenant cet identifiant pour les deux plates-formes (Android et iOS) dans votre projet Flutter. Pour Android, nous devons ajouter cet élément au fichier manifeste comme ci-dessous. 

 <meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-3940256099942544~1458002511"/>

 6. Pour iOS, nous devons ajouter le même identifiant dans info.plist fichier.   

<key&GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string> 

 7. Importez maintenant le package et initialisez add mob.  

 import 'package: admob_flutter / admob_flutter.dart'; 

 8. Maintenant que la configuration de la configuration est terminée, nous pouvons commencer avec des publicités. Le package flutter_admob prend en charge trois types d'annonces différents pouvant être mis en œuvre: bannière, interstitiel et récompense. 

 9. Bannière AdMob

La bannière AdMob nous permet d'afficher une publicité de style bannière dans l'application. Nous pouvons l'utiliser en ajoutant le widget AdMobBanner directement dans notre arborescence de widgets. Lorsque l'utilisateur clique dessus, il sera redirigé vers la destination de l'annonce. 

AdmobBanner(adUnitId: "ca-app-pub-3940256099942544/6300978111", 
adSize: AdmobBannerSize.LARGE_BANNER)

     adUnitId – La publicité que nous souhaitons afficher.
     Taille de l'annonce – C’est la taille de l’ajout. Il existe différents types de tailles de bannières
 

BANNIÈRE - 320 * 50 taille
   LARGE_BANNER - taille 320 * 100
   MEDIUM_RECTANGLE - taille 320 * 250
   FULL_BANNER - 468 * 60 taille
   LEADERBOARD - 728 * 90 taille
   SMART_BANNER - cette bannière peut être placée à l'intérieur de n'importe quelle taille du conteneur. 

Auditeur- l'auditeur consiste à écouter l'événement qui se produit autour de la bannière adMob. Le rappel de cet écouteur nous fournit une instance d'AdmobAdEvent. 

AdmobAdEvent peut être comme suit: 

chargé, ouvert, fermé, échec de chargement, cliqué, impression, abandon de l'application, terminé, récompensé, démarré. 

10. Annonce interstitielle: Il s'agit d'une annonce en plein écran qui est présentée à l'utilisateur. Pour ajouter cela, nous devons initialiser AdmobInterstitial. Pour montrer comment nous pouvons l'initialiser, j'ai écrit un petit morceau de code ci-dessous. Tu peux le vérifier. Quel retour AdmobInterstitial, ajoutez également l'écouteur pour écouter AdmobAdEvent. Pour charger l'instance de notre annonce, nous devons appeler la fonction load ().
 

11. _ AdMob interstitial.load ();

Comme nous ne voulons pas montrer cette annonce à l'utilisateur avant qu'elle ne soit complètement chargée, nous devons observer l'état de l'annonce, si l'annonce a été complètement chargée, nous appelons la fonction show () pour afficher l'annonce à l'utilisateur .

Enfin, nous en avons terminé avec une publicité, nous devons maintenant invoquer le disposer() fonction pour nettoyer

12. Annonce de récompense  

L'annonce de récompense peut être exécutée si vous souhaitez récompenser l'utilisateur pour avoir regardé l'annonce affichée à l'écran. Pour afficher l'annonce de récompense, vous devez créer une nouvelle instance de la classe AdmobReward et d'autres éléments sont identiques à l'annonce interstitielle. Si l'utilisateur complète l'annonce, les types AdmobEvent.rewarded nous permettent de recevoir une notification lorsque l'utilisateur est récompensé pour avoir regardé l'annonce. 

Aussi, lisez: Principaux conseils pour créer des applications mobiles sécurisées

Conclusion:

Alors que nous tirons les rideaux de notre AdMob voyage dans l'univers Flutter, vous avez désormais les clés pour libérer le potentiel de revenus de votre application mobile. AdMob, avec son intégration conviviale et ses puissantes capacités de monétisation, offre un scénario gagnant-gagnant pour vous et vos utilisateurs.

En mettant en œuvre les annonces AdMob de manière stratégique, vous n'ajoutez pas seulement de l'argent à vos résultats ; vous améliorez également l'expérience utilisateur. Il s'agit d'un équilibre délicat qui, lorsqu'il est bien fait, peut transformer votre application d'un projet passionnant en une entreprise rentable.

Alors n'hésitez pas. Profitez de ce que vous avez appris ici, explorez les possibilités infinies du monde d'AdMob et de Flutter et regardez votre application prospérer, tant en termes de fonctionnalités que de réussite financière. Place à l'avenir brillant et lucratif de votre application !

[sc name = "Développement d'applications mobiles"]

Imaginez ceci : vous avez développé une application Flutter fantastique et elle est prête à prendre d'assaut le monde numérique. Vous y avez mis tout votre cœur et votre âme, créant quelque chose qui est non seulement visuellement époustouflant, mais aussi incroyablement fonctionnel. Mais qu'est-ce qui manque ? Une façon de monétiser votre travail acharné, bien sûr ! C'est là qu'intervient AdMob, la plateforme de publicité mobile de Google.

Si vous vous demandez comment intégrer de manière transparente les publicités AdMob dans votre application Flutter, vous êtes au bon endroit. Monétiser votre application est une décision judicieuse, et nous sommes là pour vous guider tout au long du processus. Alors retroussons nos manches et plongeons dans le monde d'AdMob et de Flutter, où le potentiel de revenus de votre application est sur le point d'augmenter.

Voici le processus étape par étape pour implémenter les publicités Admob dans les applications Flutter.

Trouvez admob_flutter : ^0.3.2 en visitant https://pub.dev/.

Ce blog tutoriel vous montrera comment implémenter ou afficher une bannière publicitaire à l'aide du plugin admob_flutter. 

Suivez les étapes de synthèse: 

 1. Ouvrez votre Pubspec.yaml

 2. Inclure le package admob_flutter en ajoutant admob_flutter: ^ 0.3.2  dans le fichier pubspec.yaml. 

 3. Installer le package à partir de la ligne de commande $ flutter pub obtenir 

 4. Vous devez maintenant créer un identifiant d'application pour admob, vous pouvez vérifier le lien et obtenir l'identifiant de l'application. https://developers.google.com/admob 

 5. Configurez l'application avec l'identifiant de compte admob qui peut être utilisé dans notre projet. Par exemple, "Ca-app-pub-3940256099942544/6300978111 " 

Ajoutez maintenant cet identifiant pour les deux plates-formes (Android et iOS) dans votre projet Flutter. Pour Android, nous devons ajouter cet élément au fichier manifeste comme ci-dessous. 

 <meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-3940256099942544~1458002511"/>

 6. Pour iOS, nous devons ajouter le même identifiant dans info.plist fichier.   

<key&GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string> 

 7. Importez maintenant le package et initialisez add mob.  

 import 'package: admob_flutter / admob_flutter.dart'; 

 8. Maintenant que la configuration de la configuration est terminée, nous pouvons commencer avec des publicités. Le package flutter_admob prend en charge trois types d'annonces différents pouvant être mis en œuvre: bannière, interstitiel et récompense. 

 9. Bannière AdMob

La bannière AdMob nous permet d'afficher une publicité de style bannière dans l'application. Nous pouvons l'utiliser en ajoutant le widget AdMobBanner directement dans notre arborescence de widgets. Lorsque l'utilisateur clique dessus, il sera redirigé vers la destination de l'annonce. 

AdmobBanner(adUnitId: "ca-app-pub-3940256099942544/6300978111", 
adSize: AdmobBannerSize.LARGE_BANNER)

     adUnitId – La publicité que nous souhaitons afficher.
     Taille de l'annonce – C’est la taille de l’ajout. Il existe différents types de tailles de bannières
 

BANNIÈRE - 320 * 50 taille
   LARGE_BANNER - taille 320 * 100
   MEDIUM_RECTANGLE - taille 320 * 250
   FULL_BANNER - 468 * 60 taille
   LEADERBOARD - 728 * 90 taille
   SMART_BANNER - cette bannière peut être placée à l'intérieur de n'importe quelle taille du conteneur. 

Auditeur- l'auditeur consiste à écouter l'événement qui se produit autour de la bannière adMob. Le rappel de cet écouteur nous fournit une instance d'AdmobAdEvent. 

AdmobAdEvent peut être comme suit: 

chargé, ouvert, fermé, échec de chargement, cliqué, impression, abandon de l'application, terminé, récompensé, démarré. 

10. Annonce interstitielle: Il s'agit d'une annonce en plein écran qui est présentée à l'utilisateur. Pour ajouter cela, nous devons initialiser AdmobInterstitial. Pour montrer comment nous pouvons l'initialiser, j'ai écrit un petit morceau de code ci-dessous. Tu peux le vérifier. Quel retour AdmobInterstitial, ajoutez également l'écouteur pour écouter AdmobAdEvent. Pour charger l'instance de notre annonce, nous devons appeler la fonction load ().
 

11. _ AdMob interstitial.load ();

Comme nous ne voulons pas montrer cette annonce à l'utilisateur avant qu'elle ne soit complètement chargée, nous devons observer l'état de l'annonce, si l'annonce a été complètement chargée, nous appelons la fonction show () pour afficher l'annonce à l'utilisateur .

Enfin, nous en avons terminé avec une publicité, nous devons maintenant invoquer le disposer() fonction pour nettoyer

12. Annonce de récompense  

L'annonce de récompense peut être exécutée si vous souhaitez récompenser l'utilisateur pour avoir regardé l'annonce affichée à l'écran. Pour afficher l'annonce de récompense, vous devez créer une nouvelle instance de la classe AdmobReward et d'autres éléments sont identiques à l'annonce interstitielle. Si l'utilisateur complète l'annonce, les types AdmobEvent.rewarded nous permettent de recevoir une notification lorsque l'utilisateur est récompensé pour avoir regardé l'annonce. 

Aussi, lisez: Principaux conseils pour créer des applications mobiles sécurisées

Conclusion:

Alors que nous tirons les rideaux de notre AdMob voyage dans l'univers Flutter, vous avez désormais les clés pour libérer le potentiel de revenus de votre application mobile. AdMob, avec son intégration conviviale et ses puissantes capacités de monétisation, offre un scénario gagnant-gagnant pour vous et vos utilisateurs.

En mettant en œuvre les annonces AdMob de manière stratégique, vous n'ajoutez pas seulement de l'argent à vos résultats ; vous améliorez également l'expérience utilisateur. Il s'agit d'un équilibre délicat qui, lorsqu'il est bien fait, peut transformer votre application d'un projet passionnant en une entreprise rentable.

Alors n'hésitez pas. Profitez de ce que vous avez appris ici, explorez les possibilités infinies du monde d'AdMob et de Flutter et regardez votre application prospérer, tant en termes de fonctionnalités que de réussite financière. Place à l'avenir brillant et lucratif de votre application !

Services de développement d'applications mobiles

Voulez-vous tirer parti de la technologie mobile pour votre entreprise? Cynoteck est un fournisseur unique de services de développement d'applications mobiles. Nous fournissons des services de développement d'applications iOS et Android afin que vous puissiez atteindre votre public cible sur n'importe quel appareil.

invité
0 Commentaires
Commentaires en ligne
Voir tous les commentaires
0
J'adorerais vos pensées, veuillez commenter.x