Otimizar o comportamento de clique do WKWebView

Caso seu iOS app use WKWebView para exibir conteúdo da Web, você pode para otimizar o comportamento de cliques pelos seguintes motivos:

  • WKWebView não oferecer suporte à navegação por guias. Cliques no anúncio que tentam abrir uma nova guia não fazem nada padrão.

  • Cliques em anúncios que abrem na mesma guia atualizam a página. Talvez você queira forçar cliques no anúncio para abrir fora da WKWebView, por exemplo, se você hospedar o H5 jogos e querem mantêm o estado de cada jogo.

  • O Preenchimento automático não é compatível com informações de cartão de crédito nos países WKWebView. Isso poderia levam a menos conversões de comércio eletrônico para os anunciantes, afetando negativamente da monetização do conteúdo da Web.

Este guia fornece etapas recomendadas para otimizar o comportamento de cliques em dispositivos móveis visualizações da Web, preservando o conteúdo de visualização da Web.

Pré-requisitos

Implementação

Os links de anúncio podem ter o atributo de destino href definido como _blank, _top _self ou _parent. Com o Ad Manager, é possível controlar o atributo de destino como _blank ou _top. definindo os anúncios para serem abertos em uma nova guia ou janela. Os links de anúncio também podem conter funções JavaScript, como window.open(url, "_blank").

A tabela a seguir descreve como cada um desses links se comporta em uma visualização da Web.

href atributo de destino Comportamento de clique WKWebView padrão
target="_blank" Link não processado pela visualização da Web.
target="_top" Atualize o link na visualização da Web atual.
target="_self" Atualize o link na visualização da Web atual.
target="_parent" Atualize o link na visualização da Web atual.
Função JavaScript Comportamento de clique WKWebView padrão
window.open(url, "_blank") Link não processado pela visualização da Web.

Siga estas etapas para otimizar o comportamento de clique na sua InstânciaWKWebView :

  1. Definir o WKUIDelegate no seu WKWebView instância.

  2. Configure o WKNavigationDelegate no seu WKWebView.

  3. Determine se é preciso otimizar o comportamento do URL de clique.

    • Verifique se a propriedade navigationType está O objeto WKNavigationAction é uma tipo de clique que você quer otimizar. O snippet de código verifica para .linkActivated que só se aplica a cliques em um link com um atributo href.

    • Confira o targetFrame no objeto WKNavigationAction. Se ele retornar nil, significa que o destino da navegação é uma nova janela. Como WKWebView não suporta clique, eles precisarão ser controlados manualmente.

  4. Decida se quer abrir o URL em um navegador externo SFSafariViewController, ou a visualização da Web atual. O snippet de código mostra como abrir URLs que saem da página do site apresentando um SFSafariViewController.

Exemplo de código

O snippet de código a seguir mostra como otimizar o comportamento de clique da visualização da Web. Conforme um exemplo, ela verifica se o domínio atual é diferente do domínio de destino. Essa é apenas uma abordagem, já que os critérios usados podem variar.

Swift

import GoogleMobileAds
import SafariServices
import WebKit

class ViewController: UIViewController, WKNavigationDelegate, WKUIDelegate {

  override func viewDidLoad() {
    super.viewDidLoad()

    // ... Register the WKWebView.

    // 1. Set the WKUIDelegate on your WKWebView instance.
    webView.uiDelegate = self;
    // 2. Set the WKNavigationDelegate on your WKWebView instance.
    webView.navigationDelegate = self
  }

  // Implement the WKUIDelegate method.
  func webView(
      _ webView: WKWebView,
      createWebViewWith configuration: WKWebViewConfiguration,
      for navigationAction: WKNavigationAction,
      windowFeatures: WKWindowFeatures) -> WKWebView? {
    guard let url = navigationAction.request.url,
        let currentDomain = webView.url?.host,
        let targetDomain = url.host else { return nil }

    // 3. Determine whether to optimize the behavior of the click URL.
    if didHandleClickBehavior(
        url: url,
        currentDomain: currentDomain,
        targetDomain: targetDomain,
        navigationAction: navigationAction) {
      print("URL opened in SFSafariViewController.")
    }

    return nil
  }

  // Implement the WKNavigationDelegate method.
  func webView(
      _ webView: WKWebView,
      decidePolicyFor navigationAction: WKNavigationAction,
      decisionHandler: @escaping (WKNavigationActionPolicy) -> Void)
  {
    guard let url = navigationAction.request.url,
        let currentDomain = webView.url?.host,
        let targetDomain = url.host else { return decisionHandler(.cancel) }

    // 3. Determine whether to optimize the behavior of the click URL.
    if didHandleClickBehavior(
        url: url,
        currentDomain: currentDomain,
        targetDomain: targetDomain,
        navigationAction: navigationAction) {
      return decisionHandler(.cancel)
    }

    decisionHandler(.allow)
  }

  // Implement a helper method to handle click behavior.
  func didHandleClickBehavior(
      url: URL,
      currentDomain: String,
      targetDomain: String,
      navigationAction: WKNavigationAction) -> Bool {
    // Check if the navigationType is a link with an href attribute or
    // if the target of the navigation is a new window.
    guard navigationAction.navigationType == .linkActivated ||
      navigationAction.targetFrame == nil,
      // If the current domain does not equal the target domain,
      // the assumption is the user is navigating away from the site.
      currentDomain != targetDomain else { return false }

    // 4.  Open the URL in a SFSafariViewController.
    let safariViewController = SFSafariViewController(url: url)
    present(safariViewController, animated: true)
    return true
  }
}

Objective-C

@import GoogleMobileAds;
@import SafariServices;
@import WebKit;

@interface ViewController () <WKNavigationDelegate, WKUIDelegate>

@property(nonatomic, strong) WKWebView *webView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // ... Register the WKWebView.

  // 1. Set the WKUIDelegate on your WKWebView instance.
  self.webView.uiDelegate = self;
  // 2. Set the WKNavigationDelegate on your WKWebView instance.
  self.webView.navigationDelegate = self;
}

// Implement the WKUIDelegate method.
- (WKWebView *)webView:(WKWebView *)webView
  createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration
             forNavigationAction:(WKNavigationAction *)navigationAction
                  windowFeatures:(WKWindowFeatures *)windowFeatures {
  NSURL *url = navigationAction.request.URL;
  NSString *currentDomain = webView.URL.host;
  NSString *targetDomain = navigationAction.request.URL.host;

  // 3. Determine whether to optimize the behavior of the click URL.
  if ([self didHandleClickBehaviorForURL: url
      currentDomain: currentDomain
      targetDomain: targetDomain
      navigationAction: navigationAction]) {
    NSLog(@"URL opened in SFSafariViewController.");
  }

  return nil;
}

// Implement the WKNavigationDelegate method.
- (void)webView:(WKWebView *)webView
    decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction
                    decisionHandler:
                        (void (^)(WKNavigationActionPolicy))decisionHandler {
  NSURL *url = navigationAction.request.URL;
  NSString *currentDomain = webView.URL.host;
  NSString *targetDomain = navigationAction.request.URL.host;

  // 3. Determine whether to optimize the behavior of the click URL.
  if ([self didHandleClickBehaviorForURL: url
      currentDomain: currentDomain
      targetDomain: targetDomain
      navigationAction: navigationAction]) {

    decisionHandler(WKNavigationActionPolicyCancel);
    return;
  }

  decisionHandler(WKNavigationActionPolicyAllow);
}

// Implement a helper method to handle click behavior.
- (BOOL)didHandleClickBehaviorForURL:(NSURL *)url
                       currentDomain:(NSString *)currentDomain
                        targetDomain:(NSString *)targetDomain
                    navigationAction:(WKNavigationAction *)navigationAction {
  if (!url || !currentDomain || !targetDomain) {
    return NO;
  }

  // Check if the navigationType is a link with an href attribute or
  // if the target of the navigation is a new window.
  if ((navigationAction.navigationType == WKNavigationTypeLinkActivated
      || !navigationAction.targetFrame)
      // If the current domain does not equal the target domain,
      // the assumption is the user is navigating away from the site.
      && ![currentDomain isEqualToString: targetDomain]) {

     // 4.  Open the URL in a SFSafariViewController.
    SFSafariViewController *safariViewController =
        [[SFSafariViewController alloc] initWithURL:url];
    [self presentViewController:safariViewController animated:YES
        completion:nil];
    return YES;
  }

  return NO;
}

Testar a navegação nas páginas

Para testar suas alterações de navegação nas páginas, carregue

https://webview-api-for-ads-test.glitch.me#click-behavior-tests

na sua visualização da Web. Clique em cada um dos diferentes tipos de links para ver como eles se comportarem no seu app.

Veja alguns pontos a serem verificados:

  • Cada link abre o URL pretendido.
  • Ao retornar ao aplicativo, o contador da página de teste não será redefinido como zero para confirmar que o estado da página foi preservado.