Cette page a été traduite par l'API Cloud Translation.

Ajouter une bannière AdMob et des annonces natives intégrées à une application Flutter

1. Introduction

Dans cet atelier de programmation, vous allez ajouter une bannière AdMob et des annonces natives AdMob intégrées à une application Flutter.

Objectifs de l'atelier

Cet atelier de programmation va vous aider à mettre en œuvre une bannière et des annonces AdMob intégrées dans une application Flutter à l'aide du plug-in Google Mobile Ads pour Flutter.

Si vous rencontrez des problèmes (bugs de code, erreurs grammaticales, formulation peu claire, etc.) au cours de cet atelier, signalez-les à l'aide du lien Signaler une erreur situé dans l'angle inférieur gauche de l'atelier de programmation.

Points abordés

Configurer le plug-in Google Mobile Ads pour Flutter
Mettre en œuvre une bannière intégrée et des annonces avec récompense dans une application Flutter

Prérequis

Android Studio 4.1 ou version ultérieure
Xcode 12 ou version ultérieure (pour le développement sur iOS)

Comment évalueriez-vous votre niveau d'expérience avec AdMob ?

Débutant

Intermédiaire

Expert

Comment évalueriez-vous votre niveau d'expérience avec Flutter ?

<ph type="x-smartling-placeholder"></ph> Débutant

Intermédiaire

Expert

2. Configurer votre environnement de développement Flutter

Pour cet atelier, vous avez besoin de deux logiciels : le SDK Flutter et un éditeur.

Vous pouvez exécuter l'atelier de programmation sur l'un des appareils suivants :

Un appareil Android ou iOS physique connecté à votre ordinateur et réglé en mode développeur
Le simulateur iOS (les outils Xcode doivent être installés)
Android Emulator (à configurer dans Android Studio)
Un navigateur (Chrome est requis pour le débogage)
En tant qu'application de bureau Windows, Linux ou macOS. Vous devez développer votre application sur la plate-forme où vous comptez la déployer. Par exemple, si vous voulez développer une application de bureau Windows, vous devez le faire sous Windows pour accéder à la chaîne de compilation appropriée. Les exigences spécifiques aux systèmes d'exploitation sont détaillées sur docs.flutter.dev/desktop.

Télécharger le code

Téléchargez le fichier ZIP, puis décompressez son contenu. Vous disposerez d'un dossier intitulé admob-inline-ads-in-flutter-main.

Vous pouvez également cloner le dépôt GitHub à partir de la ligne de commande :

$ git clone https://github.com/googlecodelabs/admob-inline-ads-in-flutter

Le dépôt contient trois dossiers :

starter : le code de démarrage sur lequel s'appuie cet atelier de programmation.
complete : le code final de cet atelier de programmation (Java et Objective-C pour le code natif).
complete_kotlin_swift : le code final de cet atelier de programmation (Kotlin et Swift pour le code natif).

3. Configurer l'application et les blocs d'annonces AdMob

Étant donné que Flutter est un SDK multiplate-forme, vous devez ajouter une application et des blocs d'annonces pour Android et iOS dans AdMob.

Configurer pour Android

Pour configurer pour Android, vous devez ajouter une application Android et créer des blocs d'annonces.

Ajouter une application Android

Dans la console AdMob, cliquez sur AJOUTER UNE APPLICATION dans le menu Applications.
Lorsque le message Avez-vous publié votre application sur Google Play ou sur l'App Store ? s'affiche, cliquez sur NON.
Saisissez AdMob inline ads dans le champ du nom de l'application, puis sélectionnez la plate-forme Android.

Il n'est pas nécessaire d'activer les métriques utilisateur pour effectuer cet atelier de programmation. Toutefois, nous vous recommandons de le faire, car cela vous permet de comprendre plus en détail le comportement des utilisateurs. Cliquez sur ADD (Ajouter) pour terminer le processus.

Créer des blocs d'annonces

Pour ajouter des blocs d'annonces :

Sélectionnez l'application Annonces AdMob intégrées dans le menu Applications de la console AdMob.
Cliquez sur le menu Blocs d'annonces.

Bannière

Cliquez sur AJOUTER UN BLOC D'ANNONCES.
Sélectionnez le format Bannière.
Saisissez android-inline-banner dans le champ Nom du bloc d'annonces.
Cliquez sur CRÉER UN BLOC D'ANNONCES pour terminer le processus.

Natif

Cliquez sur AJOUTER UN BLOC D'ANNONCES.
Sélectionnez le format Natif avancé.
Saisissez android-inline-native dans le champ Nom du bloc d'annonces.
Cliquez sur CRÉER UN BLOC D'ANNONCES pour terminer le processus.

Il faut en général compter quelques heures pour qu'un nouveau bloc d'annonces puisse diffuser des annonces.

Si vous souhaitez tester le comportement de l'annonce immédiatement, utilisez l'ID de l'application test et les ID des blocs d'annonces tests indiqués dans les tableaux "ID d'application Android/ID de bloc d'annonces" et "ID d'application iOS/ID de bloc d'annonces".

Configurer pour iOS

Pour configurer pour iOS, vous devez ajouter une application iOS et créer des blocs d'annonces.

Ajouter une application iOS

Dans la console AdMob, cliquez sur AJOUTER UNE APPLICATION dans le menu Applications.
Lorsque le message Avez-vous publié votre application sur Google Play ou sur l'App Store ? s'affiche, cliquez sur NON.
Saisissez AdMob inline ads dans le champ du nom de l'application, puis sélectionnez la plate-forme iOS.

Il n'est pas nécessaire d'activer les métriques utilisateur pour effectuer cet atelier de programmation. Toutefois, nous vous recommandons de le faire, car cela vous permet de comprendre plus en détail le comportement des utilisateurs. Cliquez sur ADD (Ajouter) pour terminer le processus.

Créer des blocs d'annonces

Pour ajouter des blocs d'annonces :

Sélectionnez l'application Annonces AdMob intégrées dans le menu Applications de la console AdMob.
Cliquez sur le menu Blocs d'annonces.

Bannière

Cliquez sur AJOUTER UN BLOC D'ANNONCES.
Sélectionnez le format Bannière.
Saisissez ios-inline-banner dans le champ Nom du bloc d'annonces.
Cliquez sur CRÉER UN BLOC D'ANNONCES pour terminer le processus.

Natif

Cliquez sur AJOUTER UN BLOC D'ANNONCES.
Sélectionnez le format Natif avancé.
Saisissez ios-inline-native dans le champ Nom du bloc d'annonces.
Cliquez sur CRÉER UN BLOC D'ANNONCES pour terminer le processus.

Il faut en général compter quelques heures pour qu'un nouveau bloc d'annonces puisse diffuser des annonces.

Si vous voulez tester le comportement de l'annonce immédiatement, utilisez l'ID de l'application de test et les ID de blocs d'annonces indiqués dans le tableau suivant.

(Facultatif) Utiliser l'application et les blocs d'annonces AdMob de test

Si vous souhaitez suivre l'atelier de programmation au lieu de créer vous-même une application et des blocs d'annonces, vous pouvez utiliser l'ID de l'application AdMob de test et les ID de blocs d'annonces indiqués dans les tableaux suivants.

ID de l'application Android/ID du bloc d'annonces

Élément	ID de l'application/ID du bloc d'annonces
ID de l'application AdMob	`ca-app-pub-3940256099942544~3347511713`
Bannière	`ca-app-pub-3940256099942544/6300978111`
Natif	`ca-app-pub-3940256099942544/2247696110`

ID d l'application iOS/ID du bloc d'annonces

Élément	ID de l'application/ID du bloc d'annonces
ID de l'application AdMob	`ca-app-pub-3940256099942544~1458002511`
Bannière	`ca-app-pub-3940256099942544/2934735716`
Natif	`ca-app-pub-3940256099942544/3986624511`

Pour en savoir plus sur les annonces tests, consultez la documentation destinée aux développeurs pour les annonces tests Android et les annonces tests iOS.

4. Ajouter le plug-in Google Mobile Ads pour Flutter

Flutter utilise des plug-ins pour fournir un accès à un large éventail de services spécifiques à une plate-forme. Les plug-ins vous permettent d'accéder aux services et aux API sur chaque plate-forme.

Le plug-in google_mobile_ads permet de charger et d'afficher des bannières, des interstitiels, des annonces avec récompense et des annonces natives à l'aide de l'API AdMob.

Étant donné que Flutter est un SDK multiplate-forme, le plug-in google_mobile_ads peut être utilisé pour iOS et Android. Si vous ajoutez le plug-in à votre application Flutter, il est utilisé à la fois par les versions Android et iOS de l'application d'annonces AdMob intégrées.

Ajouter le plug-in Google Mobile Ads en tant que dépendance

Pour accéder aux API AdMob à partir du projet annonces AdMob intégrées, ajoutez google_mobile_ads en tant que dépendance au fichier pubspec.yaml situé à la racine du projet.

pubspec.yaml.

...
dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^0.3.9

  # TODO: Add google_mobile_ads as a dependency
  google_mobile_ads: ^1.2.0

...

Cliquez sur Pub get pour installer le plug-in dans le projet Annonces intégrées AdMob.

Mettre à jour le fichier AndroidManifest.xml (Android)

Ouvrez le fichier android/app/src/main/AndroidManifest.xml dans Android Studio.
Ajoutez l'ID de votre application AdMob en ajoutant une balise <meta-data> nommée com.google.android.gms.ads.APPLICATION_ID. Par exemple, si l'ID de votre application AdMob est ca-app-pub-3940256099942544~3347511713, ajoutez les lignes suivantes au fichier AndroidManifest.xml.

AndroidManifest.xml

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

</manifest>

Mettre à jour le fichier Info.plist (iOS)

Ouvrez le fichier ios/Runner/Info.plist dans Android Studio.
Ajoutez une clé GADApplicationIdentifier avec la valeur de chaîne de l'ID de votre application AdMob. Par exemple, si l'ID de votre application AdMob est ca-app-pub-3940256099942544~1458002511, ajoutez les lignes suivantes au fichier Info.plist.

ios/Runner/Info.plist

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

5. Ajouter une classe d'assistance pour les annonces

Créez un fichier nommé ad_helper.dart dans le répertoire lib. Ensuite, mettez en œuvre la classe AdHelper, qui fournit un ID d'application AdMob et des ID de blocs d'annonces pour Android et iOS.

Veillez à remplacer l'ID de l'application AdMob (ca-app-pub-xxxxxx~yyyyy) et l'ID du bloc d'annonces (ca-app-pub-xxxxxxx/yyyyyyyy) par les ID que vous avez créés à l'étape précédente.

ad_helper.dart

import 'dart:io';

class AdHelper {

  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_BANNER_AD_UNIT_ID";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_BANNER_AD_UNIT_ID>";
    } else {
      throw UnsupportedError("Unsupported platform");
    }
  }

  static String get nativeAdUnitId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_NATIVE_AD_UNIT_ID>";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_NATIVE_AD_UNIT_ID>";
    } else {
      throw UnsupportedError("Unsupported platform");
    }
  }
}

Servez-vous de l'extrait de code suivant si vous souhaitez utiliser l'ID de l'application AdMob et les ID de blocs d'annonces de test.

ad_helper.dart

import 'dart:io';

class AdHelper {
  
  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return 'ca-app-pub-3940256099942544/6300978111';
    } else if (Platform.isIOS) {
      return 'ca-app-pub-3940256099942544/2934735716';
    }
    throw UnsupportedError("Unsupported platform");
  }

  static String get nativeAdUnitId {
    if (Platform.isAndroid) {
      return 'ca-app-pub-3940256099942544/2247696110';
    } else if (Platform.isIOS) {
      return 'ca-app-pub-3940256099942544/3986624511';
    }
    throw UnsupportedError("Unsupported platform");
  }
}

6. Initialiser le SDK Google Mobile Ads

Avant de charger les annonces, vous devez initialiser le SDK Google Mobile Ads. Ouvrez le fichier lib/home_page.dart et modifiez _initGoogleMobileAds() pour initialiser le SDK avant le chargement de la page d'accueil.

Notez que vous devez modifier le type renvoyé par la méthode _initGoogleMobileAds() en remplaçant Future<dynamic> par Future<InitializationStatus> pour obtenir le résultat d'initialisation du SDK une fois l'opération terminée.

home_page.dart

// TODO: Import google_mobile_ads.dart
import 'package:google_mobile_ads/google_mobile_ads.dart';

import 'package:flutter/material.dart';

...

class HomePage extends StatelessWidget {

  ...

  Future<InitializationStatus> _initGoogleMobileAds() {
    // TODO: Initialize Google Mobile Ads SDK
    return MobileAds.instance.initialize();
  }
}

7. Ajouter une bannière

Dans cette section, vous affichez une bannière au milieu de la liste, comme illustré dans la capture d'écran suivante.

Ouvrez le fichier lib/banner_inline_page.dart.
Importez ad_helper.dart et google_mobile_ads.dart en ajoutant les lignes suivantes :

banner_inline_page.dart

...

// TODO: Import ad_helper.dart
import 'package:admob_inline_ads_in_flutter/ad_helper.dart';

// TODO: Import google_mobile_ads.dart
import 'package:google_mobile_ads/google_mobile_ads.dart';

class BannerInlinePage extends StatefulWidget {
  ...
}

Dans la classe _BannerInlinePageState, ajoutez les éléments et méthodes suivants pour la bannière.

Notez que _kAdIndex indique l'index dans lequel la bannière sera affichée et permet de calculer l'index des éléments de la méthode _getDestinationItemIndex().

banner_inline_page.dart

class _BannerInlinePageState extends State<BannerInlinePage> {

  // TODO: Add _kAdIndex
  static final _kAdIndex = 4;

  // TODO: Add a banner ad instance
  BannerAd? _ad;

  ...

  // TODO: Add _getDestinationItemIndex()
  int _getDestinationItemIndex(int rawIndex) {
    if (rawIndex >= _kAdIndex && _ad != null) {
      return rawIndex - 1;
    }
    return rawIndex;
  }

  ...
}

Dans la méthode initState(), créez et chargez un BannerAd pour la bannière de 320 x 50 (AdSize.banner). Notez qu'un écouteur d'événements d'annonce est configuré pour mettre à jour l'interface utilisateur (setState()) lors du chargement d'une annonce.

banner_inline_page.dart

@override
void initState() {
  super.initState();

  // TODO: Load a banner ad
  BannerAd(
    adUnitId: AdHelper.bannerAdUnitId,
    size: AdSize.banner,
    request: AdRequest(),
    listener: BannerAdListener(
      onAdLoaded: (ad) {
        setState(() {
          _ad = ad as BannerAd;
        });
      },
      onAdFailedToLoad: (ad, error) {
        // Releases an ad resource when it fails to load
        ad.dispose();
        print('Ad load failed (code=${error.code} message=${error.message})');
      },
    ),
  ).load();
}

Modifiez la méthode build() pour diffuser une bannière lorsqu'elle est disponible.
Mettez à jour itemCount, pour comptabiliser une entrée de bannière et mettez à jour itemBuilder, pour diffuser une bannière dans l'index des annonces (_kAdIndex) lors du chargement de l'annonce.
Mettez à jour le code pour utiliser la méthode _getDestinationItemIndex() afin de récupérer un index pour l'élément de contenu.

banner_inline_page.dart

@override
Widget build(BuildContext context) {
  return Scaffold(
    ...
    body: ListView.builder(
      // TODO: Adjust itemCount based on the ad load state
      itemCount: widget.entries.length + (_ad != null ? 1 : 0),
      itemBuilder: (context, index) {
        // TODO: Render a banner ad
        if (_ad != null && index == _kAdIndex) {
          return Container(
            width: _ad!.size.width.toDouble(),
            height: 72.0,
            alignment: Alignment.center,
            child: AdWidget(ad: _ad!),
          );
        } else {
          // TODO: Get adjusted item index from _getDestinationItemIndex()
          final item = widget.entries[_getDestinationItemIndex(index)];

          return ListTile(
            ...
          );
        }
      },
    ),
  );
}

Libérez la ressource associée à l'objet BannerAd en appelant la méthode BannerAd.dispose() dans la méthode de rappel dispose().

banner_inline_page.dart

@override
void dispose() {
  // TODO: Dispose a BannerAd object
  _ad?.dispose();

  super.dispose();
}

Et voilà ! Exécutez le projet, puis cliquez sur le bouton Banner inline ad (Bannière intégrée) de la page d'accueil. Une fois l'annonce chargée, une bannière s'affiche au milieu de la liste.

8. Ajouter une annonce native

Dans cette section, vous affichez une annonce native au milieu de la liste, comme illustré dans la capture d'écran suivante.

Les annonces natives sont proposées aux utilisateurs à l'aide de composants d'interface utilisateur natifs pour la plate-forme (par exemple, View sous Android ou UIView sous iOS).

Il n'est cependant pas possible de créer des composants d'interface utilisateur natifs directement à l'aide de widgets Flutter. Vous devez donc mettre en œuvre pour chaque plate-forme un élément NativeAdFactory, qui sert à générer une vue de l'annonce native spécifique à une plate-forme (NativeAdView sous Android et GADNativeAdView sous iOS) à partir d'un objet d'annonce native (NativeAd sous Android et GADNativeAd sous iOS).

Mettre en œuvre NativeAdFactory pour Android (Java)

Ouvrez le fichier android/build.gradle (ou tout fichier dans le dossier android), puis cliquez sur Open for Editing in Android Studio (Ouvrir pour modifier dans Android Studio) pour ouvrir un projet Android.

Si vous êtes invité à sélectionner une fenêtre pour ouvrir un nouveau projet, cliquez sur New Window (Nouvelle fenêtre) afin que le projet Flutter reste ouvert pendant que vous travaillez sur le projet Android.

Créer une mise en page des annonces natives

Une fois le projet Android ouvert, faites un clic droit sur app dans le volet Projet d'Android Studio, puis sélectionnez New > Android Resource file (Nouveau > Fichier de ressources Android) dans le menu contextuel.

Dans la boîte de dialogue New Resource File (Nouveau fichier de ressources), saisissez list_tile_native_ad.xml comme nom de fichier.
Sélectionnez Layout (Mise en page) comme type de ressource et saisissez com.google.android.gms.ads.nativead.NativeAdView comme élément racine.
Cliquez sur OK pour créer un fichier de mise en page.

Mettez en œuvre la mise en page des annonces comme suit. Notez que la mise en page doit correspondre à la conception visuelle de la plate-forme pour laquelle elle est destinée.

list_tile_native_ad.xml

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.gms.ads.nativead.NativeAdView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/tv_list_tile_native_ad_attribution_small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#F19938"
            android:text="Ad"
            android:textColor="#FFFFFF"
            android:textSize="12sp" />

        <ImageView
            android:id="@+id/iv_list_tile_native_ad_icon"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:scaleType="fitXY"
            tools:background="#EDEDED" />

        <TextView
            android:id="@+id/tv_list_tile_native_ad_attribution_large"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:background="#F19938"
            android:gravity="center"
            android:text="Ad"
            android:textColor="#FFFFFF"
            android:visibility="invisible" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="80dp"
            android:layout_marginLeft="80dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_list_tile_native_ad_headline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:maxLines="1"
                android:textColor="#000000"
                android:textSize="16sp"
                tools:text="Headline" />

            <TextView
                android:id="@+id/tv_list_tile_native_ad_body"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:maxLines="1"
                android:textColor="#828282"
                android:textSize="14sp"
                tools:text="body" />

        </LinearLayout>

    </FrameLayout>

</com.google.android.gms.ads.nativead.NativeAdView>

Créer la classe ListTileNativeAdFactory

Dans le volet Projet, faites un clic droit sur le package com.codelab.flutter.admobinlineads, puis sélectionnez New > Java Class (Nouveau > Classe Java).

Saisissez ListTileNativeAdFactory comme nom, puis sélectionnez Class (Classe) dans la liste.

Lorsque la boîte de dialogue New Class (Nouvelle classe) s'affiche, laissez ce champ vide et cliquez sur OK.

La classe ListTileNativeAdFactory est créée dans le package com.codelab.flutter.admobinlineads.

Mettez en œuvre la classe ListTileNativeAdFactory comme suit. Notez que la classe implémente la méthode createNativeAd() dans l'interface GoogleMobileAdsPlugin.NativeAdFactory.

La classe Factory est chargée de créer un objet "view" afin d'afficher une annonce native. Comme vous pouvez le voir dans le code, la classe Factory crée un UnifiedNativeAdView et le remplit avec un objet NativeAd.

ListTileNativeAdFactory.java

// TODO: Implement ListTileNativeAdFactory class

package com.codelab.flutter.admobinlineads;

import com.google.android.gms.ads.nativead.NativeAd;
import com.google.android.gms.ads.nativead.NativeAdView;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.Map;

import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin;

class ListTileNativeAdFactory implements GoogleMobileAdsPlugin.NativeAdFactory {

    private final Context context;

    ListTileNativeAdFactory(Context context) {
        this.context = context;
    }

    @Override
    public NativeAdView createNativeAd(
            NativeAd nativeAd, Map<String, Object> customOptions) {
        NativeAdView nativeAdView = (NativeAdView) LayoutInflater.from(context)
                .inflate(R.layout.list_tile_native_ad, null);

        TextView attributionViewSmall = nativeAdView
                .findViewById(R.id.tv_list_tile_native_ad_attribution_small);
        TextView attributionViewLarge = nativeAdView
                .findViewById(R.id.tv_list_tile_native_ad_attribution_large);

        ImageView iconView = nativeAdView.findViewById(R.id.iv_list_tile_native_ad_icon);
        NativeAd.Image icon = nativeAd.getIcon();
        if (icon != null) {
            attributionViewSmall.setVisibility(View.VISIBLE);
            attributionViewLarge.setVisibility(View.INVISIBLE);
            iconView.setImageDrawable(icon.getDrawable());
        } else {
            attributionViewSmall.setVisibility(View.INVISIBLE);
            attributionViewLarge.setVisibility(View.VISIBLE);
        }
        nativeAdView.setIconView(iconView);

        TextView headlineView = nativeAdView.findViewById(R.id.tv_list_tile_native_ad_headline);
        headlineView.setText(nativeAd.getHeadline());
        nativeAdView.setHeadlineView(headlineView);

        TextView bodyView = nativeAdView.findViewById(R.id.tv_list_tile_native_ad_body);
        bodyView.setText(nativeAd.getBody());
        bodyView.setVisibility(nativeAd.getBody() != null ? View.VISIBLE : View.INVISIBLE);
        nativeAdView.setBodyView(bodyView);

        nativeAdView.setNativeAd(nativeAd);

        return nativeAdView;
    }
}

Enregistrer la classe ListTileNativeAdFactory

Une instance d'une NativeAdFactory doit être enregistrée dans GoogleMobileAdsPlugin avant de pouvoir être utilisée au niveau de Flutter.

Ouvrez le fichier MainActivity.java et ignorez les méthodes configureFlutterEngine() et cleanUpFlutterEngine().
Enregistrez la classe ListTileNativeAdFactory avec un identifiant de chaîne unique (listTile) dans la méthode configureFlutterEngine().

MainActivity.java

public class MainActivity extends FlutterActivity {

    @Override
    public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
        super.configureFlutterEngine(flutterEngine);

        // TODO: Register the ListTileNativeAdFactory
        GoogleMobileAdsPlugin.registerNativeAdFactory(flutterEngine, "listTile",
                new ListTileNativeAdFactory(getContext()));
    }

    ...
}

Chaque instance NativeAdFactory doit être annulée pendant le processus de nettoyage. Annulez l'enregistrement de la classe ListTileNativeAdFactory dans la méthode cleanUpFlutterEngine().

MainActivity.java

public class MainActivity extends FlutterActivity {

    ...

    @Override
    public void cleanUpFlutterEngine(@NonNull FlutterEngine flutterEngine) {
        super.cleanUpFlutterEngine(flutterEngine);

        // TODO: Unregister the ListTileNativeAdFactory
        GoogleMobileAdsPlugin.unregisterNativeAdFactory(flutterEngine, "listTile");
    }
}

Vous pouvez à présent utiliser la classe ListTileNativeAdFactory pour afficher des annonces natives sous Android.

Mettre en œuvre NativeAdFactory pour Android (Kotlin)

Ouvrez le fichier android/build.gradle (ou tout fichier dans le dossier android), puis cliquez sur Open for Editing in Android Studio (Ouvrir pour modifier dans Android Studio) pour ouvrir un projet Android.

Si vous êtes invité à sélectionner une fenêtre pour ouvrir un nouveau projet, cliquez sur New Window (Nouvelle fenêtre) afin que le projet Flutter reste ouvert pendant que vous travaillez sur le projet Android.

Créer une mise en page des annonces natives

Une fois le projet Android ouvert, faites un clic droit sur app dans le volet Projet d'Android Studio, puis sélectionnez New > Android Resource file (Nouveau > Fichier de ressources Android) dans le menu contextuel.

Dans la boîte de dialogue New Resource File (Nouveau fichier de ressources), saisissez list_tile_native_ad.xml comme nom de fichier.
Sélectionnez Layout (Mise en page) comme type de ressource et saisissez com.google.android.gms.ads.nativead.NativeAdView comme élément racine.
Cliquez sur OK pour créer un fichier de mise en page.

Mettez en œuvre la mise en page des annonces comme suit. Notez que la mise en page doit correspondre à la conception visuelle de la plate-forme pour laquelle elle est destinée.

list_tile_native_ad.xml

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.gms.ads.nativead.NativeAdView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/tv_list_tile_native_ad_attribution_small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#F19938"
            android:text="Ad"
            android:textColor="#FFFFFF"
            android:textSize="12sp" />

        <ImageView
            android:id="@+id/iv_list_tile_native_ad_icon"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:scaleType="fitXY"
            tools:background="#EDEDED" />

        <TextView
            android:id="@+id/tv_list_tile_native_ad_attribution_large"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:background="#F19938"
            android:gravity="center"
            android:text="Ad"
            android:textColor="#FFFFFF"
            android:visibility="invisible" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="80dp"
            android:layout_marginLeft="80dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_list_tile_native_ad_headline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:maxLines="1"
                android:textColor="#000000"
                android:textSize="16sp"
                tools:text="Headline" />

            <TextView
                android:id="@+id/tv_list_tile_native_ad_body"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:maxLines="1"
                android:textColor="#828282"
                android:textSize="14sp"
                tools:text="body" />

        </LinearLayout>

    </FrameLayout>

</com.google.android.gms.ads.nativead.NativeAdView>

Créer la classe ListTileNativeAdFactory

Dans le volet Projet, faites un clic droit sur le package com.codelab.flutter.admobinlineads, puis sélectionnez New > Kotlin File/Class (Nouveau > Fichier/Classe Kotlin).

Saisissez ListTileNativeAdFactory comme nom, puis sélectionnez Class (Classe) dans la liste.

La classe ListTileNativeAdFactory est créée dans le package com.codelab.flutter.admobinlineads.
Mettez en œuvre la classe ListTileNativeAdFactory comme suit. Notez que la classe implémente la méthode createNativeAd() dans l'interface GoogleMobileAdsPlugin.NativeAdFactory.

La classe Factory est chargée de créer un objet "view" afin d'afficher une annonce native. Comme vous pouvez le voir dans le code, la classe Factory crée un NativeAdView et le remplit avec un objet NativeAd.

ListTileNativeAdFactory.kt

// TODO: Implement ListTileNativeAdFactory class

package com.codelab.flutter.admobinlineads

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.widget.ImageView
import android.widget.TextView
import com.google.android.gms.ads.nativead.NativeAd
import com.google.android.gms.ads.nativead.NativeAdView
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin

class ListTileNativeAdFactory(val context: Context) : GoogleMobileAdsPlugin.NativeAdFactory {

    override fun createNativeAd(
            nativeAd: NativeAd,
            customOptions: MutableMap<String, Any>?
    ): NativeAdView {
        val nativeAdView = LayoutInflater.from(context)
                .inflate(R.layout.list_tile_native_ad, null) as NativeAdView

        with(nativeAdView) {
            val attributionViewSmall =
                    findViewById<TextView>(R.id.tv_list_tile_native_ad_attribution_small)
            val attributionViewLarge =
                    findViewById<TextView>(R.id.tv_list_tile_native_ad_attribution_large)

            val iconView = findViewById<ImageView>(R.id.iv_list_tile_native_ad_icon)
            val icon = nativeAd.icon
            if (icon != null) {
                attributionViewSmall.visibility = View.VISIBLE
                attributionViewLarge.visibility = View.INVISIBLE
                iconView.setImageDrawable(icon.drawable)
            } else {
                attributionViewSmall.visibility = View.INVISIBLE
                attributionViewLarge.visibility = View.VISIBLE
            }
            this.iconView = iconView

            val headlineView = findViewById<TextView>(R.id.tv_list_tile_native_ad_headline)
            headlineView.text = nativeAd.headline
            this.headlineView = headlineView

            val bodyView = findViewById<TextView>(R.id.tv_list_tile_native_ad_body)
            with(bodyView) {
                text = nativeAd.body
                visibility = if (nativeAd.body.isNotEmpty()) View.VISIBLE else View.INVISIBLE
            }
            this.bodyView = bodyView

            setNativeAd(nativeAd)
        }

        return nativeAdView
    }
}

Enregistrer la classe ListTileNativeAdFactory

Une instance d'une NativeAdFactory doit être enregistrée dans GoogleMobileAdsPlugin avant de pouvoir être utilisée au niveau de Flutter.

Ouvrez le fichier MainActivity.kt et ignorez les méthodes configureFlutterEngine() et cleanUpFlutterEngine().
Enregistrez la classe ListTileNativeAdFactory avec un identifiant de chaîne unique (listTile) dans la méthode configureFlutterEngine().

MainActivity.kt

class MainActivity: FlutterActivity() {

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)

        // TODO: Register the ListTileNativeAdFactory
        GoogleMobileAdsPlugin.registerNativeAdFactory(
                flutterEngine, "listTile", ListTileNativeAdFactory(context))
    }

    ...
}

Chaque instance NativeAdFactory doit être annulée pendant le processus de nettoyage. Annulez l'enregistrement de la classe ListTileNativeAdFactory dans la méthode cleanUpFlutterEngine().

MainActivity.kt

class MainActivity: FlutterActivity() {
    ...

    override fun cleanUpFlutterEngine(flutterEngine: FlutterEngine) {
        super.cleanUpFlutterEngine(flutterEngine)

        // TODO: Unregister the ListTileNativeAdFactory
        GoogleMobileAdsPlugin.unregisterNativeAdFactory(flutterEngine, "listTile")
    }
}

Vous pouvez à présent utiliser la classe ListTileNativeAdFactory pour afficher des annonces natives sous Android.

Mettre en œuvre NativeAdFactory pour iOS (Objective-C)

Ouvrez le fichier ios/Podfile (ou tout fichier dans le dossier ios), puis cliquez sur Open iOS module in Xcode (Ouvrir le module iOS dans Xcode) pour ouvrir un projet iOS.

Préparer la mise en page des annonces natives

Pour mettre en page des éléments d'annonces natives, vous devez disposer d'une vue personnalisée (*.xib). Dans cet atelier de programmation, la vue préconfigurée permet de minimiser vos efforts.

Une fois le projet iOS ouvert dans Xcode, vérifiez que ListTileNativeAdView.xib existe bien dans le projet Runner.

Créer la classe ListTileNativeAdFactory

Dans le navigateur de projets, faites un clic droit sur le groupe Runner, puis sélectionnez New File (Nouveau fichier) pour créer un fichier d'en-tête pour la nouvelle classe.

Dans la boîte de dialogue du modèle, sélectionnez Header File (Fichier d'entête) et nommez-le ListTileNativeAdFactory.
Une fois le fichier ListTileNativeAdFactory.h créé, définissez la classe ListNativeAdFactory comme suit :

ListTileNativeAdFactory.h

#ifndef ListTileNativeAdFactory_h
#define ListTileNativeAdFactory_h

// TODO: Import FLTGoogleMobileAdsPlugin.h
#import "FLTGoogleMobileAdsPlugin.h"

// TODO: Declare ListTileNativeAdFactory
@interface ListTileNativeAdFactory : NSObject<FLTNativeAdFactory>

@end


#endif /* ListTileNativeAdFactory_h */

Créez un fichier Objective-C en sélectionnant New File (Nouveau fichier) dans le groupe Runner.
Dans la boîte de dialogue suivante, saisissez ListTileNativeAdFactory dans le champ File (Fichier), puis sélectionnez le type de fichier Empty File (Fichier vide).

Après avoir cliqué sur Next (Suivant), vous êtes invité à choisir le dossier dans lequel créer le fichier. Laissez tout inchangé, puis cliquez sur Créer.

Mettez en œuvre la classe ListTileNativeFactory comme suit. Notez que la classe implémente la méthode createNativeAd() dans le protocole FLTNativeAdFactory.

La classe Factory est chargée de créer un objet "view" afin d'afficher une annonce native. Comme vous pouvez le voir dans le code, la classe Factory crée un GADNativeAdView et le remplit avec un objet GADNativeAd.

ListTileNativeAdFactory.m

// TODO: Import ListTileNativeAdFactory.h
#import "ListTileNativeAdFactory.h"

// TODO: Implement ListTileNativeAdFactory
@implementation ListTileNativeAdFactory

- (GADNativeAdView *)createNativeAd:(GADNativeAd *)nativeAd
                             customOptions:(NSDictionary *)customOptions {
  GADNativeAdView *nativeAdView =
    [[NSBundle mainBundle] loadNibNamed:@"ListTileNativeAdView" owner:nil options:nil].firstObject;

  ((UILabel *)nativeAdView.headlineView).text = nativeAd.headline;

  ((UILabel *)nativeAdView.bodyView).text = nativeAd.body;
  nativeAdView.bodyView.hidden = nativeAd.body ? NO : YES;

  ((UIImageView *)nativeAdView.iconView).image = nativeAd.icon.image;
  nativeAdView.iconView.hidden = nativeAd.icon ? NO : YES;

  nativeAdView.callToActionView.userInteractionEnabled = NO;

  nativeAdView.nativeAd = nativeAd;

  return nativeAdView;
}

@end

Enregistrer la classe ListTileNativeAdFactory

Une mise en œuvre d'une FLTNativeAdFactory doit être enregistrée dans FLTGoogleMobileAdsPlugin avant de pouvoir être utilisée au niveau de Flutter.

Ouvrez le fichier AppDelegate.m, puis enregistrez le ListTileNativeAdFactory avec un ID de chaîne unique (listTile) en appelant la méthode [FLTGoogleMobileAdsPlugin registerNativeAdFactory].

AppDelegate.m

#import "AppDelegate.h"
#import "GeneratedPluginRegistrant.h"

// TODO: Import ListTileNativeAdFactory.h
#import "ListTileNativeAdFactory.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GeneratedPluginRegistrant registerWithRegistry:self];

  // TODO: Register ListTileNativeAdFactory
  ListTileNativeAdFactory *listTileFactory = [[ListTileNativeAdFactory alloc] init];
  [FLTGoogleMobileAdsPlugin registerNativeAdFactory:self
                                        factoryId:@"listTile"
                                  nativeAdFactory:listTileFactory];

  // Override point for customization after application launch.
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

@end

Vous pouvez à présent utiliser ListTileNativeAdFactory pour afficher des annonces natives sous iOS.

Mettre en œuvre NativeAdFactory pour iOS (Swift)

Ouvrez le fichier ios/Podfile (ou tout fichier dans le dossier ios), puis cliquez sur Open iOS module in Xcode (Ouvrir le module iOS dans Xcode) pour ouvrir un projet iOS.

Préparer la mise en page des annonces natives

Une fois le projet iOS ouvert dans Xcode, vérifiez que ListTileNativeAdView.xib existe bien dans le projet Runner.

Créer la classe ListTileNativeAdFactory

Dans le navigateur de projets, faites un clic droit sur le groupe Runner, puis sélectionnez New File (Nouveau fichier) pour créer un fichier d'en-tête pour la nouvelle classe.

Dans la boîte de dialogue du modèle, sélectionnez Swift File (Fichier Swift) et nommez-le ListTileNativeAdFactory.
Une fois le fichier ListTileNativeAdFactory.swift créé, mettez en œuvre la classe ListNativeAdFactory.

Notez que la classe implémente la méthode createNativeAd() dans le protocole FLTNativeAdFactory.

ListTileNativeAdFactory.swift

// TODO: Import google_mobile_ads
import google_mobile_ads

// TODO: Implement ListTileNativeAdFactory
class ListTileNativeAdFactory : FLTNativeAdFactory {

    func createNativeAd(_ nativeAd: GADNativeAd,
                        customOptions: [AnyHashable : Any]? = nil) -> GADNativeAdView? {
        let nibView = Bundle.main.loadNibNamed("ListTileNativeAdView", owner: nil, options: nil)!.first
        let nativeAdView = nibView as! GADNativeAdView

        (nativeAdView.headlineView as! UILabel).text = nativeAd.headline

        (nativeAdView.bodyView as! UILabel).text = nativeAd.body
        nativeAdView.bodyView!.isHidden = nativeAd.body == nil

        (nativeAdView.iconView as! UIImageView).image = nativeAd.icon?.image
        nativeAdView.iconView!.isHidden = nativeAd.icon == nil

        nativeAdView.callToActionView?.isUserInteractionEnabled = false

        nativeAdView.nativeAd = nativeAd

        return nativeAdView
    }
}

Enregistrez la classe ListTileNativeAdFactory

Une mise en œuvre d'une FLTNativeAdFactory doit être enregistrée dans FLTGoogleMobileAdsPlugin avant de pouvoir être utilisée au niveau de Flutter.

Ouvrez le fichier AppDelegate.m, puis enregistrez le ListTileNativeAdFactory avec un ID de chaîne unique (listTile) en appelant la méthode FLTGoogleMobileAdsPlugin.registerNativeAdFactory().

AppDelegate.swift

import UIKit
import Flutter

// TODO: Import google_mobile_ads
import google_mobile_ads

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)

    // TODO: Register ListTileNativeAdFactory
    let listTileFactory = ListTileNativeAdFactory()
    FLTGoogleMobileAdsPlugin.registerNativeAdFactory(
        self, factoryId: "listTile", nativeAdFactory: listTileFactory)

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Vous pouvez à présent utiliser ListTileNativeAdFactory pour afficher des annonces natives sous iOS.

Intégrer l'annonce native avec des widgets Flutter

Ouvrez le fichier lib/native_inline_page.dart. Importez ensuite ad_helper.dart et google_mobile_ads.dart en ajoutant les lignes suivantes :

native_inline_page.dart

...

// TODO: Import ad_helper.dart
import 'package:admob_inline_ads_in_flutter/ad_helper.dart';

// TODO: Import google_mobile_ads.dart
import 'package:google_mobile_ads/google_mobile_ads.dart';

class NativeInlinePage extends StatefulWidget {
  ...
}

Dans la classe _NativeInlinePageState, ajoutez les éléments et méthodes suivants pour l'annonce native.

Notez que _kAdIndex indique l'index dans lequel la bannière sera affichée et permet de calculer l'index des éléments de la méthode _getDestinationItemIndex().

native_inline_page.dart

class _NativeInlinePageState extends State<NativeInlinePage> {

  // TODO: Add _kAdIndex
  static final _kAdIndex = 4;

  // TODO: Add a native ad instance
  NativeAd? _ad;

  ...

  // TODO: Add _getDestinationItemIndex()
  int _getDestinationItemIndex(int rawIndex) {
    if (rawIndex >= _kAdIndex && _ad != null) {
      return rawIndex - 1;
    }
    return rawIndex;
  }

  ...
}

Dans la méthode initState(), créez et chargez un NativeAd qui utilise ListTileNativeAdFactory pour générer une vue d'annonce native.

Notez que l'ID d'usine (listTile) correspond à celui utilisé pour enregistrer la configuration d'usine du plug-in.

native_inline_page.dart

@override
void initState() {
  super.initState();

  // TODO: Create a NativeAd instance
  _ad = NativeAd(
    adUnitId: AdHelper.nativeAdUnitId,
    factoryId: 'listTile',
    request: AdRequest(),
    listener: NativeAdListener(
      onAdLoaded: (ad) {
        setState(() {
          _ad = ad as NativeAd;
        });
      },
      onAdFailedToLoad: (ad, error) {
        // Releases an ad resource when it fails to load
        ad.dispose();
        print('Ad load failed (code=${error.code} message=${error.message})');       },
    ),
  );

  _ad.load();
}

Modifiez la méthode build() pour diffuser une bannière lorsqu'elle est disponible.
Mettez à jour itemCount, pour comptabiliser une entrée de bannière et itemBuilder, pour diffuser une bannière dans l'index des annonces (_kAdIndex) lors du chargement de l'annonce.
Mettez à jour le code pour utiliser la méthode _getDestinationItemIndex() afin de récupérer un index pour l'élément de contenu.

native_inline_page.dart

@override
Widget build(BuildContext context) {
  return Scaffold(
    ...
    body: ListView.builder(
      // TODO: Adjust itemCount based on the ad load state
      itemCount: widget.entries.length + (_ad != null ? 1 : 0),
      itemBuilder: (context, index) {
        // TODO: Render a banner ad
        if (_ad != null && index == _kAdIndex) {
          return Container(
            height: 72.0,
            alignment: Alignment.center,
            child: AdWidget(ad: _ad!),
          );
        } else {
          // TODO: Get adjusted item index from _getDestinationItemIndex()
          final item = widget.entries[_getDestinationItemIndex(index)];

          return ListTile(
            ...
          );
        }
      },
    ),
  );
}

Libérez la ressource associée à l'objet NativeAd en appelant la méthode NativeAd.dispose() dans la méthode de rappel dispose().

native_inline_page.dart

@override
void dispose() {
  // TODO: Dispose a NativeAd object
  _ad?.dispose();

  super.dispose();
}

Et voilà ! Exécutez le projet, puis cliquez sur le bouton Native inline ad (Annonce native intégrée) sur la page d'accueil. Une fois l'annonce chargée, une annonce native s'affiche au milieu de la liste.

9. Terminé !

Vous avez terminé cet atelier de programmation. Vous trouverez le code final de cet atelier de programmation dans le dossier complete ou le dossier complete_kotlin_swift.