Cómo integrar la API de WebView para anuncios

La API de WebView para anuncios permite la monetización de anuncios en la app con WebViewController. Si muestras contenido web que implementa anuncios con el código de AdSense o Google Publisher Tag en tu app a través de WebViewController, debes usar esta API para habilitar la monetización de anuncios. Para obtener más información, consulta las Políticas de AdSense y Ad Manager.

  1. Monetiza mediante solicitudes de anuncios con el SDK de anuncios de Google para dispositivos móviles

    Puedes monetizar tu app si realizas solicitudes de anuncios a Para Ad Manager con el SDK de anuncios de Google para dispositivos móviles, implementa formatos de anuncios para apps para dispositivos móviles.

    Más información.

  2. Monetiza con la API de WebView para anuncios

    Si tu app usa WebViewController para mostrar contenido web que publica anuncios de Ad Manager o AdSense, usa la API de WebView para anuncios a fin de registrar objetos WebViewController con el SDK de anuncios de Google para dispositivos móviles. El JavaScript en el código de AdSense o Google Publisher Tag compila y envía solicitudes de anuncios para que no tengas que realizar ninguna solicitud de anuncios con el SDK. Ten en cuenta que solo los formatos de inventario de la Web móvil y la Web para computadoras están disponibles con esta API.

    Si no eres propietario del contenido web en una WebViewController, te recomendamos que uses esta API para proteger a los anunciantes del spam y mejorar la monetización de los publicadores web que proporcionaron el contenido.

Ten en cuenta que puedes elegir cualquiera de las dos opciones, o incluso ambas, en la misma app.

El objetivo de esta guía es ayudarte a integrar la API de WebView para anuncios en tu app para iOS.

Antes de comenzar

Antes de comenzar a usar la API de WebView para anuncios, asegúrate de hacer lo siguiente:

Omitir la verificación del identificador de la aplicación

Android

Agrega la siguiente etiqueta <meta-data> al archivo AndroidManifest.xml para omitir la verificación del APPLICATION_ID. Si te pierdes este paso, es posible que el SDK de anuncios de Google para dispositivos móviles muestre una IllegalStateException cuando se inicie la 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

Actualiza el archivo Runner/Info.plist con la clave y el valor de string que se indican a continuación para evitar una verificación de GADApplicationIdentifier. Si te pierdes este paso, el SDK de anuncios de Google para dispositivos móviles podría mostrar una GADInvalidInitializationException al inicio de la app.

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

Registra el WebViewController

Para mejorar la monetización de anuncios en la app dentro de un WebViewController que usa código de AdSense o Google Publisher Tag, sigue los pasos que se indican a continuación:

  1. Habilita JavaScript en el WebViewController. De lo contrario, es posible que los anuncios no se carguen.

  2. Para mejorar la experiencia del anuncio de los usuarios y ser coherente con la política de cookies de Chrome, habilita las cookies de terceros en tu instancia de AndroidWebViewController.

  3. Registra la instancia de WebViewController llamando al método registerWebView() que proporciona el SDK de anuncios de Google para dispositivos móviles.

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);
  }
}

Carga la URL

Ahora puedes cargar una URL y mostrar tu contenido web a través de WebViewController. Te recomendamos que cargues esta URL de prueba: https://webview-api-for-ads-test.glitch.me/ para probar la integración antes de usar tu propia URL. La página web mostrará un error si JavaScript no está habilitado.

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/'));
  }

La URL de prueba muestra barras de estado verdes para una integración correcta si se aplican las siguientes condiciones:

  • Se conectó WebView al SDK de anuncios de Google para dispositivos móviles
  • JavaScript habilitado
  • Las cookies de terceros funcionan (no se espera en dispositivos iOS)
  • Las cookies propias funcionan

Consulta el código fuente de nuestra URL de prueba. Luego, puedes reemplazar la URL de prueba por tu URL. También puedes usar una herramienta proxy, como Charles, para capturar el tráfico HTTPS de tu app y, luego, inspeccionar las solicitudes de anuncios en busca de un parámetro &scar=.