Integrar a API WebView para anúncios

A API WebView para anúncios permite a monetização de anúncios no app usando WebViewController. Se você exibe conteúdo da Web que implementa anúncios com o código do Google AdSense ou a Tag do editor do Google no seu app usando WebViewController, use essa API para ativar a monetização de anúncios. Para saber mais, consulte as políticas da AdMob.

  1. Gerar receita fazendo solicitações de anúncios com o SDK dos anúncios para dispositivos móveis do Google

    Você pode gerar receita com seu app fazendo solicitações de anúncios para a AdMob com o SDK dos anúncios para dispositivos móveis do Google implementando formatos de anúncio para apps para dispositivos móveis.

    Saiba mais.

  2. Gerar receita usando a API WebView para anúncios

    Se o app usa WebViewController para mostrar conteúdo da Web que veicula anúncios do Ad Manager ou do AdSense, use a API WebView para anúncios para registrar objetos WebViewController com o SDK dos anúncios para dispositivos móveis do Google. O JavaScript no código do Google AdSense ou na Tag do editor do Google cria e envia solicitações de anúncios para que você não precise fazer solicitações de anúncios com o SDK. Lembre-se de que apenas os formatos de inventário da Web para dispositivos móveis e computadores estão disponíveis usando essa API.

    Se você não for o proprietário do conteúdo da Web em um WebViewController, recomendamos o uso dessa API para ajudar a proteger os anunciantes contra spam e melhorar a monetização dos editores da Web que forneceram o conteúdo.

Você pode usar qualquer uma das opções ou até mesmo as duas no mesmo app.

Este guia tem como objetivo ajudar você a integrar a API WebView para anúncios ao seu app iOS.

Antes de começar

Antes de começar a usar a API WebView para anúncios, faça o seguinte:

Ignorar a verificação do identificador do aplicativo

AndroidiOS

Adicione a seguinte tag <meta-data> ao arquivo AndroidManifest.xml para ignorar a verificação do APPLICATION_ID. Se você pular essa etapa, o SDK dos anúncios para dispositivos móveis do Google poderá gerar uma IllegalStateException na inicialização do app.

<!-- Bypass APPLICATION_ID check for WebView API for Ads -->
<meta-data
    android:name="com.google.android.gms.ads.INTEGRATION_MANAGER"
    android:value="webview"/>

Atualize o arquivo Runner/Info.plist com a chave e o valor da string abaixo para ignorar uma verificação do GADApplicationIdentifier. Se você pular essa etapa, o SDK dos anúncios para dispositivos móveis do Google poderá gerar uma GADInvalidInitializationException na inicialização do app.

<!-- Bypass GADApplicationIdentifier check for WebView API for Ads -->
<key>GADIntegrationManager</key>
<string>webview</string>

Registrar o WebViewController

Para melhorar a monetização de anúncios no app em uma WebViewController que usa o código do AdSense ou as tags do Google Publisher, siga as etapas listadas abaixo:

  1. Ative o JavaScript no WebViewController. Caso contrário, os anúncios não vão carregar.

  2. Para melhorar a experiência de anúncios dos usuários e ser consistente com a política de cookies do Chrome, ative cookies de terceiros na sua instância de AndroidWebViewController.

  3. Registre a instância WebViewController chamando o método registerWebView() fornecido pelo SDK dos anúncios para dispositivos móveis do Google.

import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_android/webview_flutter_android.dart';

@override
class WebViewExampleState extends State<WebViewExample> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();

    createWebView();
  }

  void createWebView() async {
    controller = WebViewController();
    // 1. Enable JavaScript in the web view.
    await controller.setJavaScriptMode(JavaScriptMode.unrestricted);

    // 2. Enable third-party cookies for Android.
    if (controller.platform is AndroidWebViewController) {
      AndroidWebViewCookieManager cookieManager = AndroidWebViewCookieManager(
        const PlatformWebViewCookieManagerCreationParams());
      await cookieManager.setAcceptThirdPartyCookies(
        controller.platform as AndroidWebViewController, true);
    }

    // 3. Register the web view.
    await MobileAds.instance.registerWebView(controller);
  }
}

Carregar o URL

Agora você pode carregar um URL e mostrar seu conteúdo da Web usando WebViewController. Recomendamos que você carregue este URL de teste: https://webview-api-for-ads-test.glitch.me/ para testar a integração antes de usar seu próprio URL. A página da Web vai mostrar um erro se o JavaScript não estiver ativado.

import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_android/webview_flutter_android.dart';

@override
class WebViewExampleState extends State<WebViewExample> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();

    createWebView();
  }

  void createWebView() async {
    controller = WebViewController();
    // 1. Enable JavaScript in the web view.
    await controller.setJavaScriptMode(JavaScriptMode.unrestricted);

    // 2. Enable third-party cookies for Android.
    if (controller.platform is AndroidWebViewController) {
      AndroidWebViewCookieManager cookieManager = AndroidWebViewCookieManager(
        const PlatformWebViewCookieManagerCreationParams());
      await cookieManager.setAcceptThirdPartyCookies(
        controller.platform as AndroidWebViewController, true);
    }

    // 3. Register the web view.
    await MobileAds.instance.registerWebView(controller);

    // 4. Load the URL.
    await controller.loadRequest(Uri.parse('https://webview-api-for-ads-test.glitch.me/'));
  }

O URL de teste mostra barras de status verdes para uma integração bem-sucedida se as seguintes condições forem aplicadas:

  • WebView conectado ao SDK dos anúncios para dispositivos móveis do Google
  • JavaScript ativado
  • Os cookies de terceiros funcionam (não esperado em dispositivos iOS)
  • Cookies primários funcionam

Confira o código-fonte do nosso URL de teste. Em seguida, substitua o URL de teste pelo seu. Também é possível usar uma ferramenta de proxy, como o Charles, para capturar o tráfego HTTPS do app e inspecionar as solicitações de anúncios em busca de um parâmetro &scar=.