Anúncios de abertura do app

Os anúncios de abertura do app são um formato especial destinado a editores que querem gerar receita com as telas de carregamento do app. Os anúncios de abertura do app podem ser fechados a qualquer momento e são projetados para aparecer quando os usuários trazem o app para o primeiro plano.

Os anúncios de abertura do app mostram automaticamente uma pequena área de branding para que os usuários saibam que estão no seu app. Confira um exemplo de anúncio de abertura do app:

Pré-requisitos

• Plug-in do Flutter 0.13.6 ou mais recente.
• Conclua a etapa Começar. O app do Flutter já precisa ter o plug-in dos anúncios para dispositivos móveis do Google para Flutter importado.

Sempre teste com anúncios de teste

Ao criar e testar seus apps, use anúncios de teste em vez de publicidade de produção ativa. Sua conta poderá ser suspensa se isso não for feito.

A maneira mais fácil de carregar anúncios de teste é usar nossos IDs de bloco de anúncios de teste dedicados para anúncios premiados do Android e do iOS:

Android

ca-app-pub-3940256099942544/9257395921

iOS

ca-app-pub-3940256099942544/5575463023

Eles foram configurados especialmente para retornar anúncios de teste para cada solicitação, e você pode usá-los nos seus próprios apps durante a programação, o teste e a depuração. Basta substituí-los pelo seu próprio ID do bloco de anúncios antes de publicar o app.

Implementação

As principais etapas para integrar anúncios de abertura do app são:

1. Crie uma classe utilitária que carregue um anúncio antes que você precise exibi-lo.
2. Carregar um anúncio.
3. Registre callbacks e mostre o anúncio.
4. Inscreva-se em AppStateEventNotifier.appStateStream para mostrar o anúncio durante eventos em primeiro plano.

Criar uma classe de utilitários

Crie uma nova classe com o nome AppOpenAdManager para carregar o anúncio. Essa classe gerencia uma variável de instância para acompanhar um anúncio carregado e o ID do bloco de anúncios de cada plataforma.

import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'dart:io' show Platform;

class AppOpenAdManager {
  
  String adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/9257395921'
    : 'ca-app-pub-3940256099942544/5575463023';
  
  AppOpenAd? _appOpenAd;
  bool _isShowingAd = false;

  /// Load an AppOpenAd.
  void loadAd() {
    // We will implement this below.
  }

  /// Whether an ad is available to be shown.
  bool get isAdAvailable {
    return _appOpenAd != null;
  }
}

Carregar um anúncio

O anúncio de abertura do app precisa estar pronto antes que os usuários entrem nele. Implemente uma classe de utilitário para fazer solicitações de anúncio antes de mostrar o anúncio.

É possível carregar um anúncio usando o método load na classe AppOpenAd. O método de carregamento requer um ID do bloco de anúncios, um modo de orientação, um objeto AdRequest e um gerenciador de conclusão que é ativado quando o carregamento do anúncio é concluído ou apresenta falha. O objeto AppOpenAd carregado é fornecido como um parâmetro no gerenciador de conclusão. O exemplo abaixo mostra como carregar uma AppOpenAd.

public class AppOpenAdManager {
  ...

  /// Load an AppOpenAd.
  void loadAd() {
    AppOpenAd.load(
      adUnitId: adUnitId,
      adRequest: AdRequest(),
      adLoadCallback: AppOpenAdLoadCallback(
        onAdLoaded: (ad) {
          _appOpenAd = ad;
        },
        onAdFailedToLoad: (error) {
          print('AppOpenAd failed to load: $error');
          // Handle the error.
        },
      ),
    );
  }
}

Mostrar o anúncio e processar callbacks de tela cheia

Antes de mostrar o anúncio, registre uma FullScreenContentCallback para cada evento de anúncio que você quer acompanhar.

public class AppOpenAdManager {
  ...

  public void showAdIfAvailable() {
    if (!isAdAvailable) {
      print('Tried to show ad before available.');
      loadAd();
      return;
    }
    if (_isShowingAd) {
      print('Tried to show ad while already showing an ad.');
      return;
    }
    // Set the fullScreenContentCallback and show the ad.
    _appOpenAd!.fullScreenContentCallback = FullScreenContentCallback(
      onAdShowedFullScreenContent: (ad) {
        _isShowingAd = true;
        print('$ad onAdShowedFullScreenContent');
      },
      onAdFailedToShowFullScreenContent: (ad, error) {
        print('$ad onAdFailedToShowFullScreenContent: $error');
        _isShowingAd = false;
        ad.dispose();
        _appOpenAd = null;
      },
      onAdDismissedFullScreenContent: (ad) {
        print('$ad onAdDismissedFullScreenContent');
        _isShowingAd = false;
        ad.dispose();
        _appOpenAd = null;
        loadAd();
      },
    );
  }
}

Se um usuário retornar ao seu app depois de clicar em um anúncio de abertura de app, verifique se ele não é apresentado com outro anúncio de abertura de app.

Detectar eventos de primeiro plano do app

Para receber notificações sobre eventos em primeiro plano do app, é necessário se inscrever em AppStateEventNotifier.appStateStream e detectar eventos foreground.

import 'package:app_open_example/app_open_ad_manager.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

/// Listens for app foreground events and shows app open ads.
class AppLifecycleReactor {
  final AppOpenAdManager appOpenAdManager;

  AppLifecycleReactor({required this.appOpenAdManager});

  void listenToAppStateChanges() {
    AppStateEventNotifier.startListening();
    AppStateEventNotifier.appStateStream
        .forEach((state) => _onAppStateChanged(state));
  }

  void _onAppStateChanged(AppState appState) {
    // Try to show an app open ad if the app is being resumed and
    // we're not already showing an app open ad.
    if (appState == AppState.foreground) {
      appOpenAdManager.showAdIfAvailable();
    }
  }
}

Agora você pode inicializar o AppLifecycleReactor e começar a detectar mudanças no ciclo de vida do app. Por exemplo, na página inicial:

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

import 'app_lifecycle_reactor.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App Open Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'App Open Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

/// Example home page for an app open ad.
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  late AppLifecycleReactor _appLifecycleReactor;

  @override
  void initState() {
    super.initState();
    
    AppOpenAdManager appOpenAdManager = AppOpenAdManager()..loadAd();
    _appLifecycleReactor = AppLifecycleReactor(
      appOpenAdManager: appOpenAdManager);
  }

Considerar a validade dos anúncios

Ponto-chave: as referências de anúncios na versão Beta aberta do app expiram após quatro horas. Os anúncios renderizados mais de quatro horas após o momento da solicitação não são mais válidos e talvez não gerem receita. Esse limite de tempo está sendo cuidadosamente considerado e pode mudar em versões Beta futuras do formato de abertura de apps.

Para que um anúncio expirado não seja veiculado, adicione um carimbo de data/hora ao AppOpenAdManager para verificar há quanto tempo o anúncio foi carregado. Em seguida, use esse carimbo para verificar se o anúncio ainda é válido.

/// Utility class that manages loading and showing app open ads.
class AppOpenAdManager {
  ...
  
  /// Maximum duration allowed between loading and showing the ad.
  final Duration maxCacheDuration = Duration(hours: 4);

  /// Keep track of load time so we don't show an expired ad.
  DateTime? _appOpenLoadTime;
  
  ...

  /// Load an AppOpenAd.
  void loadAd() {
    AppOpenAd.load(
      adUnitId: adUnitId,
      orientation: AppOpenAd.orientationPortrait,
      adRequest: AdRequest(),
      adLoadCallback: AppOpenAdLoadCallback(
        onAdLoaded: (ad) {
          print('$ad loaded');
          _appOpenLoadTime = DateTime.now();
          _appOpenAd = ad;
        },
        onAdFailedToLoad: (error) {
          print('AppOpenAd failed to load: $error');
        },
      ),
    );
  }

  /// Shows the ad, if one exists and is not already being shown.
  ///
  /// If the previously cached ad has expired, this just loads and caches a
  /// new ad.
  void showAdIfAvailable() {
    if (!isAdAvailable) {
      print('Tried to show ad before available.');
      loadAd();
      return;
    }
    if (_isShowingAd) {
      print('Tried to show ad while already showing an ad.');
      return;
    }
    if (DateTime.now().subtract(maxCacheDuration).isAfter(_appOpenLoadTime!)) {
      print('Maximum cache duration exceeded. Loading another ad.');
      _appOpenAd!.dispose();
      _appOpenAd = null;
      loadAd();
      return;
    }
    // Set the fullScreenContentCallback and show the ad.
    _appOpenAd!.fullScreenContentCallback = FullScreenContentCallback(...);
    _appOpenAd!.show();
  }
}

Inicializações a frio e telas de carregamento

Até agora, a documentação pressupõe que você só veicule anúncios de abertura do app quando os usuários colocam o app em primeiro plano quando ele está suspenso na memória. As "inicializações a frio" ocorrem quando o app é iniciado, mas não foi suspenso anteriormente na memória.

Um exemplo de inicialização a frio é quando um usuário abre seu app pela primeira vez. Com as inicializações a frio, você não terá um anúncio de abertura de app carregado anteriormente que esteja pronto para ser mostrado imediatamente. O atraso entre o momento em que você solicita um anúncio e o momento em que ele é recebido pode criar uma situação em que os usuários podem usar seu app brevemente antes de se surpreenderem com um anúncio fora do contexto. Isso precisa ser evitado porque é uma experiência ruim para o usuário.

A maneira preferencial de usar anúncios de abertura do app em inicializações a frio é usar uma tela de carregamento para carregar os recursos do jogo ou do app e mostrar o anúncio apenas na tela de carregamento. Se o carregamento do app estiver concluído e o usuário tiver sido enviado ao conteúdo principal do app, não mostre o anúncio.

Importante: para continuar carregando recursos do app enquanto o anúncio de abertura do app está sendo exibido, sempre carregue recursos em uma linha de execução em segundo plano.

Práticas recomendadas

Os anúncios de abertura do app ajudam a gerar receita com a tela de carregamento do app, quando ele é inicializado pela primeira vez e durante a troca de apps. No entanto, é importante manter as práticas recomendadas em mente para que os usuários gostem de usar o app. É melhor:

• Mostre o primeiro anúncio de abertura do app depois que o usuário acessar o aplicativo algumas vezes.
• Mostre anúncios de abertura do app em momentos em que os usuários esperariam o carregamento do app.
• Se o carregamento da tela abaixo do anúncio de abertura do app terminar antes que o anúncio seja dispensado, convém dispensar essa tela no manipulador de eventos onAdDismissedFullScreenContent.

Exemplo completo no GitHub

Abertura do app