Adaptive Inline-Banner

Adaptive Banner sind die nächste Generation responsiver Anzeigen, bei denen die Anzeigengröße für jedes Gerät optimiert wird und dadurch die Leistung maximiert wird. Dank der Verbesserungen bei Bannern mit fester Größe, die nur feste Höhen unterstützt haben, können Entwickler mit adaptiven Bannern die Anzeigenbreite angeben und anhand dieser die optimale Anzeigengröße ermitteln.

Zur Auswahl der besten Anzeigengröße verwenden adaptive Inline-Banner eine maximale anstelle von festen Höhen. Daraus ergeben sich Möglichkeiten für eine bessere Leistung.

Wann sollten adaptive Inline-Banner verwendet werden?

Adaptive Inline-Banner sind größere, höhere Banner als verankerte adaptive Banner. Sie haben eine variable Höhe und können so hoch wie der Bildschirm des Geräts sein.

Sie sind dazu gedacht, in scrollbaren Inhalten platziert zu werden, z. B.:

Voraussetzungen

Hinweis

Beachten Sie bei der Implementierung von adaptiven Bannern in Ihrer App Folgendes:

  • Stellen Sie sicher, dass Sie die neueste Version des Google Mobile Ads SDK und, falls Sie die Vermittlung nutzen, die aktuellen Versionen Ihrer Vermittlungsadapter verwenden.

  • Die adaptiven Inline-Bannergrößen funktionieren am besten, wenn die gesamte verfügbare Breite genutzt wird. In den meisten Fällen entspricht dies der gesamten Breite des Bildschirms des verwendeten Geräts. Achten Sie auch auf die entsprechenden sicheren Bereiche.

  • Möglicherweise müssen Sie Werbebuchungen aktualisieren oder neue Werbebuchungen erstellen, damit Sie adaptive Größen verwenden können. Weitere Informationen

  • Die Methoden zum Abrufen der Anzeigengröße sind

    • AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width)
    • AdSize.getLandscapeInlineAdaptiveBannerAdSize(int width)
    • AdSize.getPortraitInlineAdaptiveBannerAdSize(int width)
    • AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight)

  • Wenn Sie die Inline APIs für adaptive Banner verwenden, gibt das Google Mobile Ads SDK ein AdSize mit der angegebenen Breite und einem Inline-Flag zurück. Die Höhe ist entweder null oder maxHeight, je nachdem, welche API Sie verwenden. Die tatsächliche Höhe der Anzeige ist verfügbar, sobald sie zurückgegeben wird.

  • Adaptive Inline-Banner werden in scrollbaren Inhalten platziert. Das Banner kann je nach API so hoch wie der Gerätebildschirm sein oder durch eine maximale Höhe begrenzt sein.

Implementierung

So implementieren Sie ein einfaches adaptives Inline-Banner:

  1. Hier erhalten Sie eine Inline-Größe für adaptive Banner. Diese Größe wird für die Anforderung des adaptiven Banners verwendet. Um die adaptive Anzeigengröße zu erhalten, müssen Sie
    1. Rufen Sie die Breite des verwendeten Geräts in dichteunabhängigen Pixeln ab oder legen Sie Ihre eigene Breite fest, wenn Sie nicht die volle Breite des Bildschirms verwenden möchten. Mit MediaQuery.of(context) können Sie die Bildschirmbreite ermitteln.
    2. Verwenden Sie die entsprechenden statischen Methoden für die Anzeigengröße, z. B. AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width), um ein adaptives Inline-AdSize-Objekt für die aktuelle Ausrichtung abzurufen.
    3. Wenn Sie die Höhe des Banners begrenzen möchten, können Sie die statische Methode AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight) verwenden.
  2. Erstellen Sie ein AdManagerBannerAd-Objekt mit Ihrer Anzeigenblock-ID, der adaptiven Anzeigengröße und einem Anzeigenanfrageobjekt.
  3. Laden Sie die Anzeige.
  4. Verwenden Sie AdManagerBannerAd.getPlatformAdSize() im onAdLoaded-Callback, um die aktualisierte Plattformanzeigengröße abzurufen und die AdWidget-Containerhöhe zu aktualisieren.

Codebeispiel

Hier sehen Sie ein Beispiel-Widget, mit dem ein adaptives Inline-Banner geladen wird, das an die Breite des Bildschirms angepasst ist und dabei Einsätze berücksichtigt:

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

/// This example demonstrates inline adaptive banner ads.
///
/// Loads and shows an inline adaptive banner ad in a scrolling view,
/// and reloads the ad when the orientation changes.
class InlineAdaptiveExample extends StatefulWidget {
  @override
  _InlineAdaptiveExampleState createState() => _InlineAdaptiveExampleState();
}

class _InlineAdaptiveExampleState extends State<InlineAdaptiveExample> {
  static const _insets = 16.0;
  AdManagerBannerAd? _inlineAdaptiveAd;
  bool _isLoaded = false;
  AdSize? _adSize;
  late Orientation _currentOrientation;

  double get _adWidth => MediaQuery.of(context).size.width - (2 * _insets);

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _currentOrientation = MediaQuery.of(context).orientation;
    _loadAd();
  }

  void _loadAd() async {
    await _inlineAdaptiveAd?.dispose();
    setState(() {
      _inlineAdaptiveAd = null;
      _isLoaded = false;
    });

    // Get an inline adaptive size for the current orientation.
    AdSize size = AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(
        _adWidth.truncate());

    _inlineAdaptiveAd = AdManagerBannerAd(
      // TODO: replace with your own ad unit.
      adUnitId: '<your-ad-unit>',
      size: size,
      request: AdManagerAdRequest(),
      listener: AdManagerBannerAdListener(
        onAdLoaded: (Ad ad) async {
          print('Inline adaptive banner loaded: ${ad.responseInfo}');

          // After the ad is loaded, get the platform ad size and use it to
          // update the height of the container. This is necessary because the
          // height can change after the ad is loaded.
          AdManagerBannerAd bannerAd = (ad as AdManagerBannerAd);
          final AdSize? size = await bannerAd.getPlatformAdSize();
          if (size == null) {
            print('Error: getPlatformAdSize() returned null for $bannerAd');
            return;
          }

          setState(() {
            _inlineAdaptiveAd = bannerAd;
            _isLoaded = true;
            _adSize = size;
          });
        },
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          print('Inline adaptive banner failedToLoad: $error');
          ad.dispose();
        },
      ),
    );
    await _inlineAdaptiveAd!.load();
  }

  /// Gets a widget containing the ad, if one is loaded.
  ///
  /// Returns an empty container if no ad is loaded, or the orientation
  /// has changed. Also loads a new ad if the orientation changes.
  Widget _getAdWidget() {
    return OrientationBuilder(
      builder: (context, orientation) {
        if (_currentOrientation == orientation &&
            _inlineAdaptiveAd != null &&
            _isLoaded &&
            _adSize != null) {
          return Align(
              child: Container(
            width: _adWidth,
            height: _adSize!.height.toDouble(),
            child: AdWidget(
              ad: _inlineAdaptiveAd!,
            ),
          ));
        }
        // Reload the ad if the orientation changes.
        if (_currentOrientation != orientation) {
          _currentOrientation = orientation;
          _loadAd();
        }
        return Container();
      },
    );
  }

  @override
  Widget build(BuildContext context) => Scaffold(
      appBar: AppBar(
        title: Text('Inline adaptive banner example'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: _insets),
          child: ListView.separated(
            itemCount: 20,
            separatorBuilder: (BuildContext context, int index) {
              return Container(
                height: 40,
              );
            },
            itemBuilder: (BuildContext context, int index) {
              if (index == 10) {
                return _getAdWidget();
              }
              return Text(
                'Placeholder text',
                style: TextStyle(fontSize: 24),
              );
            },
          ),
        ),
      ));

  @override
  void dispose() {
    super.dispose();
    _inlineAdaptiveAd?.dispose();
  }
}