Aggiungere un banner AdMob e annunci in linea nativi a un'app Flutter

1. Introduzione

In questo codelab, implementerai un banner AdMob e un annuncio nativo in linea AdMob in un'app Flutter.

Cosa creerai

Questo codelab ti guida nell'implementazione di un banner in linea AdMob e di annunci nativi in linea AdMob in un'app Flutter utilizzando il plug-in Google Mobile Ads per Flutter.

Se riscontri problemi (bug del codice, errori grammaticali, formulazione poco chiara e così via) mentre svolgi questo codelab, segnala il problema utilizzando il link Segnala un errore nell'angolo in basso a sinistra del codelab.

Cosa imparerai a fare

Come configurare il plug-in Flutter Google Mobile Ads
Come implementare un banner in linea e annunci con premio in un'app Flutter

Che cosa ti serve

Android Studio 4.1 o versioni successive
Xcode 12 o versioni successive (per lo sviluppo di iOS)

Come valuteresti il tuo livello di esperienza con AdMob?

Principiante

Intermedio

Avanzato

Come valuteresti il tuo livello di esperienza con Flutter?

Principiante

Intermedio

Avanzato

2. Configura l'ambiente di sviluppo Flutter

Per completare questo lab, hai bisogno di due software: l'SDK Flutter e un editor.

Puoi eseguire il codelab utilizzando uno qualsiasi di questi dispositivi:

Un dispositivo fisico Android o iOS connesso al computer e impostato sulla modalità sviluppatore.
Il simulatore iOS (richiede l'installazione degli strumenti Xcode).
L'emulatore Android (richiede la configurazione in Android Studio).
Un browser (Chrome è necessario per il debug).
Come applicazione desktop Windows, Linux o macOS. Devi sviluppare sulla piattaforma in cui prevedi di eseguire il deployment. Pertanto, se vuoi sviluppare un'app desktop Windows, devi svilupparla su Windows per accedere alla catena di build appropriata. Esistono requisiti specifici del sistema operativo trattati in dettaglio su docs.flutter.dev/desktop.

Scarica il codice

Dopo aver scaricato il file ZIP, estraine i contenuti. Avrai una cartella denominata admob-inline-ads-in-flutter-main.

In alternativa, puoi clonare il repository GitHub dalla riga di comando:

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

Il repository contiene tre cartelle:

starter: codice iniziale che creerai in questo codelab.
complete: codice completato per questo codelab. (Java e Objective-C per il codice nativo)
complete_kotlin_swift: codice completato per questo codelab. (Kotlin e Swift per il codice nativo)

3. Configurare l'app AdMob e le unità pubblicitarie

Poiché Flutter è un SDK multipiattaforma, devi aggiungere un'app e unità pubblicitarie sia per Android che per iOS in AdMob.

Configurazione per Android

Per la configurazione per Android, devi aggiungere un'app per Android e creare unità pubblicitarie.

Aggiungere un'app per Android

Nella console AdMob, fai clic su AGGIUNGI APP dal menu App.
Quando ti viene chiesto Hai pubblicato la tua app su Google Play o sull'App Store?, fai clic su NO.
Inserisci AdMob inline ads nel campo del nome dell'app e seleziona Android come piattaforma.

L'attivazione delle metriche utente non è necessaria per completare questo codelab. Tuttavia, ti consigliamo di farlo perché ti consente di comprendere il comportamento degli utenti in modo più dettagliato. Fai clic su AGGIUNGI per completare la procedura.

Creare unità pubblicitarie

Per aggiungere unità pubblicitarie:

Seleziona l'app Annunci in linea AdMob dal menu App nella console AdMob.
Fai clic sul menu Unità pubblicitarie.

Banner

Fai clic su AGGIUNGI UNITÀ PUBBLICITARIA.
Seleziona Banner come formato.
Inserisci android-inline-banner nel campo Nome unità pubblicitaria.
Fai clic su CREA UNITÀ PUBBLICITARIA per completare la procedura.

Nativo

Fai clic su AGGIUNGI UNITÀ PUBBLICITARIA.
Seleziona Nativo avanzato come formato.
Inserisci android-inline-native nel campo Nome unità pubblicitaria.
Fai clic su CREA UNITÀ PUBBLICITARIA per completare la procedura.

In genere, sono necessarie alcune ore prima che una nuova unità pubblicitaria possa pubblicare annunci.

Se vuoi testare immediatamente il comportamento dell'annuncio, utilizza l'ID app e gli ID unità pubblicitaria di prova elencati nelle tabelle ID app/ID unità pubblicitaria Android e ID app/ID unità pubblicitaria iOS.

Configurazione per iOS

Per la configurazione per iOS, devi aggiungere un'app per iOS e creare unità pubblicitarie.

Aggiungere un'app per iOS

Nella console AdMob, fai clic su AGGIUNGI APP dal menu App.
Quando ti viene chiesto Hai pubblicato la tua app su Google Play o sull'App Store?, fai clic su NO.
Inserisci AdMob inline ads nel campo del nome dell'app e seleziona iOS come piattaforma.

L'attivazione delle metriche utente non è necessaria per completare questo codelab. Tuttavia, ti consigliamo di farlo perché ti consente di comprendere il comportamento degli utenti in modo più dettagliato. Fai clic su AGGIUNGI per completare la procedura.

Creare unità pubblicitarie

Per aggiungere unità pubblicitarie:

Seleziona l'app Annunci in linea AdMob dal menu App nella console AdMob.
Fai clic sul menu Unità pubblicitarie.

Banner

Fai clic su AGGIUNGI UNITÀ PUBBLICITARIA.
Seleziona Banner come formato.
Inserisci ios-inline-banner nel campo Nome unità pubblicitaria.
Fai clic su CREA UNITÀ PUBBLICITARIA per completare la procedura.

Nativo

Fai clic su AGGIUNGI UNITÀ PUBBLICITARIA.
Seleziona Nativo avanzato come formato.
Inserisci ios-inline-native nel campo Nome unità pubblicitaria.
Fai clic su CREA UNITÀ PUBBLICITARIA per completare la procedura.

In genere, sono necessarie alcune ore prima che una nuova unità pubblicitaria possa pubblicare annunci.

Se vuoi testare immediatamente il comportamento dell'annuncio, utilizza l'ID app di test e gli ID unità pubblicitaria elencati nella tabella seguente.

(Facoltativo) Utilizza l'app e le unità pubblicitarie di test di AdMob

Se vuoi seguire il codelab anziché creare autonomamente una nuova applicazione e nuove unità pubblicitarie, puoi utilizzare l'ID app AdMob di test e gli ID unità pubblicitaria elencati nelle tabelle seguenti.

ID app/unità pubblicitaria Android

Elemento	ID app/ID unità pubblicitaria
ID app monetizzata con AdMob	`ca-app-pub-3940256099942544~3347511713`
Banner	`ca-app-pub-3940256099942544/6300978111`
Nativo	`ca-app-pub-3940256099942544/2247696110`

ID app/unità pubblicitaria per iOS

Elemento	ID app/ID unità pubblicitaria
ID app monetizzata con AdMob	`ca-app-pub-3940256099942544~1458002511`
Banner	`ca-app-pub-3940256099942544/2934735716`
Nativo	`ca-app-pub-3940256099942544/3986624511`

Per saperne di più sugli annunci di prova, consulta la documentazione per gli sviluppatori relativa agli annunci di prova per Android e agli annunci di prova per iOS.

4. Aggiungere il plug-in Flutter Google Mobile Ads

Flutter utilizza i plug-in per fornire l'accesso a un'ampia gamma di servizi specifici della piattaforma. I plug-in consentono di accedere a servizi e API su ogni piattaforma.

Il plug-in google_mobile_ads supporta il caricamento e la visualizzazione di annunci banner, interstitial, con premio e nativi utilizzando l'API AdMob.

Poiché Flutter è un SDK multipiattaforma, il plug-in google_mobile_ads è applicabile sia a iOS sia ad Android. Pertanto, se aggiungi il plug-in alla tua app Flutter, viene utilizzato sia dalle versioni Android che iOS dell'app di annunci in linea AdMob.

Aggiungere il plug-in Google Mobile Ads come dipendenza

Per accedere alle API AdMob dal progetto Annunci in linea AdMob, aggiungi google_mobile_ads come dipendenza al file pubspec.yaml che si trova nella radice del progetto.

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

...

Fai clic su Pub get per installare il plug-in nel progetto AdMob inline ads.

Aggiornare AndroidManifest.xml (Android)

Apri il file android/app/src/main/AndroidManifest.xml in Android Studio.
Aggiungi l'ID app AdMob aggiungendo un tag <meta-data> con il nome com.google.android.gms.ads.APPLICATION_ID. Ad esempio, se l'ID app AdMob è ca-app-pub-3940256099942544~3347511713, devi aggiungere le seguenti righe al file 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>

Aggiornare Info.plist (iOS)

Apri il file ios/Runner/Info.plist in Android Studio.
Aggiungi una chiave GADApplicationIdentifier con il valore stringa dell'ID app AdMob. Ad esempio, se l'ID app AdMob è ca-app-pub-3940256099942544~1458002511, devi aggiungere le seguenti righe al file Info.plist.

ios/Runner/Info.plist

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

5. Aggiungere una classe helper per gli annunci

Crea un nuovo file denominato ad_helper.dart nella directory lib. Quindi, implementa la classe AdHelper, che fornisce un ID app AdMob e ID unità pubblicitarie per Android e iOS.

Assicurati di sostituire l'ID app AdMob (ca-app-pub-xxxxxx~yyyyy) e l'ID unità pubblicitaria (ca-app-pub-xxxxxxx/yyyyyyyy) con gli ID che hai creato nel passaggio precedente.

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");
    }
  }
}

Utilizza il seguente snippet di codice se vuoi utilizzare l'ID app AdMob di test e gli ID unità pubblicitaria di 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. Inizializza l'SDK Google Mobile Ads

Prima di caricare gli annunci, devi inizializzare l'SDK Google Mobile Ads. Apri il file lib/home_page.dart e modifica _initGoogleMobileAds() per inizializzare l'SDK prima del caricamento della home page.

Tieni presente che devi modificare il tipo restituito del metodo _initGoogleMobileAds() da Future<dynamic> a Future<InitializationStatus> per ottenere il risultato dell'inizializzazione dell'SDK al termine.

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. Aggiungere un annuncio banner

In questa sezione, visualizzi un annuncio banner al centro dell'elenco, come mostrato nello screenshot seguente.

Apri il file lib/banner_inline_page.dart.
Importa ad_helper.dart e google_mobile_ads.dart aggiungendo le seguenti righe:

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 {
  ...
}

Nella classe _BannerInlinePageState, aggiungi i seguenti membri e metodi per un banner pubblicitario.

Tieni presente che _kAdIndex indica l'indice in cui verrà visualizzato un banner pubblicitario e viene utilizzato per calcolare l'indice dell'elemento dal metodo _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;
  }

  ...
}

Nel metodo initState(), crea e carica un BannerAd per il banner 320x50 (AdSize.banner). Tieni presente che un listener di eventi annuncio è configurato per aggiornare la UI (setState()) quando viene caricato un annuncio.

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();
}

Modifica il metodo build() per visualizzare un annuncio banner quando è disponibile.
Aggiorna itemCount, per conteggiare una voce di annuncio banner e aggiorna itemBuilder, per eseguire il rendering di un annuncio banner all'indice dell'annuncio (_kAdIndex) quando l'annuncio viene caricato.
Aggiorna il codice in modo che utilizzi il metodo _getDestinationItemIndex() per recuperare un indice per l'elemento di contenuti.

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(
            ...
          );
        }
      },
    ),
  );
}

Rilascia la risorsa associata all'oggetto BannerAd chiamando il metodo BannerAd.dispose() nel metodo di callback dispose().

banner_inline_page.dart

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

  super.dispose();
}

È tutto. Esegui il progetto e fai clic sul pulsante Annuncio banner in linea dalla home page. Dopo il caricamento di un annuncio, vedrai un annuncio banner al centro dell'elenco.

8. Aggiungere un annuncio nativo

In questa sezione, visualizzi un annuncio nativo al centro dell'elenco, come mostrato nello screenshot seguente.

Gli annunci nativi vengono mostrati agli utenti utilizzando componenti dell'interfaccia utente nativi della piattaforma (ad esempio, View su Android o UIView su iOS).

Tuttavia, non è possibile creare componenti UI nativi direttamente utilizzando i widget Flutter. Pertanto, devi implementare un NativeAdFactory per ogni piattaforma, che viene utilizzato per creare una visualizzazione di annunci nativi specifica della piattaforma (NativeAdView su Android e GADNativeAdView su iOS) da un oggetto annuncio nativo (NativeAd su Android e GADNativeAd su iOS).

Implementare NativeAdFactory per Android (Java)

Apri il file android/build.gradle (o qualsiasi file nella cartella android) e fai clic su Apri per la modifica in Android Studio per aprire un progetto Android.

Se ti viene chiesto di selezionare una finestra per aprire un nuovo progetto, fai clic su Nuova finestra per mantenere aperto il progetto Flutter mentre lavori al progetto Android.

Creare un layout di annuncio nativo

Con il progetto Android aperto, fai clic con il tasto destro del mouse su app nel riquadro del progetto in Android Studio e seleziona Nuovo > File di risorse Android dal menu contestuale.

Nella finestra di dialogo Nuovo file di risorse, inserisci list_tile_native_ad.xml come nome file.
Seleziona Layout come tipo di risorsa e inserisci com.google.android.gms.ads.nativead.NativeAdView come elemento principale.
Fai clic su Ok per creare un nuovo file di layout.

Implementa il layout dell'annuncio come segue. Tieni presente che il layout deve corrispondere al design visivo dell'esperienza utente per la piattaforma a cui è destinato.

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>

Crea la classe ListTileNativeAdFactory

Nel riquadro Progetto, fai clic con il tasto destro del mouse sul pacchetto com.codelab.flutter.admobinlineads e seleziona Nuovo > Classe Java.

Inserisci ListTileNativeAdFactory come nome e seleziona Classe dall'elenco.

Dopo la visualizzazione della finestra di dialogo Nuovo corso, lascia tutto vuoto e fai clic su Ok.

Vedrai che la classe ListTileNativeAdFactory viene creata nel pacchetto com.codelab.flutter.admobinlineads.

Implementa la classe ListTileNativeAdFactory come segue. Tieni presente che la classe implementa il metodo createNativeAd() nell'interfaccia GoogleMobileAdsPlugin.NativeAdFactory.

La classe factory è responsabile della creazione di un oggetto visualizzazione per il rendering di un annuncio nativo. Come puoi vedere dal codice, la classe factory crea un UnifiedNativeAdView e lo popola con un oggetto 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;
    }
}

Registra la classe ListTileNativeAdFactory

Un'istanza di NativeAdFactory deve essere registrata in GoogleMobileAdsPlugin prima di poter essere utilizzata dal lato Flutter.

Apri il file MainActivity.java ed esegui l'override del metodo configureFlutterEngine() e del metodo cleanUpFlutterEngine().
Registra la classe ListTileNativeAdFactory con una stringa ID univoca (listTile) nel metodo 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()));
    }

    ...
}

Ogni istanza NativeAdFactory deve essere annullata durante la procedura di pulizia. Annulla la registrazione della classe ListTileNativeAdFactory nel metodo 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");
    }
}

Ora puoi utilizzare la classe ListTileNativeAdFactory per visualizzare gli annunci nativi su Android.

Implementa NativeAdFactory per Android (Kotlin)

Apri il file android/build.gradle (o qualsiasi file nella cartella android) e fai clic su Apri per la modifica in Android Studio per aprire un progetto Android.

Se ti viene chiesto di selezionare una finestra per aprire un nuovo progetto, fai clic su Nuova finestra per mantenere aperto il progetto Flutter mentre lavori al progetto Android.

Creare un layout di annuncio nativo

Con il progetto Android aperto, fai clic con il tasto destro del mouse su app nel riquadro del progetto in Android Studio e seleziona Nuovo > File di risorse Android dal menu contestuale.

Nella finestra di dialogo Nuovo file di risorse, inserisci list_tile_native_ad.xml come nome file.
Seleziona Layout come tipo di risorsa e inserisci com.google.android.gms.ads.nativead.NativeAdView come elemento principale.
Fai clic su Ok per creare un nuovo file di layout.

Implementa il layout dell'annuncio come segue. Tieni presente che il layout deve corrispondere al design visivo dell'esperienza utente per la piattaforma a cui è destinato.

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>

Crea la classe ListTileNativeAdFactory

Nel riquadro Progetto, fai clic con il tasto destro del mouse sul pacchetto com.codelab.flutter.admobinlineads e seleziona Nuovo > File/classe Kotlin.

Inserisci ListTileNativeAdFactory come nome e seleziona Classe dall'elenco.

Vedrai che la classe ListTileNativeAdFactory viene creata nel pacchetto com.codelab.flutter.admobinlineads.
Implementa la classe ListTileNativeAdFactory come segue. Tieni presente che la classe implementa il metodo createNativeAd() nell'interfaccia GoogleMobileAdsPlugin.NativeAdFactory.

La classe factory è responsabile della creazione di un oggetto visualizzazione per il rendering di un annuncio nativo. Come puoi vedere dal codice, la classe factory crea un NativeAdView e lo popola con un oggetto 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
    }
}

Registra la classe ListTileNativeAdFactory

Un'istanza di NativeAdFactory deve essere registrata in GoogleMobileAdsPlugin prima di poter essere utilizzata dal lato Flutter.

Apri il file MainActivity.kt ed esegui l'override del metodo configureFlutterEngine() e del metodo cleanUpFlutterEngine().
Registra la classe ListTileNativeAdFactory con una stringa ID univoca (listTile) nel metodo configureFlutterEngine().

MainActivity.kt

class MainActivity: FlutterActivity() {

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

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

    ...
}

Ogni istanza NativeAdFactory deve essere annullata durante la procedura di pulizia. Annulla la registrazione della classe ListTileNativeAdFactory nel metodo cleanUpFlutterEngine().

MainActivity.kt

class MainActivity: FlutterActivity() {
    ...

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

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

Ora puoi utilizzare la classe ListTileNativeAdFactory per visualizzare gli annunci nativi su Android.

Implementare NativeAdFactory per iOS (Objective-C)

Apri il file ios/Podfile (o qualsiasi file nella cartella ios) e fai clic su Apri modulo iOS in Xcode per aprire un progetto iOS.

Preparare un layout dell'annuncio nativo

Per disporre gli asset degli annunci nativi, devi disporre di una visualizzazione personalizzata (*.xib). In questo codelab, la visualizzazione preconfigurata viene utilizzata per ridurre al minimo il tuo impegno.

Con il progetto iOS aperto in Xcode, verifica che ListTileNativeAdView.xib esista nel progetto Runner.

Crea la classe ListTileNativeAdFactory

Nel navigatore del progetto, fai clic con il tasto destro del mouse sul gruppo Runner e seleziona Nuovo file per creare un file di intestazione per la nuova classe.

Nella finestra di dialogo del modello, seleziona File di intestazione e assegnagli il nome ListTileNativeAdFactory.
Dopo aver creato il file ListTileNativeAdFactory.h, definisci la classe ListNativeAdFactory nel seguente modo:

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 */

Crea un file Objective-C selezionando Nuovo file dal gruppo Runner.
Nella finestra di dialogo successiva, inserisci ListTileNativeAdFactory nel campo File e seleziona File vuoto come tipo di file.

Dopo aver fatto clic su Avanti, ti viene chiesto di selezionare una cartella in cui creare il nuovo file. Lascia tutto invariato e fai clic su Crea.

Implementa la classe ListTileNativeFactory come segue. Tieni presente che la classe implementa il metodo createNativeAd() nel protocollo FLTNativeAdFactory.

La classe factory è responsabile della creazione di un oggetto visualizzazione per il rendering di un annuncio nativo. Come puoi vedere dal codice, la classe factory crea un GADNativeAdView e lo popola con un oggetto 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

Registra la classe ListTileNativeAdFactory

Un'implementazione di FLTNativeAdFactory deve essere registrata in FLTGoogleMobileAdsPlugin prima di poter essere utilizzata dal lato Flutter.

Apri il file AppDelegate.m e registra ListTileNativeAdFactory con un ID stringa univoco (listTile) chiamando il metodo [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

Ora puoi utilizzare ListTileNativeAdFactory per eseguire il rendering degli annunci nativi su iOS.

Implementare NativeAdFactory per iOS (Swift)

Apri il file ios/Podfile (o qualsiasi file nella cartella ios) e fai clic su Apri modulo iOS in Xcode per aprire un progetto iOS.

Preparare un layout dell'annuncio nativo

Con il progetto iOS aperto in Xcode, verifica che ListTileNativeAdView.xib esista nel progetto Runner.

Crea la classe ListTileNativeAdFactory

Nel navigatore del progetto, fai clic con il tasto destro del mouse sul gruppo Runner e seleziona Nuovo file per creare un file di intestazione per la nuova classe.

Nella finestra di dialogo del modello, seleziona Swift File e assegnagli il nome ListTileNativeAdFactory.
Dopo aver creato il file ListTileNativeAdFactory.swift, implementa la classe ListNativeAdFactory.

Tieni presente che la classe implementa il metodo createNativeAd() nel protocollo 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
    }
}

Registra la classe ListTileNativeAdFactory

Un'implementazione di FLTNativeAdFactory deve essere registrata in FLTGoogleMobileAdsPlugin prima di poter essere utilizzata dal lato Flutter.

Apri il file AppDelegate.m e registra ListTileNativeAdFactory con un ID stringa univoco (listTile) chiamando il metodo 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)
  }
}

Ora puoi utilizzare ListTileNativeAdFactory per eseguire il rendering degli annunci nativi su iOS.

Integrare l'annuncio nativo con i widget Flutter

Apri il file lib/native_inline_page.dart. Quindi, importa ad_helper.dart e google_mobile_ads.dart aggiungendo le seguenti righe:

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 {
  ...
}

Nella classe _NativeInlinePageState, aggiungi i seguenti membri e metodi per un annuncio nativo.

Tieni presente che _kAdIndex indica l'indice in cui verrà visualizzato un banner pubblicitario e viene utilizzato per calcolare l'indice dell'elemento dal metodo _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;
  }

  ...
}

Nel metodo initState(), crea e carica un NativeAd che utilizza ListTileNativeAdFactory per generare una visualizzazione dell'annuncio nativo.

Tieni presente che viene utilizzato lo stesso ID fabbrica (listTile) utilizzato per registrare la fabbrica nel 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();
}

Modifica il metodo build() per visualizzare un annuncio banner quando è disponibile.
Aggiorna itemCount, per conteggiare una voce di annuncio banner e aggiorna itemBuilder, per eseguire il rendering di un annuncio banner all'indice dell'annuncio (_kAdIndex) quando l'annuncio viene caricato.
Aggiorna il codice in modo che utilizzi il metodo _getDestinationItemIndex() per recuperare un indice per l'elemento di contenuti.

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(
            ...
          );
        }
      },
    ),
  );
}

Rilascia la risorsa associata all'oggetto NativeAd chiamando il metodo NativeAd.dispose() nel metodo di callback dispose().

native_inline_page.dart

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

  super.dispose();
}

È tutto. Esegui il progetto e fai clic sul pulsante Annuncio in linea nativo dalla home page. Dopo il caricamento di un annuncio, vedrai un annuncio nativo al centro dell'elenco.

9. Operazione completata.

Hai completato il codelab. Puoi trovare il codice completato per questo codelab nella cartella complete o complete_kotlin_swift.

Aggiungere un banner AdMob e annunci in linea nativi a un'app Flutter Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

1. Introduzione

Cosa creerai

Cosa imparerai a fare

Che cosa ti serve

Come valuteresti il tuo livello di esperienza con AdMob?

Come valuteresti il tuo livello di esperienza con Flutter?

2. Configura l'ambiente di sviluppo Flutter

Scarica il codice

3. Configurare l'app AdMob e le unità pubblicitarie

Configurazione per Android

Aggiungere un'app per Android

Creare unità pubblicitarie

Configurazione per iOS

Aggiungere un'app per iOS

Creare unità pubblicitarie

(Facoltativo) Utilizza l'app e le unità pubblicitarie di test di AdMob

ID app/unità pubblicitaria Android

ID app/unità pubblicitaria per iOS

4. Aggiungere il plug-in Flutter Google Mobile Ads

Aggiungere il plug-in Google Mobile Ads come dipendenza

pubspec.yaml

Aggiornare AndroidManifest.xml (Android)

AndroidManifest.xml

Aggiornare Info.plist (iOS)

ios/Runner/Info.plist

5. Aggiungere una classe helper per gli annunci

ad_helper.dart

6. Inizializza l'SDK Google Mobile Ads

home_page.dart

7. Aggiungere un annuncio banner

banner_inline_page.dart

8. Aggiungere un annuncio nativo

Implementare NativeAdFactory per Android (Java)

Creare un layout di annuncio nativo

list_tile_native_ad.xml

Crea la classe ListTileNativeAdFactory

ListTileNativeAdFactory.java

Registra la classe ListTileNativeAdFactory

MainActivity.java

MainActivity.java

Implementa NativeAdFactory per Android (Kotlin)

Creare un layout di annuncio nativo

list_tile_native_ad.xml

Crea la classe ListTileNativeAdFactory

ListTileNativeAdFactory.kt

Registra la classe ListTileNativeAdFactory

MainActivity.kt

MainActivity.kt

Implementare NativeAdFactory per iOS (Objective-C)

Preparare un layout dell'annuncio nativo

Crea la classe ListTileNativeAdFactory

ListTileNativeAdFactory.h

ListTileNativeAdFactory.m

Registra la classe ListTileNativeAdFactory

AppDelegate.m

Implementare NativeAdFactory per iOS (Swift)

Preparare un layout dell'annuncio nativo

Crea la classe ListTileNativeAdFactory

ListTileNativeAdFactory.swift

Registra la classe ListTileNativeAdFactory

AppDelegate.swift

Integrare l'annuncio nativo con i widget Flutter

9. Operazione completata.

Aggiungere un banner AdMob e annunci in linea nativi a un'app Flutter