[Feature Request] WebView API for Ads

[yo1106]

I want this on Flutter.
https://support.google.com/admanager/answer/11893859

[huycozy]

Hi @yo1106, thanks for filing the issue. Labeling this issue as a feature request.

[LakhV]

It's highly desired feature in my project to register flutter webview to allow AdSense ads. Thanks.

[timothyhoang-google]

Feature support for the WebView API is currently planned and will leverage webview_flutter. The tentative timeline for implementing this feature is Q4 2022.

[TUGTEN]

Will Google accept if I run my ads on the flutter framework's webview widget? Because my account kept getting policy violations that said invalid traffic. Not sure if google labels traffic from webviews as invalid traffic. Is there a temporary workaround to this?

[timothyhoang-google]

Google mobile ads rendered in WebViews must meet the technical requirements for web content viewing frames. If they do not, this violates policy.

I'll defer to @bparrishMines on whether there is a workaround to share.

[TUGTEN]

Is there no workaround for this? I am losing revenue and my wordpress website is being suspended for invalid traffic.

[bparrishMines]

This isn't directly supported by the webview_flutter plugin at the moment, but you can access a workaround with the current api. However, this workaround affects every WebView when it is created.

You'll need to:

1. Add the webview_flutter plugin to your app.
2. Add the google_mobile_ads plugin to your app or include the GMA SDK in your gradle/podspec.
3. Override the host apis of the platform WebViews in each platform's main app file. Example are shown below:

Android android/app/src/main/java/...../MainActivity.java:

import android.webkit.WebView;
import androidx.annotation.NonNull;
import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugins.webviewflutter.GeneratedAndroidWebView;
import io.flutter.plugins.webviewflutter.WebViewFlutterPlugin;
import io.flutter.plugins.webviewflutter.WebViewHostApiImpl;

public class MainActivity extends FlutterActivity {
  @Override
  public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
    super.configureFlutterEngine(flutterEngine);

    final WebViewFlutterPlugin webViewPlugin =
        (WebViewFlutterPlugin) flutterEngine.getPlugins().get(WebViewFlutterPlugin.class);

    final WebViewHostApiImpl apiImpl =
        new WebViewHostApiImpl(
            webViewPlugin.getInstanceManager(), new WebViewHostApiImpl.WebViewProxy(), this, null) {

          @Override
          public void create(Long instanceId, Boolean useHybridComposition) {
            super.create(instanceId, useHybridComposition);
            final WebView webView = getInstanceManager().getInstance(instanceId);
            // MobileAds.registerWebView(webView);
          }
        };
    GeneratedAndroidWebView.WebViewHostApi.setup(flutterEngine.getDartExecutor(), apiImpl);
  }
}

Ios ios/Runner/AppDelegate.m (Note that this could also be AppDelegate.swift. I'm not familiar with swift, so someone else may need to provide the example for it).

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"

@import webview_flutter_wkwebview;

@interface MyWebViewHostApi : FWFWebViewHostApiImpl
// InstanceManager must be weak to prevent a circular reference with the object it stores.
@property(nonatomic, weak) FWFInstanceManager *instanceManager;
@end

@implementation MyWebViewHostApi
- (instancetype)initWithBinaryMessenger:(id<FlutterBinaryMessenger>)binaryMessenger
                        instanceManager:(FWFInstanceManager *)instanceManager {
  self = [super initWithBinaryMessenger:binaryMessenger instanceManager:instanceManager];
  if (self) {
    _instanceManager = instanceManager;
  }
  return self;
}

- (void)createWithIdentifier:(NSNumber *)identifier configurationIdentifier:(NSNumber *)configurationIdentifier error:(FlutterError * _Nullable __autoreleasing *)error {
  [super createWithIdentifier:identifier configurationIdentifier:configurationIdentifier error:error];
  WKWebView *webView = (WKWebView *) [self.instanceManager instanceForIdentifier:identifier.longValue];
  // Setup WebView for Ads
}
@end

@implementation AppDelegate.m
- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GeneratedPluginRegistrant registerWithRegistry:self];
  
  FWFInstanceManager *instanceManager = (FWFInstanceManager *) [self valuePublishedByPlugin:@"FLTWebViewFlutterPlugin"];
  
  NSObject<FlutterPluginRegistrar>* registrar = [self registrarForPlugin:@""];
  id<FlutterBinaryMessenger> binaryMessenger = registrar.messenger;
  
  MyWebViewHostApi *webViewHostApi = [[MyWebViewHostApi alloc] initWithBinaryMessenger:binaryMessenger instanceManager:instanceManager];
  FWFWKWebViewHostApiSetup(binaryMessenger, webViewHostApi);
  
  // Override point for customization after application launch.
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

I will also encourage that you read through https://developers.google.com/ad-manager/mobile-ads-sdk/android/webview and https://developers.google.com/ad-manager/mobile-ads-sdk/ios/webview for full guidelines.

[TUGTEN]

Sorry for the delayed response. I can confirm that this works on Android

Steps followed:

1. Add Google Mobile Ads as a dependency in app/build.gradle file.

dependencies{
    implementation 'com.google.android.gms:play-services-ads:21.3.0'
}

3. Add <meta-data> tag in AndroidManifest.xml inside <application>

       <meta-data
           android:name="com.google.android.gms.ads.INTEGRATION_MANAGER"
           android:value="webview"/>

4. Change MainActivity.java to

import android.os.Bundle;
import android.webkit.WebView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import com.google.android.gms.ads.MobileAds;
import com.google.android.gms.ads.initialization.InitializationStatus;
import com.google.android.gms.ads.initialization.OnInitializationCompleteListener;

import io.flutter.plugins.GeneratedPluginRegistrant;

import io.flutter.plugins.webviewflutter.GeneratedAndroidWebView;
import io.flutter.plugins.webviewflutter.WebViewFlutterPlugin;
import io.flutter.plugins.webviewflutter.WebViewHostApiImpl;

public class MainActivity extends FlutterActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        MobileAds.initialize(this, new OnInitializationCompleteListener() {
            @Override
            public void onInitializationComplete(InitializationStatus initializationStatus) {
            }
        });

    }

    @Override
  public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
    super.configureFlutterEngine(flutterEngine);

    final WebViewFlutterPlugin webViewPlugin =
        (WebViewFlutterPlugin) flutterEngine.getPlugins().get(WebViewFlutterPlugin.class);

    final WebViewHostApiImpl apiImpl =
        new WebViewHostApiImpl(
            webViewPlugin.getInstanceManager(), new WebViewHostApiImpl.WebViewProxy(), this, null) {

          @Override
          public void create(Long instanceId, Boolean useHybridComposition) {
            super.create(instanceId, useHybridComposition);
            final WebView webView = getInstanceManager().getInstance(instanceId);
            MobileAds.registerWebView(webView); //Important
          }
        };
    GeneratedAndroidWebView.WebViewHostApi.setup(flutterEngine.getDartExecutor(), apiImpl);
  }
}

Note: while adding dependencies, resolve versioning issues with gradle, accordingly

[timothyhoang-google]

Feature support for the WebView API is still in progress and depends on changes in webview_flutter that will launch in early Q1 2023. The tentative timeline for launching this feature is now early Q1 2022.

[iexpertini]

Hi,

Can it be confirmed if Flutter Webview Plug-in supports WebView API for ads now?

If not still supported please can anyone provide the method to implement it using the Flutter WebView Plugin.

Thanks

[timothyhoang-google]

@iexpertini - Support for the WebView API for Ads is still in development and planned for a Q1 release this year. If you need to support this API sooner, please check @bparrishMines workaround above.

[sandandkush]

Are we there yet?

[timothyhoang-google]

The WebView API for Ads is supported as of version 3.0.0 (changelog).

@jjliu15 - FYI, we'll need to update the changelog for the GitHub repo.