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ê mostrar conteúdo da Web que implementa anúncios com o código do AdSense ou a Tag do editor do Google no seu app pela WebViewController, use essa API para ativar a monetização de anúncios. Para saber mais, consulte as Políticas do AdSense e do Ad Manager.

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

    Para gerar receita com seu app, faça solicitações de anúncios à O Ad Manager com o SDK de anúncios para dispositivos móveis do Google implementa formatos de anúncios para apps para dispositivos móveis.

    Saiba mais.

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

    Caso seu app use WebViewController para mostrar conteúdo da Web que veicula anúncios do Ad Manager ou do AdSense, utilize 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 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 somente os formatos de inventário da Web para dispositivos móveis e para computadores estão disponíveis usando essa API.

    Mesmo que você não tenha o conteúdo da Web em um WebViewController, ainda recomendamos usar essa API para ajudar a proteger anunciantes contra spam e melhorar a monetização para os editores da Web que forneceram o conteúdo.

É possível usar qualquer uma das opções (ou até ambas) no mesmo app.

Este guia ajuda a integrar a API WebView para anúncios no 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

Android

Adicione a seguinte tag <meta-data> no arquivo AndroidManifest.xml para ignorar a verificação de APPLICATION_ID. Se você perder 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"/>

iOS

Atualize o arquivo Runner/Info.plist com o valor de chave e string abaixo para ignorar uma verificação de GADApplicationIdentifier. Se você perder 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 editor do Google, siga as etapas listadas abaixo:

  1. Ative o JavaScript no WebViewController. Se isso não for feito, os anúncios não serão carregados.

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

  3. Registre a instância do 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 pelo 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 mostrará barras de status verdes para uma integração bem-sucedida se as seguintes condições se aplicarem:

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

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