Premiers pas

Ce guide est destiné aux éditeurs qui souhaitent monétiser une application Flutter.

Pour diffuser des annonces AdMob et générer des revenus, vous devez commencer par intégrer le SDK Google Mobile Ads dans une application Flutter (ce que vous allez faire ici). Une fois l'intégration effectuée, vous pouvez choisir un format d'annonce pour obtenir la procédure détaillée.

Le SDK Google Mobile Ads pour Flutter permet actuellement de charger et d'afficher des bannières, des annonces interstitielles (plein écran), des annonces natives et des annonces avec récompense.

Conditions préalables

Importer le SDK Mobile Ads

Configuration spécifique à la plate-forme

Android

Mettre à jour AndroidManifest.xml

L'ID d'application AdMob doit être inclus dans le AndroidManifest.xml. Sinon, un plantage se produit au lancement de l'application.

Ajoutez l'ID d'application AdMob, tel qu'identifié dans l'interface Web AdMob, au fichier android/app/src/main/AndroidManifest.xml de l'application en ajoutant une balise <meta-data> nommée com.google.android.gms.ads.APPLICATION_ID. Pour android:value, insérez votre propre ID d'application AdMob entre guillemets, comme indiqué ci-dessous:

<manifest>
    <application>
        <!-- Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713 -->
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
    <application>
<manifest>

Utilisez le même value lorsque vous initialisez le plug-in dans votre code Dart.

Consultez le guide Android pour en savoir plus sur la configuration de AndroidManifest.xml et de l'ID de l'application.

iOS

Mettre à jour Info.plist

Dans le fichier ios/Runner/Info.plist de votre application, ajoutez une clé GADApplicationIdentifier avec la valeur de chaîne de votre ID d'application AdMob, identifié dans l'interface Web AdMob:

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-################~##########</string>

Vous devez transmettre la même valeur lorsque vous initialisez le plug-in dans votre code Dart.

Pour en savoir plus sur la configuration de Info.plist et de votre ID d'application, consultez le guide iOS.

Initialiser le SDK Mobile Ads

Avant de charger les annonces, demandez à votre application d'initialiser le SDK Mobile Ads. Pour ce faire, appelez MobileAds.instance.initialize(), qui initialise le SDK et renvoie un Future qui se termine une fois l'initialisation terminée ou après un délai de 30 secondes. Cette opération ne doit être effectuée qu'une seule fois, idéalement juste avant d'exécuter l'application.

import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();

  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    // Load ads.
  }
}

Sélectionnez un format d'annonce

Une fois que vous avez importé le SDK Mobile Ads, vous pouvez intégrer une annonce. AdMob propose de nombreux formats d'annonces. Vous pouvez donc choisir celui qui convient le mieux à l'expérience utilisateur de votre application.

Annonces rectangulaires qui s'affichent en haut ou en bas de l'écran de l'appareil. Les bannières restent à l'écran pendant que les utilisateurs interagissent avec l'application et peuvent s'actualiser automatiquement après un certain temps. Si vous débutez dans la publicité mobile, elle constitue un excellent point de départ.

Implémenter une bannière

Interstitiel

Annonces plein écran qui couvrent l'interface d'une application jusqu'à ce qu'elle soit fermée par l'utilisateur. Elles sont mieux adaptées aux pauses naturelles dans le flux d'exécution d'une application, par exemple entre deux niveaux d'un jeu ou juste après la fin d'une tâche.

Insérer une annonce interstitielle

Natif

Annonces personnalisables qui correspondent à l'apparence de votre application. C'est vous qui décidez de leur emplacement et de leur emplacement, afin que leur mise en page soit plus cohérente avec l'interface de votre application.

Intégrer une annonce native

Accordé

Annonces qui récompensent les utilisateurs lorsqu'ils regardent de courtes vidéos et interagissent avec des annonces jouables et des enquêtes. Idéal pour monétiser les jeux sans frais.

Intégrer une annonce avec récompense