Cómo integrar la API de WebView para anuncios

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

  1. Monetiza a través de solicitudes de anuncios con el SDK de anuncios de Google para dispositivos móviles

    Para monetizar tu app, realiza solicitudes de anuncios a Ad Manager con el SDK de anuncios de Google para celulares implementando formatos de anuncios para celulares de la app.

    Obtén más información.

  2. Cómo monetizar con la API de WebView para anuncios

    Si tu app usa WebViewController para mostrar contenido web desde el que se publican anuncios: Ad Manager o AdSense, usa la API de WebView para anuncios para registrarte 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 crea y envía solicitudes de anuncios para que no tengas que hacer ninguna solicitud de anuncio con el SDK. Ten en cuenta que solo la Web móvil y la Web para computadoras formatos de inventario disponibles con esta API.

    Si no eres el propietario del contenido web en una WebViewController, sigues siendo se recomienda que usen esta API para proteger a los anunciantes contra el spam y mejorar la monetización para los editores web que proporcionaron el contenido;

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

Esta guía tiene el objetivo de ayudarte a integrar la API de WebView para anuncios en tu desde la app para iOS.

Antes de comenzar

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

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

Android

Agrega la siguiente etiqueta <meta-data> en el archivo AndroidManifest.xml al omitir la verificación de APPLICATION_ID. Si omites este paso, el Mobile Ads SDK podría mostrar un error IllegalStateException al iniciar la aplicación.

<!-- 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 cadena que aparecen a continuación: omitir una verificación de GADApplicationIdentifier. Si omites este paso, el SDK de anuncios de Google para dispositivos móviles podría arrojar una GADInvalidInitializationException al iniciar la aplicación.

<!-- 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 aplicación dentro de WebViewController que utilice AdSense código o Google Publisher Etiquetas, sigue estos pasos que se indican a continuación:

  1. Habilita JavaScript en WebViewController. No hacerlo puede causar los anuncios no se cargan.

  2. Para mejorar las métricas la experiencia del anuncio y ser coherente con la política de cookies, habilitar cookies de terceros en tu instancia AndroidWebViewController.

  3. Registra la instancia WebViewController llamando al 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 usando tu propia URL. La página web mostrará un error si JavaScript no está activado 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 la 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 los 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 usa una herramienta proxy como Charles para capturar tu tráfico HTTPS de la app y, luego, inspeccionar las solicitudes de anuncios en busca de un parámetro &scar=.