AdMob-Banner und native Inline-Anzeigen zu einer Flutter-App hinzufügen

1. Einführung

In diesem Codelab implementieren Sie ein AdMob-Banner und eine native Inline-Anzeige von AdMob in einer Flutter-App.

Aufgaben

In diesem Codelab erfahren Sie, wie Sie ein AdMob-Inlinebanner und native AdMob-Inlineanzeigen in einer Flutter-App mit dem Google Mobile Ads-Plugin für Flutter implementieren.

Wenn Sie bei der Bearbeitung dieses Codelabs auf Probleme stoßen (z. B. Codefehler, Grammatikfehler oder unklare Formulierungen), melden Sie das Problem über den Link Fehler melden unten links im Codelab.

Lerninhalte

Das Google Mobile Ads Flutter-Plug-in konfigurieren
Inline-Banner und Anzeigen mit Prämie in einer Flutter-App implementieren

Voraussetzungen

Android Studio 4.1 oder höher
Xcode 12 oder höher (für die iOS-Entwicklung)

Wie würden Sie Ihre Erfahrung mit AdMob bewerten?

Anfänger

Mittelstufe

Fortgeschrittene

Wie würden Sie Ihre Erfahrung mit Flutter bewerten?

Anfänger

Mittelstufe

Fortgeschritten

2. Flutter-Entwicklungsumgebung einrichten

Für dieses Lab benötigen Sie zwei Softwarekomponenten: das Flutter SDK und einen Editor.

Sie können das Codelab auf einem der folgenden Geräte ausführen:

Ein physisches Android- oder iOS-Gerät, das mit Ihrem Computer verbunden ist und auf den Entwicklermodus eingestellt ist.
Der iOS-Simulator (erfordert die Installation von Xcode-Tools).
Android Emulator (Einrichtung in Android Studio erforderlich)
Ein Browser (für das Debugging ist Chrome erforderlich).
Als Windows-, Linux- oder macOS-Desktopanwendung. Sie müssen auf der Plattform entwickeln, auf der Sie die Bereitstellung planen. Wenn Sie also eine Windows-Desktop-App entwickeln möchten, müssen Sie unter Windows entwickeln, um auf die entsprechende Build-Kette zuzugreifen. Es gibt betriebssystemspezifische Anforderungen, die auf docs.flutter.dev/desktop ausführlich beschrieben werden.

Code herunterladen

Nachdem Sie die ZIP-Datei heruntergeladen haben, extrahieren Sie ihren Inhalt. Sie haben einen Ordner mit dem Namen admob-inline-ads-in-flutter-main.

Alternativ können Sie das GitHub-Repository über die Befehlszeile klonen:

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

Das Repository enthält drei Ordner:

starter:Der Startcode, auf dem Sie in diesem Codelab aufbauen.
complete:Der vollständige Code für dieses Codelab. (Java und Objective-C für nativen Code)
complete_kotlin_swift::Der vollständige Code für dieses Codelab. (Kotlin und Swift für nativen Code)

3. AdMob-App und ‑Anzeigenblöcke einrichten

Da Flutter ein plattformübergreifendes SDK ist, müssen Sie in AdMob eine App und Anzeigenblöcke sowohl für Android als auch für iOS hinzufügen.

Für Android einrichten

Für die Einrichtung für Android müssen Sie eine Android-App hinzufügen und Anzeigenblöcke erstellen.

Android-App hinzufügen

Klicken Sie in der AdMob-Konsole im Menü Apps auf APP HINZUFÜGEN.
Wenn Sie gefragt werden, ob Sie Ihre App bei Google Play oder im App Store veröffentlicht haben, klicken Sie auf NEIN.
Geben Sie AdMob inline ads in das Feld für den App-Namen ein und wählen Sie Android als Plattform aus.

Die Aktivierung von Nutzermesswerten ist für dieses Codelab nicht erforderlich. Wir empfehlen Ihnen jedoch, dies zu tun, da Sie so das Nutzerverhalten besser nachvollziehen können. Klicken Sie auf HINZUFÜGEN, um den Vorgang abzuschließen.

Anzeigenblöcke erstellen

So fügen Sie Anzeigenblöcke hinzu:

Wählen Sie in der AdMob-Konsole im Menü Apps die App AdMob-Inline-Anzeigen aus.
Klicken Sie auf das Menü Anzeigenblöcke.

Banner

Klicken Sie auf ANZEIGENBLOCK HINZUFÜGEN.
Wählen Sie Banner als Format aus.
Geben Sie in das Feld Name des Anzeigenblocks android-inline-banner ein.
Klicken Sie auf AD UNIT ERSTELLEN, um den Vorgang abzuschließen.

Native Einbindung

Klicken Sie auf ANZEIGENBLOCK HINZUFÜGEN.
Wählen Sie Native Advanced als Format aus.
Geben Sie in das Feld Name des Anzeigenblocks android-inline-native ein.
Klicken Sie auf AD UNIT ERSTELLEN, um den Vorgang abzuschließen.

Normalerweise dauert es einige Stunden, bis in einem neuen Anzeigenblock Anzeigen ausgeliefert werden können.

Wenn Sie das Verhalten der Anzeige sofort testen möchten, verwenden Sie die Test-App-ID und die Anzeigenblock-IDs, die in den Tabellen „Android-App-ID/Anzeigenblock-ID“ und „iOS-App-ID/Anzeigenblock-ID“ aufgeführt sind.

Für iOS einrichten

Für die Einrichtung für iOS müssen Sie eine iOS-App hinzufügen und Anzeigenblöcke erstellen.

iOS-App hinzufügen

Klicken Sie in der AdMob-Konsole im Menü Apps auf APP HINZUFÜGEN.
Wenn Sie gefragt werden, ob Sie Ihre App bei Google Play oder im App Store veröffentlicht haben, klicken Sie auf NEIN.
Geben Sie AdMob inline ads in das Feld für den App-Namen ein und wählen Sie iOS als Plattform aus.

Die Aktivierung von Nutzermesswerten ist für dieses Codelab nicht erforderlich. Wir empfehlen Ihnen jedoch, dies zu tun, da Sie so das Nutzerverhalten besser nachvollziehen können. Klicken Sie auf HINZUFÜGEN, um den Vorgang abzuschließen.

Anzeigenblöcke erstellen

So fügen Sie Anzeigenblöcke hinzu:

Wählen Sie in der AdMob-Konsole im Menü Apps die App AdMob-Inline-Anzeigen aus.
Klicken Sie auf das Menü Anzeigenblöcke.

Banner

Klicken Sie auf ANZEIGENBLOCK HINZUFÜGEN.
Wählen Sie Banner als Format aus.
Geben Sie in das Feld Name des Anzeigenblocks ios-inline-banner ein.
Klicken Sie auf AD UNIT ERSTELLEN, um den Vorgang abzuschließen.

Native Einbindung

Klicken Sie auf ANZEIGENBLOCK HINZUFÜGEN.
Wählen Sie Native Advanced als Format aus.
Geben Sie in das Feld Name des Anzeigenblocks ios-inline-native ein.
Klicken Sie auf AD UNIT ERSTELLEN, um den Vorgang abzuschließen.

Normalerweise dauert es einige Stunden, bis in einem neuen Anzeigenblock Anzeigen ausgeliefert werden können.

Wenn Sie das Verhalten der Anzeige sofort testen möchten, verwenden Sie die in der folgenden Tabelle aufgeführten Test-App-IDs und Anzeigenblock-IDs.

Optional: AdMob-Test-App und ‑Anzeigenblöcke verwenden

Wenn Sie das Codelab durcharbeiten möchten, ohne selbst eine neue Anwendung und Anzeigenblöcke zu erstellen, können Sie die in den folgenden Tabellen aufgeführten Test-IDs für AdMob-Apps und Anzeigenblöcke verwenden.

Android-App-ID/Anzeigenblock-ID

Posten	App-ID/Anzeigenblock-ID
AdMob-App-ID	`ca-app-pub-3940256099942544~3347511713`
Banner	`ca-app-pub-3940256099942544/6300978111`
Nativ	`ca-app-pub-3940256099942544/2247696110`

iOS-App-ID/Anzeigenblock-ID

Posten	App-ID/Anzeigenblock-ID
AdMob-App-ID	`ca-app-pub-3940256099942544~1458002511`
Banner	`ca-app-pub-3940256099942544/2934735716`
Nativ	`ca-app-pub-3940256099942544/3986624511`

Weitere Informationen zu Testanzeigen finden Sie in der Entwicklerdokumentation zu Android-Testanzeigen und iOS-Testanzeigen.

4. Google Mobile Ads Flutter-Plug-in hinzufügen

Flutter verwendet Plug-ins, um Zugriff auf eine Vielzahl von plattformspezifischen Diensten zu ermöglichen. Mit Plugins können Sie auf jeder Plattform auf Dienste und APIs zugreifen.

Das google_mobile_ads-Plug-in unterstützt das Laden und Ausliefern von Banner-, Interstitial-, Anzeigen mit Prämie und nativen Anzeigen über die AdMob API.

Da Flutter ein plattformübergreifendes SDK ist, kann das google_mobile_ads-Plug-in sowohl für iOS als auch für Android verwendet werden. Wenn Sie das Plug-in also Ihrer Flutter-App hinzufügen, wird es sowohl von der Android- als auch von der iOS-Version der AdMob-App für Inline-Anzeigen verwendet.

Google Mobile Ads-Plug-in als Abhängigkeit hinzufügen

Wenn Sie über das Projekt AdMob-Inlineanzeigen auf die AdMob APIs zugreifen möchten, fügen Sie google_mobile_ads als Abhängigkeit in die Datei pubspec.yaml ein, die sich im Stammverzeichnis des Projekts befindet.

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

...

Klicken Sie auf Pub get, um das Plug-in im Projekt AdMob inline ads zu installieren.

AndroidManifest.xml aktualisieren (Android)

Öffnen Sie die Datei android/app/src/main/AndroidManifest.xml in Android Studio.
Fügen Sie Ihre AdMob-App-ID hinzu, indem Sie ein <meta-data>-Tag mit dem Namen com.google.android.gms.ads.APPLICATION_ID einfügen. Wenn Ihre AdMob-App-ID beispielsweise ca-app-pub-3940256099942544~3347511713 lautet, müssen Sie der Datei AndroidManifest.xml die folgenden Zeilen hinzufügen.

AndroidManifest.xml

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

</manifest>

Info.plist aktualisieren (iOS)

Öffnen Sie die Datei ios/Runner/Info.plist in Android Studio.
Fügen Sie einen GADApplicationIdentifier-Schlüssel mit dem Stringwert Ihrer AdMob-App-ID hinzu. Wenn Ihre AdMob-App-ID beispielsweise ca-app-pub-3940256099942544~1458002511 lautet, müssen Sie der Datei Info.plist die folgenden Zeilen hinzufügen.

ios/Runner/Info.plist

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

5. Helferklasse für Anzeigen hinzufügen

Erstellen Sie eine neue Datei mit dem Namen ad_helper.dart im Verzeichnis lib. Implementieren Sie dann die Klasse AdHelper, die eine AdMob-App-ID und Anzeigenblock-IDs für Android und iOS bereitstellt.

Achten Sie darauf, dass Sie die AdMob-App-ID (ca-app-pub-xxxxxx~yyyyy) und die Anzeigenblock-ID (ca-app-pub-xxxxxxx/yyyyyyyy) durch die IDs ersetzen, die Sie im vorherigen Schritt erstellt haben.

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

Verwenden Sie den folgenden Code-Snippet, wenn Sie die Test-App-ID und die Test-Anzeigenblock-IDs von AdMob verwenden möchten.

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. Google Mobile Ads SDK initialisieren

Bevor Sie Anzeigen laden, müssen Sie das Google Mobile Ads SDK initialisieren. Öffnen Sie die Datei lib/home_page.dart und ändern Sie _initGoogleMobileAds(), um das SDK zu initialisieren, bevor die Startseite geladen wird.

Sie müssen den Rückgabetyp der Methode _initGoogleMobileAds() von Future<dynamic> in Future<InitializationStatus> ändern, um das Ergebnis der SDK-Initialisierung nach Abschluss zu erhalten.

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. Banneranzeige hinzufügen

In diesem Abschnitt wird eine Banneranzeige in der Mitte der Liste eingeblendet, wie im folgenden Screenshot zu sehen ist.

Öffnen Sie die Datei lib/banner_inline_page.dart.
Importieren Sie ad_helper.dart und google_mobile_ads.dart, indem Sie die folgenden Zeilen hinzufügen:

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

Fügen Sie der Klasse _BannerInlinePageState die folgenden Elemente und Methoden für ein Banner hinzu.

_kAdIndex gibt den Index an, an dem eine Banneranzeige ausgeliefert wird. Er wird verwendet, um den Artikelindex aus der _getDestinationItemIndex()-Methode zu berechnen.

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

  ...
}

Erstellen und laden Sie in der Methode initState() ein BannerAd für das Banner mit der Größe 320 × 50 (AdSize.banner). Beachten Sie, dass ein Anzeigen-Event-Listener konfiguriert ist, um die Benutzeroberfläche (setState()) zu aktualisieren, wenn eine Anzeige geladen wird.

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

Ändern Sie die build()-Methode, um eine Banneranzeige zu präsentieren, wenn sie verfügbar ist.
Aktualisieren Sie itemCount,, um einen Banneranzeigeneintrag zu zählen, und aktualisieren Sie itemBuilder,, um eine Banneranzeige am Anzeigenindex (_kAdIndex) zu rendern, wenn die Anzeige geladen wird.
Aktualisieren Sie den Code, damit mit der Methode _getDestinationItemIndex() ein Index für das Inhaltselement abgerufen wird.

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

Geben Sie die Ressource frei, die dem BannerAd-Objekt zugeordnet ist, indem Sie die Methode BannerAd.dispose() in der Callback-Methode dispose() aufrufen.

banner_inline_page.dart

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

  super.dispose();
}

Geschafft! Führen Sie das Projekt aus und klicken Sie auf der Startseite auf die Schaltfläche Banner inline ad (Inline-Banneranzeige). Nachdem eine Anzeige geladen wurde, sehen Sie in der Mitte der Liste eine Banneranzeige.

8. Native Anzeige hinzufügen

In diesem Abschnitt wird eine native Anzeige in der Mitte der Liste eingeblendet, wie im folgenden Screenshot zu sehen ist.

Native Anzeigen werden Nutzern mit UI-Komponenten präsentiert, die für die Plattform nativ sind, z. B. View unter Android oder UIView unter iOS.

Es ist jedoch nicht möglich, native UI-Komponenten direkt mit Flutter-Widgets zu erstellen. Sie müssen also für jede Plattform ein NativeAdFactory implementieren, mit dem eine plattformspezifische Ansicht für native Anzeigen (NativeAdView unter Android und GADNativeAdView unter iOS) aus einem Objekt für native Anzeigen (NativeAd unter Android und GADNativeAd unter iOS) erstellt wird.

NativeAdFactory für Android (Java) implementieren

Öffnen Sie die Datei android/build.gradle (oder eine beliebige Datei im Ordner android) und klicken Sie auf Open for Editing in Android Studio (In Android Studio zum Bearbeiten öffnen), um ein Android-Projekt zu öffnen.

Wenn Sie aufgefordert werden, ein Fenster zum Öffnen eines neuen Projekts auszuwählen, klicken Sie auf Neues Fenster, damit das Flutter-Projekt geöffnet bleibt, während Sie am Android-Projekt arbeiten.

Layout für native Anzeigen erstellen

Klicken Sie bei geöffnetem Android-Projekt im Projektbereich von Android Studio mit der rechten Maustaste auf app und wählen Sie im Kontextmenü New > Android Resource File aus.

Geben Sie im Dialogfeld Neue Ressourcendatei list_tile_native_ad.xml als Dateinamen ein.
Wählen Sie Layout als Ressourcentyp aus und geben Sie com.google.android.gms.ads.nativead.NativeAdView als Stammelement ein.
Klicken Sie auf OK, um eine neue Layoutdatei zu erstellen.

Implementieren Sie das Anzeigenlayout so: Das Layout sollte dem visuellen Design der User Experience für die Plattform entsprechen, für die es vorgesehen ist.

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>

Klasse „ListTileNativeAdFactory“ erstellen

Klicken Sie im Bereich „Project“ (Projekt) mit der rechten Maustaste auf das Paket com.codelab.flutter.admobinlineads und wählen Sie New > Java Class (Neu > Java-Klasse) aus.

Geben Sie ListTileNativeAdFactory als Namen ein und wählen Sie Kurs aus der Liste aus.

Wenn das Dialogfeld Neue Klasse angezeigt wird, lassen Sie alle Felder leer und klicken Sie auf OK.

Die Klasse ListTileNativeAdFactory wird im Paket com.codelab.flutter.admobinlineads erstellt.

Implementieren Sie die Klasse ListTileNativeAdFactory so: Die Klasse implementiert die Methode createNativeAd() in der Schnittstelle GoogleMobileAdsPlugin.NativeAdFactory.

Die Factory-Klasse ist für das Erstellen eines Ansichtsobjekts zum Rendern einer nativen Anzeige verantwortlich. Wie Sie im Code sehen, wird in der Factory-Klasse ein UnifiedNativeAdView erstellt und mit einem NativeAd-Objekt gefüllt.

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

ListTileNativeAdFactory-Klasse registrieren

Eine Instanz von NativeAdFactory muss bei GoogleMobileAdsPlugin registriert werden, bevor sie von Flutter aus verwendet werden kann.

Öffnen Sie die Datei MainActivity.java und überschreiben Sie die Methoden configureFlutterEngine() und cleanUpFlutterEngine().
Registrieren Sie die Klasse ListTileNativeAdFactory mit einer eindeutigen String-ID (listTile) in der Methode 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()));
    }

    ...
}

Jede NativeAdFactory-Instanz sollte während der Bereinigung abgemeldet werden. Heben Sie die Registrierung der Klasse ListTileNativeAdFactory in der Methode cleanUpFlutterEngine() auf.

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

Jetzt können Sie die ListTileNativeAdFactory-Klasse verwenden, um native Anzeigen auf Android-Geräten zu rendern.

NativeAdFactory für Android (Kotlin) implementieren

Öffnen Sie die Datei android/build.gradle (oder eine beliebige Datei im Ordner android) und klicken Sie auf Open for Editing in Android Studio (In Android Studio zum Bearbeiten öffnen), um ein Android-Projekt zu öffnen.

Wenn Sie aufgefordert werden, ein Fenster zum Öffnen eines neuen Projekts auszuwählen, klicken Sie auf Neues Fenster, damit das Flutter-Projekt geöffnet bleibt, während Sie am Android-Projekt arbeiten.

Layout für native Anzeigen erstellen

Klicken Sie bei geöffnetem Android-Projekt im Projektbereich von Android Studio mit der rechten Maustaste auf app und wählen Sie im Kontextmenü New > Android Resource File aus.

Geben Sie im Dialogfeld Neue Ressourcendatei list_tile_native_ad.xml als Dateinamen ein.
Wählen Sie Layout als Ressourcentyp aus und geben Sie com.google.android.gms.ads.nativead.NativeAdView als Stammelement ein.
Klicken Sie auf OK, um eine neue Layoutdatei zu erstellen.

Implementieren Sie das Anzeigenlayout so: Das Layout sollte dem visuellen Design der User Experience für die Plattform entsprechen, für die es vorgesehen ist.

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>

Klasse „ListTileNativeAdFactory“ erstellen

Klicken Sie im Bereich „Project“ (Projekt) mit der rechten Maustaste auf das Paket com.codelab.flutter.admobinlineads und wählen Sie New > Kotlin File/Class (Neu > Kotlin-Datei/Klasse) aus.

Geben Sie ListTileNativeAdFactory als Namen ein und wählen Sie Kurs aus der Liste aus.

Die Klasse ListTileNativeAdFactory wird im Paket com.codelab.flutter.admobinlineads erstellt.
Implementieren Sie die Klasse ListTileNativeAdFactory so: Die Klasse implementiert die Methode createNativeAd() in der Schnittstelle GoogleMobileAdsPlugin.NativeAdFactory.

Die Factory-Klasse ist für das Erstellen eines Ansichtsobjekts zum Rendern einer nativen Anzeige verantwortlich. Wie Sie im Code sehen, wird in der Factory-Klasse ein NativeAdView erstellt und mit einem NativeAd-Objekt gefüllt.

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

ListTileNativeAdFactory-Klasse registrieren

Eine Instanz von NativeAdFactory muss bei GoogleMobileAdsPlugin registriert werden, bevor sie von Flutter aus verwendet werden kann.

Öffnen Sie die Datei MainActivity.kt und überschreiben Sie die Methoden configureFlutterEngine() und cleanUpFlutterEngine().
Registrieren Sie die Klasse ListTileNativeAdFactory mit einer eindeutigen String-ID (listTile) in der Methode configureFlutterEngine().

MainActivity.kt

class MainActivity: FlutterActivity() {

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

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

    ...
}

Jede NativeAdFactory-Instanz sollte während der Bereinigung abgemeldet werden. Heben Sie die Registrierung der Klasse ListTileNativeAdFactory in der Methode cleanUpFlutterEngine() auf.

MainActivity.kt

class MainActivity: FlutterActivity() {
    ...

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

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

Jetzt können Sie die ListTileNativeAdFactory-Klasse verwenden, um native Anzeigen auf Android-Geräten zu rendern.

NativeAdFactory für iOS (Objective-C) implementieren

Öffnen Sie die Datei ios/Podfile (oder eine beliebige Datei im Ordner ios) und klicken Sie auf Open iOS module in Xcode (iOS-Modul in Xcode öffnen), um ein iOS-Projekt zu öffnen.

Layout für native Anzeige vorbereiten

Sie benötigen eine benutzerdefinierte Ansicht (*.xib), um native Anzeigen-Assets zu layouten. In diesem Codelab wird die vorkonfigurierte Ansicht verwendet, um den Aufwand zu minimieren.

Prüfen Sie, ob ListTileNativeAdView.xib im Projekt Runner vorhanden ist, wenn das iOS-Projekt in Xcode geöffnet ist.

Klasse „ListTileNativeAdFactory“ erstellen

Klicken Sie im Projektnavigator mit der rechten Maustaste auf die Gruppe Runner und wählen Sie New File aus, um eine Headerdatei für die neue Klasse zu erstellen.

Wählen Sie im Vorlagendialogfeld die Header-Datei aus und geben Sie ihr den Namen ListTileNativeAdFactory.
Nachdem die Datei ListTileNativeAdFactory.h erstellt wurde, definieren Sie die Klasse ListNativeAdFactory so:

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

Erstellen Sie eine Objective-C-Datei, indem Sie in der Gruppe Runner die Option New File (Neue Datei) auswählen.
Geben Sie im nächsten Dialogfeld ListTileNativeAdFactory in das Feld Datei ein und wählen Sie Leere Datei als Dateityp aus.

Nachdem Sie auf Weiter geklickt haben, werden Sie aufgefordert, einen Ordner auszuwählen, in dem die neue Datei erstellt werden soll. Lassen Sie alles unverändert und klicken Sie auf Erstellen.

Implementieren Sie die Klasse ListTileNativeFactory so: Die Klasse implementiert die Methode createNativeAd() im Protokoll FLTNativeAdFactory.

Die Factory-Klasse ist für das Erstellen eines Ansichtsobjekts zum Rendern einer nativen Anzeige verantwortlich. Wie Sie im Code sehen, wird in der Factory-Klasse ein GADNativeAdView erstellt und mit einem GADNativeAd-Objekt gefüllt.

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

ListTileNativeAdFactory-Klasse registrieren

Eine Implementierung von FLTNativeAdFactory muss bei FLTGoogleMobileAdsPlugin registriert werden, bevor sie von Flutter aus verwendet werden kann.

Öffnen Sie die Datei AppDelegate.m und registrieren Sie ListTileNativeAdFactory mit einer eindeutigen String-ID (listTile), indem Sie die Methode [FLTGoogleMobileAdsPlugin registerNativeAdFactory] aufrufen.

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

Jetzt können Sie ListTileNativeAdFactory verwenden, um native Anzeigen unter iOS zu rendern.

NativeAdFactory für iOS (Swift) implementieren

Öffnen Sie die Datei ios/Podfile (oder eine beliebige Datei im Ordner ios) und klicken Sie auf Open iOS module in Xcode (iOS-Modul in Xcode öffnen), um ein iOS-Projekt zu öffnen.

Layout für native Anzeige vorbereiten

Sie benötigen eine benutzerdefinierte Ansicht (*.xib), um native Anzeigen-Assets zu layouten. In diesem Codelab wird die vorkonfigurierte Ansicht verwendet, um den Aufwand zu minimieren.

Prüfen Sie, ob ListTileNativeAdView.xib im Projekt Runner vorhanden ist, wenn das iOS-Projekt in Xcode geöffnet ist.

Klasse „ListTileNativeAdFactory“ erstellen

Klicken Sie im Projektnavigator mit der rechten Maustaste auf die Gruppe Runner und wählen Sie New File aus, um eine Headerdatei für die neue Klasse zu erstellen.

Wählen Sie im Vorlagendialogfeld die Swift-Datei aus und geben Sie ihr den Namen ListTileNativeAdFactory.
Implementieren Sie nach dem Erstellen der Datei ListTileNativeAdFactory.swift die Klasse ListNativeAdFactory.

Die Klasse implementiert die Methode createNativeAd() im Protokoll 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
    }
}

ListTileNativeAdFactory-Klasse registrieren

Eine Implementierung von FLTNativeAdFactory muss bei FLTGoogleMobileAdsPlugin registriert werden, bevor sie von Flutter aus verwendet werden kann.

Öffnen Sie die Datei AppDelegate.m und registrieren Sie ListTileNativeAdFactory mit einer eindeutigen String-ID (listTile), indem Sie die Methode FLTGoogleMobileAdsPlugin.registerNativeAdFactory() aufrufen.

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

Jetzt können Sie ListTileNativeAdFactory verwenden, um native Anzeigen unter iOS zu rendern.

Native Anzeige mit Flutter-Widgets einbinden

Öffnen Sie die Datei lib/native_inline_page.dart. Importieren Sie dann ad_helper.dart und google_mobile_ads.dart, indem Sie die folgenden Zeilen hinzufügen:

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

Fügen Sie der Klasse _NativeInlinePageState die folgenden Elemente und Methoden für eine native Anzeige hinzu.

_kAdIndex gibt den Index an, an dem eine Banneranzeige ausgeliefert wird. Er wird verwendet, um den Artikelindex aus der _getDestinationItemIndex()-Methode zu berechnen.

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

  ...
}

Erstellen und laden Sie in der initState()-Methode eine NativeAd, mit der mithilfe von ListTileNativeAdFactory eine Ansicht für native Anzeigen generiert wird.

Es wird dieselbe Werks-ID (listTile) verwendet, mit der das Werk für das Plug-in registriert wurde.

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

Ändern Sie die build()-Methode, um eine Banneranzeige zu präsentieren, wenn sie verfügbar ist.
Aktualisieren Sie itemCount,, um einen Banneranzeigeneintrag zu zählen, und aktualisieren Sie itemBuilder,, um eine Banneranzeige am Anzeigenindex (_kAdIndex) zu rendern, wenn die Anzeige geladen wird.
Aktualisieren Sie den Code, damit mit der Methode _getDestinationItemIndex() ein Index für das Inhaltselement abgerufen wird.

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

Geben Sie die dem NativeAd-Objekt zugeordnete Ressource frei, indem Sie die Methode NativeAd.dispose() in der Callback-Methode dispose() aufrufen.

native_inline_page.dart

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

  super.dispose();
}

Geschafft! Führen Sie das Projekt aus und klicken Sie auf der Startseite auf die Schaltfläche Native Inline-Anzeige. Nachdem eine Anzeige geladen wurde, sehen Sie in der Mitte der Liste eine native Anzeige.

9. Fertig!

Sie haben das Codelab abgeschlossen. Den vollständigen Code für dieses Codelab finden Sie im Ordner complete oder complete_kotlin_swift.

AdMob-Banner und native Inline-Anzeigen zu einer Flutter-App hinzufügen Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

1. Einführung

Aufgaben

Lerninhalte

Voraussetzungen

Wie würden Sie Ihre Erfahrung mit AdMob bewerten?

Wie würden Sie Ihre Erfahrung mit Flutter bewerten?

2. Flutter-Entwicklungsumgebung einrichten

Code herunterladen

3. AdMob-App und ‑Anzeigenblöcke einrichten

Für Android einrichten

Android-App hinzufügen

Anzeigenblöcke erstellen

Für iOS einrichten

iOS-App hinzufügen

Anzeigenblöcke erstellen

Optional: AdMob-Test-App und ‑Anzeigenblöcke verwenden

Android-App-ID/Anzeigenblock-ID

iOS-App-ID/Anzeigenblock-ID

4. Google Mobile Ads Flutter-Plug-in hinzufügen

Google Mobile Ads-Plug-in als Abhängigkeit hinzufügen

pubspec.yaml

AndroidManifest.xml aktualisieren (Android)

AndroidManifest.xml

Info.plist aktualisieren (iOS)

ios/Runner/Info.plist

5. Helferklasse für Anzeigen hinzufügen

ad_helper.dart

6. Google Mobile Ads SDK initialisieren

home_page.dart

7. Banneranzeige hinzufügen

banner_inline_page.dart

8. Native Anzeige hinzufügen

NativeAdFactory für Android (Java) implementieren

Layout für native Anzeigen erstellen

list_tile_native_ad.xml

Klasse „ListTileNativeAdFactory“ erstellen

ListTileNativeAdFactory.java

ListTileNativeAdFactory-Klasse registrieren

MainActivity.java

MainActivity.java

NativeAdFactory für Android (Kotlin) implementieren

Layout für native Anzeigen erstellen

list_tile_native_ad.xml

Klasse „ListTileNativeAdFactory“ erstellen

ListTileNativeAdFactory.kt

ListTileNativeAdFactory-Klasse registrieren

MainActivity.kt

MainActivity.kt

NativeAdFactory für iOS (Objective-C) implementieren

Layout für native Anzeige vorbereiten

Klasse „ListTileNativeAdFactory“ erstellen

ListTileNativeAdFactory.h

ListTileNativeAdFactory.m

ListTileNativeAdFactory-Klasse registrieren

AppDelegate.m

NativeAdFactory für iOS (Swift) implementieren

Layout für native Anzeige vorbereiten

Klasse „ListTileNativeAdFactory“ erstellen

ListTileNativeAdFactory.swift

ListTileNativeAdFactory-Klasse registrieren

AppDelegate.swift

Native Anzeige mit Flutter-Widgets einbinden

9. Fertig!

AdMob-Banner und native Inline-Anzeigen zu einer Flutter-App hinzufügen