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 in linea nativo AdMob in un'app Flutter.

Cosa creerai

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

Se riscontri problemi (bug del codice, errori grammaticali, espressioni poco chiare e così via) durante l'esecuzione del codelab, segnalali utilizzando il link Segnala un errore nell'angolo in basso a sinistra del codelab.

Cosa imparerai a fare

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

Che cosa ti serve

• Android Studio 4.1 o versioni successive
• Xcode 12 o versione successiva (per sviluppo iOS)

Come giudichi il tuo livello di esperienza con AdMob?

Principiante Livello intermedio Eccellente

Come valuteresti il tuo livello di esperienza con Flutter?

Principiante Livello intermedio Eccellente

2. Configura l'ambiente di sviluppo di Flutter

Per completare questo lab sono necessari due software: l'SDK Flutter e l'editor.

Puoi eseguire il codelab utilizzando uno 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 (per il debug è richiesto Chrome).
• Come applicazione desktop Windows, Linux o macOS. Devi svilupparle sulla piattaforma in cui prevedi di eseguire il deployment. Quindi, se vuoi sviluppare un'app desktop per Windows, devi sviluppare su Windows per accedere alla catena di build appropriata. Alcuni requisiti specifici del sistema operativo sono descritti in dettaglio all'indirizzo docs.flutter.dev/desktop.

Scarica il codice

Scarica il codice sorgente Visualizza il repository su GitHub

Dopo aver scaricato il file ZIP, estrai 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:

• Comando iniziale:il 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 le unità pubblicitarie e l'app AdMob

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

Nota:se vuoi seguire il codelab anziché creare personalmente una nuova applicazione e unità pubblicitarie, vai alla sezione Utilizzare l'app e le unità pubblicitarie AdMob di prova.

Configurazione per Android

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

Aggiungere un'app per Android

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

4. Non è necessario attivare le metriche utente per completare questo codelab. Tuttavia, ti consigliamo di farlo perché ti consente di comprendere più dettagliatamente il comportamento degli utenti. Fai clic su AGGIUNGI per completare la procedura.

Creare unità pubblicitarie

Per aggiungere unità pubblicitarie:

1. Seleziona l'app Annunci in linea AdMob dal menu App nella console AdMob.
2. 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.

Importante: quando crei e testi le tue app, assicurati di utilizzare annunci di prova anziché annunci di produzione pubblicati. In caso contrario, l'account verrà sospeso. Per saperne di più sul funzionamento degli annunci di prova dell'SDK Mobile Ads, consulta la sezione Annunci di prova.

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

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

Configurazione per iOS

Per effettuare l'impostazione per iOS, devi aggiungere un'app per iOS e creare unità pubblicitarie.

Aggiungere un'app per iOS

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

4. Non è necessario attivare le metriche utente per completare questo codelab. Tuttavia, ti consigliamo di farlo perché ti consente di comprendere più dettagliatamente il comportamento degli utenti. Fai clic su AGGIUNGI per completare la procedura.

Creare unità pubblicitarie

Per aggiungere unità pubblicitarie:

1. Seleziona l'app Annunci in linea AdMob dal menu App nella console AdMob.
2. 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.

Importante: quando crei e testi le tue app, assicurati di utilizzare annunci di prova anziché annunci di produzione pubblicati. In caso contrario, l'account verrà sospeso. Per saperne di più sul funzionamento degli annunci di prova dell'SDK Mobile Ads, consulta la sezione Annunci di prova.

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

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

(Facoltativo) Utilizzare l'app e le unità pubblicitarie AdMob di prova

Se preferisci seguire il codelab invece di creare una nuova applicazione e unità pubblicitarie autonomamente, puoi utilizzare l'ID app AdMob di prova e gli ID unità pubblicitaria elencati nelle tabelle seguenti.

ID app/ID unità pubblicitaria per Android

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

ID app per iOS/ID unità pubblicitaria

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

Per ulteriori informazioni sugli annunci di prova, consulta la documentazione per gli sviluppatori sugli annunci di prova per Android e sugli annunci di prova per iOS.

4. Aggiungi il plug-in Flutter di Google Mobile Ads

Flutter utilizza plug-in per fornire l'accesso a una vasta gamma di servizi specifici della piattaforma. I plug-in ti 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 tramite l'API AdMob.

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

Aggiungere il plug-in Google Mobile Ads come dipendenza

Per accedere alle API AdMob dal progetto degli annunci in linea AdMob, aggiungi google_mobile_ads come dipendenza al file pubspec.yaml che si trova alla directory principale 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 degli annunci in linea AdMob.

Aggiorna AndroidManifest.xml (Android)

1. Apri il file android/app/src/main/AndroidManifest.xml in Android Studio.
2. Aggiungi l'ID app AdMob aggiungendo un tag <meta-data> con il nome com.google.android.gms.ads.APPLICATION_ID. Ad esempio, se il tuo 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>

Aggiorna Info.plist (iOS)

1. Apri il file ios/Runner/Info.plist in Android Studio.
2. Aggiungi una chiave GADApplicationIdentifier con il valore stringa del tuo ID app AdMob. Ad esempio, se il tuo 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. Aggiungi un corso per gli annunci

Crea un nuovo file denominato ad_helper.dart nella directory lib. Poi, implementa la classe AdHelper, che fornisce un ID app AdMob e ID unità pubblicitaria 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 creati 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 usare l'ID app AdMob di prova e gli ID unità pubblicitaria di prova.

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. Inizializzare 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 una volta completata l'operazione.

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

In questa sezione, un annuncio banner viene visualizzato al centro dell'elenco, come illustrato nello screenshot seguente.

1. Apri il file lib/banner_inline_page.dart.
2. 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 {
  ...
}

3. Nel corso _BannerInlinePageState, aggiungi i seguenti membri e metodi per un annuncio banner.

Tieni presente che _kAdIndex indica l'indice in cui verrà visualizzato un annuncio banner e viene utilizzato per calcolare l'indice degli elementi utilizzando il 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;
  }

  ...
}

4. Nel metodo initState(), crea e carica un BannerAd per il banner 320 x 50 (AdSize.banner). Tieni presente che un listener di eventi di annunci è configurato in modo da aggiornare l'interfaccia utente (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();
}

5. Modifica il metodo build() per visualizzare un annuncio banner, se disponibile.
6. Aggiorna itemCount, per conteggiare una voce di annuncio banner e aggiorna itemBuilder, per visualizzare un annuncio banner nell'indice degli annunci (_kAdIndex) quando viene caricato l'annuncio.
7. 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(
            ...
          );
        }
      },
    ),
  );
}

8. 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 nella home page. Dopo che un annuncio è stato caricato, viene visualizzato un annuncio banner al centro dell'elenco.

8. Aggiungi un annuncio nativo

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

Gli annunci nativi vengono presentati agli utenti utilizzando componenti UI nativi della piattaforma (ad esempio, View su Android o UIView su iOS).

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

Implementare NativeAdFAbil per Android (Java).

Nota: se il tuo progetto utilizza Kotlin anziché Java, vai alla sezione Implementare NativeAdFAB per Android (Kotlin) di seguito.

1. 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.

2. Se ti viene chiesto di selezionare una finestra per aprire un nuovo progetto, fai clic su Nuova finestra per fare in modo che il progetto Flutter rimanga aperto mentre lavori al progetto Android.

Creare un layout di annunci nativi

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

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

5. Implementa il layout degli annunci nel seguente modo. 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 ListTile NativeAdOrigin

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

2. Inserisci ListTileNativeAdFactory come nome e seleziona Corso dall'elenco.

3. Quando viene visualizzata la finestra di dialogo Nuovo corso, lascia vuoto tutto e fai clic su Ok.

La classe ListTileNativeAdFactory è stata creata nel pacchetto com.codelab.flutter.admobinlineads.

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

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

Registrare la classe ListTile NativeAdFactory

È necessario registrare un'istanza di NativeAdFactory in GoogleMobileAdsPlugin prima di poter essere utilizzata dal lato Flutter.

1. Apri il file MainActivity.java e sostituisci il metodo configureFlutterEngine() e il metodo cleanUpFlutterEngine().
2. Registra la classe ListTileNativeAdFactory con un ID stringa univoco (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()));
    }

    ...
}

3. Durante il processo di pulizia di ogni istanza NativeAdFactory deve essere annullata la registrazione. 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 è tutto pronto per utilizzare la classe ListTileNativeAdFactory per eseguire il rendering degli annunci nativi su Android.

Implementare NativeAdFAB per Android (Kotlin)

1. 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.

2. Se ti viene chiesto di selezionare una finestra per aprire un nuovo progetto, fai clic su Nuova finestra per fare in modo che il progetto Flutter rimanga aperto mentre lavori al progetto Android.

Creare un layout di annunci nativi

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

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

5. Implementa il layout degli annunci nel seguente modo. 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 ListTile NativeAdOrigin

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

2. Inserisci ListTileNativeAdFactory come nome e seleziona Corso dall'elenco.

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

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

Registrare la classe ListTile NativeAdFactory

È necessario registrare un'istanza di NativeAdFactory in GoogleMobileAdsPlugin prima di poter essere utilizzata dal lato Flutter.

1. Apri il file MainActivity.kt e sostituisci il metodo configureFlutterEngine() e il metodo cleanUpFlutterEngine().
2. Registra la classe ListTileNativeAdFactory con un ID stringa univoco (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))
    }

    ...
}

3. Durante il processo di pulizia di ogni istanza NativeAdFactory deve essere annullata la registrazione. 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 è tutto pronto per utilizzare la classe ListTileNativeAdFactory per eseguire il rendering degli annunci nativi su Android.

Implementare NativeAdFAb per iOS (Objective-C)

Nota: se il progetto utilizza Swift anziché Objective-C, vai alla sezione Implementare NativeAdFAB per iOS (Swift) di seguito.

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 il layout di un annuncio nativo

Devi avere una visualizzazione personalizzata (*.xib) per definire il layout degli asset degli annunci nativi. In questo codelab, la vista preconfigurata viene utilizzata per ridurre al minimo le tue attività.

Nota:per ulteriori dettagli sulla creazione di una visualizzazione personalizzata per gli annunci nativi, consulta la sezione Esempio di codice nella documentazione per gli sviluppatori.

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

Crea la classe ListTile NativeAdOrigin

1. Nella barra di navigazione dei progetti, 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.

2. Nella finestra di dialogo del modello, seleziona il file di intestazione e assegnagli il nome ListTileNativeAdFactory.
3. Dopo aver creato il file ListTileNativeAdFactory.h, definisci la classe ListNativeAdFactory come segue:

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

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

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

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

La classe fabbrica è responsabile della creazione di un oggetto view per il rendering di un annuncio nativo. Come puoi vedere dal codice, la classe di fabbrica crea un GADNativeAdView e lo compila 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 ListTile NativeAdFacotry

L'implementazione di un 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 è tutto pronto per utilizzare ListTileNativeAdFactory per il rendering degli annunci nativi su iOS.

Implementare NativeAdFAb 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 il layout di un annuncio nativo

Devi avere una visualizzazione personalizzata (*.xib) per definire il layout degli asset degli annunci nativi. In questo codelab, la vista preconfigurata viene utilizzata per ridurre al minimo le tue attività.

Nota:per ulteriori dettagli sulla creazione di una visualizzazione personalizzata per gli annunci nativi, consulta la sezione Esempio di codice nella documentazione per gli sviluppatori.

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

Crea la classe ListTile NativeAdOrigin

4. Nella barra di navigazione dei progetti, 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.

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

Tieni presente che la classe implementa il metodo createNativeAd() nel protocollo FLTNativeAdFactory.

La classe fabbrica è responsabile della creazione di un oggetto view per il rendering di un annuncio nativo. Come puoi vedere dal codice, la classe di fabbrica crea un GADNativeAdView e lo compila con un oggetto GADNativeAd.

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 ListTile NativeAdFacotry

L'implementazione di un 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 è tutto pronto per utilizzare ListTileNativeAdFactory per il rendering degli annunci nativi su iOS.

Integrare l'annuncio nativo con i widget Flutter

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

2. 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 annuncio banner e viene utilizzato per calcolare l'indice degli elementi utilizzando il 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;
  }

  ...
}

3. Nel metodo initState(), crea e carica un NativeAd che utilizzi ListTileNativeAdFactory per generare una visualizzazione di annuncio nativo.

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

4. Modifica il metodo build() per visualizzare un annuncio banner, se disponibile.
5. Aggiorna itemCount, per conteggiare una voce di annuncio banner e aggiorna itemBuilder, per visualizzare un annuncio banner nell'indice degli annunci (_kAdIndex) quando viene caricato l'annuncio.
6. 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(
            ...
          );
        }
      },
    ),
  );
}

7. 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 nella home page. Dopo che un annuncio è stato caricato, ne viene visualizzato uno al centro dell'elenco.

9. Operazione completata.

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