Banner adattivi ancorati

I banner adattivi sono la nuova generazione di annunci adattabili, che massimizzano il rendimento ottimizzando le dimensioni degli annunci per ciascun dispositivo. Migliorando i banner intelligenti, che supportavano solo altezze fisse, i banner adattivi ti consentono di specificare la larghezza dell'annuncio e di utilizzare questa informazione per determinare la dimensione ottimale dell'annuncio.

Per scegliere le dimensioni degli annunci migliori, i banner adattivi utilizzano proporzioni fisse anziché altezza fisse. Ciò si traduce in annunci banner che occupano una porzione più coerente dello schermo su tutti i dispositivi e offrono opportunità per migliorare il rendimento.

Quando lavori con i banner adattivi, tieni presente che restituiranno sempre una dimensione costante per un determinato dispositivo e larghezza. Dopo aver testato il layout su un determinato dispositivo, puoi avere la certezza che le dimensioni dell'annuncio non cambieranno. Tuttavia, le dimensioni della creatività banner possono cambiare nei diversi dispositivi. Di conseguenza, ti consigliamo di far sì che il layout adatti le variazioni nell'altezza dell'annuncio. In rari casi, potrebbe non essere possibile riempire la dimensione adattiva completa e al suo posto verrà centrata una creatività di dimensioni standard.

Prerequisiti

Quando utilizzare i banner adattivi

I banner adattivi sono progettati per sostituire sia il formato banner standard di settore 320 x 50 sia il formato banner intelligente, che sostituisce.

Queste dimensioni sono comunemente utilizzate come banner ancorati, che di solito sono bloccati nella parte superiore o inferiore dello schermo.

Per questi banner ancorati, le proporzioni quando utilizzi i banner adattivi saranno simili a quelle di un annuncio standard 320 x 50, come si può vedere nei tre esempi riportati di seguito:


Banner 320 x 50
Banner adattivo
Banner intelligente

Il banner adattivo sfrutta meglio le dimensioni dello schermo disponibili. Inoltre, rispetto a un banner intelligente, il banner adattivo è la scelta migliore perché:

  • Utilizza qualsiasi larghezza da te fornita, anziché forzare la larghezza a schermo intero, in modo da tenere conto dell'area di sicurezza su iOS e dei ritagli della visualizzazione su Android.

  • Seleziona un'altezza ottimale per il dispositivo specifico, anziché avere un'altezza costante su dispositivi di diverse dimensioni, attenuando gli effetti della frammentazione dei dispositivi.

Note di implementazione

Quando implementi i banner adattivi nella tua app, tieni presente quanto segue:

  • Devi conoscere la larghezza della visualizzazione in cui verrà inserito l'annuncio e tenere conto della larghezza del dispositivo e di eventuali aree sicure o ritagli applicabili.
  • Per essere conforme alle norme di AdMob, assicurati che lo sfondo della visualizzazione dell'annuncio sia opaco quando vengono pubblicati annunci di dimensioni inferiori che non occupano l'area annuncio.
  • Assicurati di utilizzare l'ultima versione del plug-in Flutter degli annunci per dispositivi mobili di Google.
  • Le dimensioni dei banner adattivi sono progettate per funzionare al meglio quando viene utilizzata l'intera larghezza disponibile. Nella maggior parte dei casi, si tratta dell'intera larghezza dello schermo del dispositivo in uso. Assicurati di tenere conto delle aree sicure applicabili.
  • L'SDK Google Mobile Ads ridimensiona il banner con un'altezza dell'annuncio ottimizzata per la larghezza specificata quando vengono utilizzate le API AdSize adattive.
  • Esistono due metodi per ottenere la dimensione dell'annuncio adattivo: AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width) per richiedere un orientamento specifico e AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width) per l'orientamento corrente al momento dell'esecuzione.
  • Le dimensioni restituite per una determinata larghezza su un determinato dispositivo saranno sempre le stesse. Di conseguenza, dopo aver testato il layout su un determinato dispositivo, puoi essere certo che le dimensioni degli annunci non cambieranno.
  • L'altezza del banner ancorato non supera mai il 15% inferiore all'altezza del dispositivo o i 90 pixel indipendenti dalla densità e mai meno di 50 pixel indipendenti dalla densità.

Guida rapida

Segui i passaggi riportati di seguito per implementare un semplice banner adattivo ancorato.

  1. Ottieni le dimensioni di un annuncio banner adattivo. Le dimensioni scelte verranno utilizzate per richiedere il banner adattivo. Per ottenere le dimensioni dell'annuncio adattivo, assicurati di:
    1. Ottieni la larghezza del dispositivo in uso in pixel indipendenti dalla densità oppure imposta la tua larghezza se non vuoi utilizzare l'intera larghezza dello schermo. Puoi utilizzare MediaQuery.of(context) per ottenere la larghezza dello schermo.
    2. Utilizza i metodi statici appropriati per la classe delle dimensioni dell'annuncio, ad esempio AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width) per ottenere un oggetto AdSize adattivo per l'orientamento corrente.
  2. Crea un oggetto BannerAd con l'ID unità pubblicitaria, le dimensioni dell'annuncio adattivo e un oggetto richiesta di annuncio.
  3. Carica l'annuncio come faresti con un normale annuncio banner e visualizzalo da un AdWidget come faresti con una normale visualizzazione dell'annuncio.

Esempio di codice

Di seguito è riportato un widget di esempio che carica un banner adattivo ancorato in modo che si adatti alla larghezza dello schermo:

import 'dart:io';

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

/// This example demonstrates anchored adaptive banner ads.
class AnchoredAdaptiveExample extends StatefulWidget {
  @override
  _AnchoredAdaptiveExampleState createState() =>
      _AnchoredAdaptiveExampleState();
}

class _AnchoredAdaptiveExampleState extends State<AnchoredAdaptiveExample> {
  BannerAd? _anchoredAdaptiveAd;
  bool _isLoaded = false;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _loadAd();
  }

  Future<void> _loadAd() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final AnchoredAdaptiveBannerAdSize? size =
        await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
            MediaQuery.of(context).size.width.truncate());

    if (size == null) {
      print('Unable to get height of anchored banner.');
      return;
    }

    _anchoredAdaptiveAd = BannerAd(
      // TODO: replace these test ad units with your own ad unit.
      adUnitId: Platform.isAndroid
          ? 'ca-app-pub-3940256099942544/6300978111'
          : 'ca-app-pub-3940256099942544/2934735716',
      size: size,
      request: AdRequest(),
      listener: BannerAdListener(
        onAdLoaded: (Ad ad) {
          print('$ad loaded: ${ad.responseInfo}');
          setState(() {
            // When the ad is loaded, get the ad size and use it to set
            // the height of the ad container.
            _anchoredAdaptiveAd = ad as BannerAd;
            _isLoaded = true;
          });
        },
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          print('Anchored adaptive banner failedToLoad: $error');
          ad.dispose();
        },
      ),
    );
    return _anchoredAdaptiveAd!.load();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('Anchored adaptive banner example'),
        ),
        body: Center(
          child: Stack(
            alignment: AlignmentDirectional.bottomCenter,
            children: <Widget>[
              ListView.separated(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0),
                  itemBuilder: (context, index) {
                    return Text(
                      'Placeholder text',
                      style: TextStyle(fontSize: 24),
                    );
                  },
                  separatorBuilder: (context, index) {
                    return Container(height: 40);
                  },
                  itemCount: 20),
              if (_anchoredAdaptiveAd != null && _isLoaded)
                Container(
                  color: Colors.green,
                  width: _anchoredAdaptiveAd!.size.width.toDouble(),
                  height: _anchoredAdaptiveAd!.size.height.toDouble(),
                  child: AdWidget(ad: _anchoredAdaptiveAd!),
                )
            ],
          ),
        ),
      );

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

Qui viene utilizzata la funzione AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize per ottenere le dimensioni di un banner in una posizione ancorata per l'orientamento corrente dell'interfaccia. Per precaricare un banner ancorato in un determinato orientamento, utilizza AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width) e trasmetti l'orientamento desiderato.

Esempio completo su GitHub

Per visualizzare l'esempio completo, consulta la pagina Esempio di banner nel repository GitHub.