Set up WKWebView

If your app utilizes WKWebView to display web content, it's recommended to configure it so that content can be optimally monetized with ads.

This guide shows you how to provide information about how to configure a WKWebView object.

Media Content

Default WKWebView settings are not optimized for video ads. Use the WKWebViewConfiguration APIs to configure your WKWebView for inline playback and automatic video play.

Swift

  import 
  
 WebKit 
 class 
  
 ViewController 
 : 
  
 UIViewController 
  
 { 
  
 var 
  
 webView 
 : 
  
 WKWebView 
 ! 
  
 override 
  
 func 
  
 viewDidLoad 
 () 
  
 { 
  
 super 
 . 
 viewDidLoad 
 () 
  
 // Initialize a WKWebViewConfiguration object. 
  
 let 
  
 webViewConfiguration 
  
 = 
  
 WKWebViewConfiguration 
 () 
  
 // Let HTML videos with a "playsinline" attribute play inline. 
  
 webViewConfiguration 
 . 
 allowsInlineMediaPlayback 
  
 = 
  
 true 
  
 // Let HTML videos with an "autoplay" attribute play automatically. 
  
 webViewConfiguration 
 . 
 mediaTypesRequiringUserActionForPlayback 
  
 = 
  
 [] 
  
 // Initialize the WKWebView with your WKWebViewConfiguration object. 
  
 webView 
  
 = 
  
 WKWebView 
 ( 
 frame 
 : 
  
 view 
 . 
 frame 
 , 
  
 configuration 
 : 
  
 webViewConfiguration 
 ) 
  
 view 
 . 
 addSubview 
 ( 
 webView 
 ) 
  
 } 
 } 
 

Objective-C

  @import 
  
 WebKit 
 ; 
 #import "ViewController.h" 
 @interface 
 ViewController 
  
 () 
 @property 
 ( 
 nonatomic 
 , 
  
 strong 
 ) 
  
 WKWebView 
  
 * 
 webView 
 ; 
 @end 
 @implementation 
 ViewController 
 - 
 ( 
 void 
 ) 
 viewDidLoad 
  
 { 
  
 [ 
 super 
  
 viewDidLoad 
 ]; 
  
 // Initialize a WKWebViewConfiguration object. 
  
 WKWebViewConfiguration 
  
 * 
 webViewConfiguration 
  
 = 
  
 [[ 
 WKWebViewConfiguration 
  
 alloc 
 ] 
  
 init 
 ]; 
  
 // Let HTML videos with a "playsinline" attribute play inline. 
  
 webViewConfiguration 
 . 
 allowsInlineMediaPlayback 
  
 = 
  
 YES 
 ; 
  
 // Let HTML videos with an "autoplay" attribute play automatically. 
  
 webViewConfiguration 
 . 
 mediaTypesRequiringUserActionForPlayback 
  
 = 
  
 WKAudiovisualMediaTypeNone 
 ; 
  
 // Initialize the WKWebView with your WKWebViewConfiguration object. 
  
 self 
 . 
 webView 
  
 = 
  
 [[ 
 WKWebView 
  
 alloc 
 ] 
  
 initWithFrame 
 : 
 self 
 . 
 view 
 . 
 frame 
  
 configuration 
 : 
 webViewConfiguration 
 ]; 
  
 [ 
 self 
 . 
 view 
  
 addSubview 
 : 
 self 
 . 
 webView 
 ]; 
 } 
 

Load web view content

Cookies and page URLs are important for web view monetization and only function as expected when load(_:) is used with a network-based URL. For optimized WKWebView performance, we strongly recommend loading web content from a network-based URL.

Swift

  import 
  
 WebKit 
 var 
  
 webview 
 : 
  
 WKWebview 
 ! 
 class 
  
 ViewController 
 : 
  
 UIViewController 
  
 { 
  
 override 
  
 func 
  
 viewDidLoad 
 () 
  
 { 
  
 super 
 . 
 viewDidLoad 
 () 
  
 // Initialize a WKWebViewConfiguration object. 
  
 let 
  
 webViewConfiguration 
  
 = 
  
 WKWebViewConfiguration 
 () 
  
 // Let HTML videos with a "playsinline" attribute play inline. 
  
 webViewConfiguration 
 . 
 allowsInlineMediaPlayback 
  
 = 
  
 true 
  
 // Let HTML videos with an "autoplay" attribute play automatically. 
  
 webViewConfiguration 
 . 
 mediaTypesRequiringUserActionForPlayback 
  
 = 
  
 [] 
  
 // Initialize the WKWebView with your WKWebViewConfiguration object. 
  
 webView 
  
 = 
  
 WKWebView 
 ( 
 frame 
 : 
  
 view 
 . 
 frame 
 , 
  
 configuration 
 : 
  
 webViewConfiguration 
 ) 
  
 view 
 . 
 addSubview 
 ( 
 webView 
 ) 
  
  // Load the URL for optimized web view performance. 
  
 guard 
  
 let 
  
 url 
  
 = 
  
 URL 
 ( 
 string 
 : 
  
 "https://google.github.io/webview-ads/test/" 
 ) 
  
 else 
  
 { 
  
 return 
  
 } 
  
 let 
  
 request 
  
 = 
  
 URLRequest 
 ( 
 url 
 : 
  
 url 
 ) 
  
 webView 
 . 
 load 
 ( 
 request 
 ) 
  
 } 
 } 
 

Objective-C

  @import 
  
 WebKit 
 ; 
 #import "ViewController.h" 
 @interface 
 ViewController 
  
 () 
 @property 
 ( 
 nonatomic 
 , 
  
 strong 
 ) 
  
 WKWebView 
  
 * 
 webView 
 ; 
 @end 
 @implementation 
 ViewController 
 - 
 ( 
 void 
 ) 
 viewDidLoad 
  
 { 
  
 [ 
 super 
  
 viewDidLoad 
 ]; 
  
 // Initialize a WKWebViewConfiguration object. 
  
 WKWebViewConfiguration 
  
 * 
 webViewConfiguration 
  
 = 
  
 [[ 
 WKWebViewConfiguration 
  
 alloc 
 ] 
  
 init 
 ]; 
  
 // Let HTML videos with a "playsinline" attribute play inline. 
  
 webViewConfiguration 
 . 
 allowsInlineMediaPlayback 
  
 = 
  
 YES 
 ; 
  
 // Let HTML videos with an "autoplay" attribute play automatically. 
  
 webViewConfiguration 
 . 
 mediaTypesRequiringUserActionForPlayback 
  
 = 
  
 WKAudiovisualMediaTypeNone 
 ; 
  
 // Initialize the WKWebView with your WKWebViewConfiguration object. 
  
 self 
 . 
 webView 
  
 = 
  
 [[ 
 WKWebView 
  
 alloc 
 ] 
  
 initWithFrame 
 : 
 self 
 . 
 view 
 . 
 frame 
  
 configuration 
 : 
 webViewConfiguration 
 ]; 
  
 [ 
 self 
 . 
 view 
  
 addSubview 
 : 
 self 
 . 
 webview 
 ]; 
  
  // Load the URL for optimized web view performance. 
  
 NSURL 
  
 * 
 url 
  
 = 
  
 [ 
 NSURL 
  
 URLWithString 
 : 
 @"https://google.github.io/webview-ads/test/" 
 ]; 
  
 NSURLRequest 
  
 * 
 request 
  
 = 
  
 [ 
 NSURLRequest 
  
 requestWithURL 
 : 
 url 
 ]; 
  
 [ 
 webView 
  
 loadRequest 
 : 
 request 
 ]; 
 } 
 

Test the web view

During app development, we recommend that you load this test URL:

  https://google.github.io/webview-ads/test/ 
 

to verify these settings have the intended effect on ads. The test URL has success criteria for a complete integration if the following are observed:

Web view settings

  • First-party cookies work
  • JavaScript enabled

Video ad

  • The video ad plays inline and does not open in the full screen built-in player
  • The video ad plays automatically without clicking the play button
  • The video ad is replayable

After testing is complete, substitute the test URL with the URL the web view intends to load.

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