Integrare l'WebView API for Ads

L'API WebView per gli annunci consente la monetizzazione degli annunci in-app utilizzando WebViewController. Se visualizzi contenuti web che implementano annunci con codice AdSense o Tag publisher di Google nella tua app tramite WebViewController, devi utilizzare questa API per attivare la monetizzazione degli annunci. Per saperne di più, consulta le norme di AdMob.

  1. Monetizzare effettuando richieste di annunci con Google Mobile Ads Flutter Plugin

    Puoi monetizzare la tua app effettuando richieste di annunci a AdMob con Google Mobile Ads Flutter Plugin implementando formati degli annunci per app mobile.

    Scopri di più.

  2. Monetizzare utilizzando l'API WebView per gli annunci

    Se la tua app utilizza WebViewController per visualizzare contenuti web che pubblicano annunci da Ad Manager o AdSense, utilizza l'API WebView per gli annunci per registrare gli oggetti WebViewController con Google Mobile Ads Flutter Plugin. Il codice JavaScript nel codice AdSense o nel Tag publisher di Google crea e invia richieste di annunci, quindi non devi effettuare alcuna richiesta di annunci con l'SDK. Tieni presente che utilizzando questa API sono disponibili solo i formati di inventario web mobile e web desktop .

    Anche se non possiedi i contenuti web in un WebViewController, ti consigliamo comunque di utilizzare questa API per proteggere gli inserzionisti dallo spam e migliorare la monetizzazione per i publisher web che hanno fornito i contenuti.

Tieni presente che puoi utilizzare una o entrambe le opzioni nella stessa app.

Questa guida ha lo scopo di aiutarti a integrare l'API WebView per gli annunci nella tua app iOS.

Prima di iniziare

Prima di iniziare a utilizzare l'API WebView per gli annunci, assicurati di:

Ignorare il controllo dell'identificatore dell'applicazione

Android

Aggiungi il seguente <meta-data> tag nel file AndroidManifest.xml per ignorare il controllo di APPLICATION_ID. Se salti questo passaggio, Google Mobile Ads Flutter Plugin potrebbe generare un IllegalStateException all'avvio dell'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

Aggiorna il file Runner/Info.plist con la chiave e il valore stringa riportati di seguito per ignorare un controllo di GADApplicationIdentifier. Se salti questo passaggio, Google Mobile Ads Flutter Plugin potrebbe generare un GADInvalidInitializationException all'avvio dell'app.

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

Registrare WebViewController

Per migliorare la monetizzazione degli annunci in-app all'interno di un WebViewController che utilizza il codice AdSense o i Tag publisher di Google, segui i passaggi riportati di seguito:

  1. Attiva JavaScript in WebViewController. In caso contrario, gli annunci potrebbero non essere caricati.

  2. Per migliorare l'esperienza pubblicitaria degli utenti e garantire la coerenza con le norme sui cookie di Chrome, attiva i cookie di terze parti nell'istanza AndroidWebViewController.

  3. Registra l'istanza WebViewController chiamando il registerWebView() metodo fornito da Google Mobile Ads Flutter Plugin.

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

Caricare l'URL

Ora puoi caricare un URL e visualizzare i tuoi contenuti web tramite WebViewController. Ti consigliamo di caricare questo URL di test: https://google.github.io/webview-ads/test/ per testare l'integrazione prima di utilizzare il tuo URL. Se JavaScript non è attivato, la pagina web mostrerà un errore.

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

L'URL di test mostra barre di stato verdi per un'integrazione riuscita se si verificano le seguenti condizioni:

  • WebView connesso a Google Mobile Ads Flutter Plugin
  • JavaScript attivato
  • I cookie di terze parti funzionano (non previsto sui dispositivi iOS)
  • I cookie proprietari funzionano

Visualizza il codice sorgente del nostro URL di test. Dopodiché, puoi sostituire l'URL di test con il tuo URL. Puoi anche utilizzare uno strumento proxy come Charles per acquisire il traffico HTTPS della tua app e ispezionare le richieste di annunci per un parametro &scar=.