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 usando WebViewController, use essa API para ativar a monetização de anúncios. Para saber mais, consulte as políticas da AdMob.

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

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

   Saiba mais.

2. Monetizar usando a API WebView para anúncios

   Se o app usar WebViewController para mostrar conteúdo da Web que veicula anúncios do Ad Manager ou do AdSense, use a API WebView para anúncios e registre 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 nenhuma solicitação 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 proprietário do conteúdo da Web em um WebViewController, ainda assim recomendamos usar essa API para ajudar a proteger os anunciantes contra spam e melhorar a monetização dos editores da Web que forneceram o conteúdo.

É possível fazer uma ou as duas opções no mesmo app.

Este guia foi criado para 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:

• Use o plug-in do SDK dos anúncios para dispositivos móveis do Google para Flutter com a versão 3.0.0 ou mais recente no seu app.
• Adicione webview_flutter como uma dependência no arquivo pubspec.yaml.
• Adicione webview_flutter_android com a versão 3.7.0 ou mais recente no seu app.

Ignorar a verificação do identificador do aplicativo

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

<!-- 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 um WebViewController que usa o código do AdSense ou as tags do editor do Google, siga as etapas listadas abaixo:

1. Ative o JavaScript em WebViewController. Caso contrário, 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 sua instância do 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://google.github.io/webview-ads/test/ 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://google.github.io/webview-ads/test/'));
  }

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

• 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)
• Como os cookies primários funcionam

Confira o código-fonte do URL de teste. Em seguida, substitua o URL de teste pelo seu. Você também pode 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=.