The WebView API for Ads allows in-app ad monetization using
[`WebViewController`](https://pub.dev/documentation/webview_flutter/latest/webview_flutter/WebViewController-class.html).
If you display web content that implements ads with
[AdSense code](https://support.google.com/adsense/answer/9274634) or
[Google Publisher Tag](https://support.google.com/admanager/answer/181073)
in your app through `WebViewController`, you should use this API to enable ads
monetization. To learn more, see the

[AdSense](https://support.google.com/adsense/answer/48182#trs)
and [Ad Manager](https://support.google.com/admanager/answer/6310245) policies.


![](https://developers.google.com/static/ad-manager/mobile-ads-sdk/images/webview/monetization-paths-paw.svg)

1.

   Monetize by making ad requests with Google Mobile Ads Flutter Plugin

   :   You can monetize your app by making ad requests to

       Ad Manager with
       Google Mobile Ads Flutter Plugin by implementing [ad formats for mobile
       app](https://support.google.com/admanager/answer/6238696).


       [Learn more](https://developers.google.com/ad-manager/mobile-ads-sdk/flutter/quick-start.md.txt).
2.

   Monetize by using the WebView API for Ads

   :   If your app uses `WebViewController` to display web content that serves ads from
       [Ad Manager](https://support.google.com/admanager) or
       [AdSense](https://support.google.com/adsense), use the WebView API for Ads to register
       `WebViewController` objects with Google Mobile Ads Flutter Plugin. The
       JavaScript in the [AdSense code](https://support.google.com/adsense/answer/9274634)
       or [Google Publisher Tag](https://support.google.com/admanager/answer/181073)
       builds and sends ad requests so you don't need to make any ad requests with
       the SDK. Keep in mind that only the mobile web and desktop web
       [inventory formats](https://support.google.com/admanager/answer/9796545)
       are available using this API.

       If you don't own the web content in a `WebViewController`, you are still
       encouraged to use this API to help protect advertisers from spam and
       improve monetization for the web publishers that provided the content.

Note that you can do either option, or even both, in the same app.

This guide is intended to help you integrate the WebView API for Ads into your
iOS app.

## Before you begin

Before you start using the WebView API for Ads, make sure you do the following:

- Use [Google Mobile Ads Flutter Plugin for Flutter plugin](https://developers.google.com/ad-manager/mobile-ads-sdk/flutter/quick-start.md.txt#import_the_mobile_ads_sdk) with version 3.0.0 or higher in your app.
- Add [`webview_flutter`](https://pub.dev/packages/webview_flutter) as a dependency in your `pubspec.yaml` file.
- Add [`webview_flutter_android`](https://pub.dev/packages/webview_flutter_android) with version 3.7.0 or higher in your app.

## Bypass the check for application identifier

### Android

Add the following `<meta-data>` tag in your `AndroidManifest.xml` file to
bypass the check for the `APPLICATION_ID`. If you miss this step,
Google Mobile Ads Flutter Plugin might throw an
[`IllegalStateException`](https://developer.android.com/reference/java/lang/IllegalStateException)
on app start.

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

### iOS

Update the `Runner/Info.plist` file with the key and string value below to
bypass a check for the `GADApplicationIdentifier`. If you miss this step,
Google Mobile Ads Flutter Plugin might throw a `GADInvalidInitializationException`
on app start.

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

## Register the WebViewController

To improve in-app ad monetization of ads within a
`WebViewController` that uses [AdSense
code](https://support.google.com/adsense/answer/9274634) or [Google Publisher
Tags](https://support.google.com/admanager/answer/181073), follow the steps
listed below:

1. Enable JavaScript in the `WebViewController`. Failure to do so can cause
   ads not to load.

2. To improve your users' ad experience and be consistent with Chrome's
   [cookie policy](https://policies.google.com/technologies/cookies), enable
   third-party cookies on your `AndroidWebViewController` instance.

3. Register the `WebViewController` instance by calling the
   [`registerWebView()`](https://pub.dev/documentation/google_mobile_ads/latest/google_mobile_ads/MobileAds/registerWebView.html)
   method provided by Google Mobile Ads Flutter Plugin.

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

## Load the URL

You can now load a URL and display your web content through `WebViewController`.
We recommend that you load this test URL:
`https://google.github.io/webview-ads/test/` to test the integration prior to
using your own URL. The web page will show an error if JavaScript is not
enabled.

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

The test URL shows green status bars for a successful integration if the
following conditions apply:

- `WebView` connected to Google Mobile Ads Flutter Plugin
- JavaScript enabled
- Third-party cookies work (not expected on iOS devices)
- First-party cookies work

View the [source code](https://github.com/google/webview-ads/blob/main/test/index.html)
of our test URL. You can then replace the test URL with your URL. You can also
use a proxy tool such as [Charles](https://www.charlesproxy.com/) to capture your
app's HTTPS traffic and inspect the ad requests for a `&scar=` parameter.

![](https://developers.google.com/static/ad-manager/mobile-ads-sdk/images/webview/flutter-confirm.png)