Integrate the WebView API for Ads

The WebView API for Ads allows in-app ad monetization using WebViewController . If you display web content that implements ads with AdSense code or Google Publisher Tag in your app through WebViewController , you should use this API to enable ads monetization. To learn more, see the AdMob policies .

  1. Monetize by making ad requests with Google Mobile Ads SDK

    You can monetize your app by making ad requests to AdMob with Google Mobile Ads SDK by implementing ad formats for mobile app .

    Learn more .

  2. Monetize by using the WebView API for Ads

    If your app uses WebViewController to display web content that serves ads from Ad Manager or AdSense , use the WebView API for Ads to register WebViewController objects with Google Mobile Ads SDK. The JavaScript in the AdSense code or Google Publisher Tag 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 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:

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 SDK might throw an 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 SDK 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 or Google Publisher Tags , 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 , enable third-party cookies on your AndroidWebViewController instance.

  3. Register the WebViewController instance by calling the registerWebView() method provided by Google Mobile Ads SDK.

  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.

  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 the Google Mobile Ads SDK
  • JavaScript enabled
  • Third-party cookies work (not expected on iOS devices)
  • First-party cookies work

View the source code of our test URL. You can then replace the test URL with your URL. You can also use a proxy tool such as Charles to capture your app's HTTPS traffic and inspect the ad requests for a &scar= parameter.

Create a Mobile Website
View Site in Mobile | Classic
Share by: