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.
- 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.
- 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 objetosWebViewController
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:
- Usa el complemento del SDK de anuncios de Google para dispositivos móviles para Flutter con la versión 3.0.0 o posterior en tu app.
- Agrega
webview_flutter
como una dependencia en tu archivopubspec.yaml
. - Agrega
webview_flutter_android
con la versión 3.7.0 o posterior a tu app.
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:
Habilita JavaScript en el
WebViewController
. De lo contrario, es posible que los anuncios no se carguen.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
.Registra la instancia de
WebViewController
llamando al métodoregisterWebView()
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=
.