WKWebView をセットアップする

アプリで WKWebView を使用してウェブ コンテンツを表示する場合は、広告でコンテンツを最適に収益化できるように構成することをおすすめします。

このガイドでは、WKWebView オブジェクトの構成方法に関する情報を提供する方法について説明します。

メディア コンテンツ

デフォルトの WKWebView 設定は動画広告向けに最適化されていません。WKWebViewConfiguration API を使用して、インライン再生と動画の自動再生用に WKWebView を構成します。

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];
}

ウェブビューのコンテンツを読み込む

Cookie とページの URL はウェブビューの収益化に重要であり、load(_:) がネットワークベースの URL で使用されている場合にのみ、想定どおりに機能します。WKWebView のパフォーマンスを最適化するには、ネットワーク ベースの 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];
}

ウェブビューをテストする

アプリの開発中は、次のテスト URL を読み込むことをおすすめします。

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

これらの設定が広告に意図したとおりに反映されていることを確認します。次の条件が満たされている場合、テスト URL には統合が完了したことを示す成功基準が表示されます。

ウェブビューの設定

  • ファーストパーティ Cookie の仕組み
  • JavaScript が有効になっている

動画広告

  • 動画広告がインラインで再生され、全画面表示の組み込みプレーヤーで開かない
  • 再生ボタンをクリックしなくても動画広告が自動再生される
  • 動画広告を再生できる

テストが完了したら、テスト URL をウェブビューで読み込む URL に置き換えます。