Mobile Ads integration via Flutter_inappwebview

[dprodigalson]

Environment

Windows

Flutter version: 3.3.6 Plugin version: 5.7.1 Android version: 19 iOS version: NA Xcode version: NA Device information: NA

Description

I am trying to port a website as mobile app using Flutter inappwebview plugin.

This website is integrated with google Ads. So trying to integrate with Mobile ads plugin

so that google Ads best practices are met following this google support docs.

Mobile ads uses webview_flutter plugin but I really like this inappwebview plugin

Can you please provide a way to access the underlying webview from InAppWebviewController and find its (identifier)key->Int because all the Mobile Ads plugin does here with registerWebView is the following ?

await instanceManager.channel.invokeMethod<void>(
                    'MobileAds#registerWebView',
                    <dynamic, dynamic>{
                      'webViewId': webViewKey,
                    },
                  );

As of now, am clueless how to find the underlying webview (identifier) key and invoke the MethodChannel instance's unimplemented methods using InappWebviewController object.

My App State block code goes like this.

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    super.initState();
  }

  final GlobalKey webViewKey = GlobalKey();

  InAppWebViewController? webViewController;
  InAppWebViewGroupOptions groupOptions = InAppWebViewGroupOptions(
      crossPlatform: InAppWebViewOptions(useShouldOverrideUrlLoading: true),
      android: AndroidInAppWebViewOptions(
          useHybridComposition: true, builtInZoomControls: false));

  @override
  Widget build(BuildContext context) {

    return WillPopScope(
        onWillPop: () async {
          if (widget.browser.isOpened()) {
            await widget.browser.close();
          }
          return Future.value(true);
        },
        child: Scaffold(
            appBar: BlankBar(),
            body: Builder(builder: (BuildContext context) {
              return InAppWebView(
                key: webViewKey,
                initialUrlRequest: URLRequest(url: Uri.parse("https://webview-api-for-ads-test.glitch.me/")),
                initialOptions: groupOptions,
                onWebViewCreated: (controller) async {
                  *//This line not works as MobileAds needs Webview_flutter's controller*
                  //MobileAds.instance.registerWebView(controller);

                  *//Tried this workaround but not works.*
                  /*await instanceManager.channel.invokeMethod<void>(
                    'MobileAds#registerWebView',
                    <dynamic, dynamic>{
                      'webViewId': webViewKey,
                    },
                  );*/
                },
                onLoadStart: (controller, url) {},
                onLoadStop: (controller, url) async {},
                onLoadError: (controller, url, code, message) {},
                onProgressChanged: (controller, progress) {},
                onUpdateVisitedHistory: (controller, url, androidIsReload) {},
                onConsoleMessage: (controller, consoleMessage) {
                  print(consoleMessage);
                },
              );
            })));
  }
}

What you'd like to happen:

I would like to figure out a way to integrate Mobile_Ads with Flutter_inappwebview. Posted this Stackoverflow question as well

Alternatives you've considered:

Alternative is to use webview_flutter Or please suggest any other better ways to handle this ?

[github-actions[bot]]

👋 @dprodigalson

NOTE: This comment is auto-generated.

Are you sure you have already searched for the same problem?

Some people open new issues but they didn't search for something similar or for the same issue. Please, search for it using the GitHub issue search box or on the official inappwebview.dev website, or, also, using Google, StackOverflow, etc. before posting a new one. You may already find an answer to your problem!

If this is really a new issue, then thank you for raising it. I will investigate it and get back to you as soon as possible. Please, make sure you have given me as much context as possible! Also, if you didn't already, post a code example that can replicate this issue.

In the meantime, you can already search for some possible solutions online! Because this plugin uses native WebView, you can search online for the same issue adding android WebView [MY ERROR HERE] or ios WKWebView [MY ERROR HERE] keywords.

Following these steps can save you, me, and other people a lot of time, thanks!

[dprodigalson]

@pichillilorenzo any thoughts on this ?

[danieladamsGDM]

This is would help greatly in my current project.

[ferdinandfrank]

@dprodigalson @danieladamsGDM Did you find a solution to register the webview on the Google Ads SDK? Or have any ideas on how to retrieve the native webViewId for registration, so I can try myself on a PR?

[nemscep]

@danieladamsGDM @ferdinandfrank @dprodigalson Any updates on this? 😅

[pichillilorenzo]

The Mobile Ads plugin is using the webview controller of the webview_flutter plugin, which works differently.

One way to do this would be using native code, but currently, there aren't external APIs to work with. Probably, this is something that will be added in the next major version 7.0.0 of this plugin.