Anúncios de abertura do app

Selecione a plataforma: Android iOS Unity Flutter

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. Eles podem ser fechados a qualquer momento e são projetados para serem mostrados quando os usuários trazem seu 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 como é um anúncio de abertura do app:

Pré-requisitos

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

Sempre teste com anúncios de teste

Ao criar e testar seus apps, use anúncios de teste em vez de anúncios de produção ativos. 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 em todas as solicitações, e você pode usá-los nos seus próprios apps durante a programação, o teste e a depuração. Substitua-os pelo seu 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 de você precisar mostrá-lo.
  2. Carregue um anúncio.
  3. Registre-se para 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 classe chamada 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 de os usuários entrarem no app. Implemente uma classe utilitária para fazer solicitações de anúncios antes de precisar 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 um 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 veicular o anúncio, registre um 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 voltar ao seu app depois de sair dele clicando em um anúncio de abertura de app, verifique se outro anúncio de abertura de app não será mostrado.

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

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. Depois, use esse carimbo de data/hora 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ó mostra anúncios de abertura do app quando os usuários colocam o app em primeiro plano enquanto ele está suspenso na memória. As "inicializações a frio" ocorrem quando o app é iniciado, mas não foi suspenso 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 app aberto carregado anteriormente pronto para ser mostrado imediatamente. O atraso entre o momento em que você solicita um anúncio e o momento em que o recebe pode criar uma situação em que os usuários conseguem usar seu app brevemente antes de serem surpreendidos por um anúncio fora de contexto. Isso deve ser evitado porque é uma experiência de usuário ruim.

A maneira preferida 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 app e mostrar o anúncio apenas na tela de carregamento. Se o app tiver terminado de carregar e enviado o usuário para o conteúdo principal, não mostre o anúncio.

Práticas recomendadas

Os anúncios de abertura do app ajudam a monetizar a tela de carregamento do app quando ele é iniciado pela primeira vez e durante a troca de apps. No entanto, é importante seguir as práticas recomendadas para que os usuários gostem de usar seu 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 durante os momentos em que os usuários estariam esperando o carregamento do app.
  • Se você tiver uma tela de carregamento abaixo do anúncio de abertura do app e ela concluir o carregamento antes que o anúncio seja dispensado, convém dispensar a tela de carregamento no manipulador de eventos onAdDismissedFullScreenContent.

Exemplo completo no GitHub

Abertura do app