WebView内の行動をトラッキングする

WebView内の行動(ページ遷移など)をトラッキングしたい場合に、WebViewトラッキングの機能を利用することで実現可能です。

導入手順

KarteCoreモジュールの導入が必要です。
導入手順の詳細については SDKを導入する をご覧ください。

実装方法

WebViewトラッキングを行う方法として、2種類の方法を提供しています。

  • Webページ内に 計測タグ を設置してトラッキングを行う(推奨)
  • SDKを利用してトラッキングを行う

👍

実装方法を選択する上での考え方

Webページ側にKARTEの計測タグを設置してトラッキングを行う方が取得できる情報量が多いため、基本的には計測タグを設置してトラッキングを行う方法を推奨しております。

Webページ側に手を入れることが難しいなどの場合に限り、SDKを利用してトラッキングを行う方法をご利用ください。


Webページ内に計測タグを設置してトラッキングを行う

Webページ内に計測タグを設置してトラッキングを行う場合は、以下のステップで実装を行います。

  1. Webページ内に計測タグを設置する
  2. WebとAppのユーザーの紐付け処理を実装する

1. Webページ内に計測タグを設置する

計測タグの設置方法については、セットアップしよう(ウェブ) をご覧ください。

なお、既にKARTEをご契約中でWebページに計測タグが設置されている場合は、このステップは不要です。

2. WebとAppのユーザーの紐付け処理を実装する

Webページに計測タグを設置することでページロードに合わせてトラッキングが行われるようになりますが、このままではネイティブSDKでトラッキングした情報(ネイティブアプリ内のユーザー行動)と、計測タグでトラッキングした情報(WebView内のユーザー行動)が、別のユーザー行動としてトラッキングされます。

ネイティブアプリ上の行動とWebページ上での行動を同一のユーザー行動としてトラッキングするために、それぞれのユーザーの紐付け処理を行う必要があります。

📘

紐付け処理によってできること

  • 紐付け前後のネイティブアプリ内のユーザー行動と、WebView内のユーザー行動が紐付く(紐付け後WebView内・ネイティブアプリ内のユーザー行動は同一セッションとして扱われます)
  • 計測タグが発行する全イベントの _source フィールドの値が native_app_webview となる
  • 計測タグが自動発行する req イベントに app_info フィールドが付与される

紐付け処理の実装について

SDKでは2つの紐付け方法を提供しています。
なお利用しているWebViewにより利用可能な紐付け方法が異なりますので、ご注意ください。

ユーザースクリプトを利用した紐付けの実装方法(WKWebView) WKWebViewを利用している場合は、 `WKUserScript` を利用した紐付け処理が可能です。 SDKが用意しているヘルパーメソッドに WKWebView インスタンスを渡すことで、ユーザースクリプトの設定が行われます。

ユーザースクリプトの設定が行われたWebViewでページをロードすることにより、紐付けが行われた状態でトラッキングが行われます。

override func viewDidLoad() {
  super.viewDidLoad()
  let webView = WKWebView(frame: .zero)
  ...
  // 連携用のユーザースクリプトをWebViewに設定する
  UserSync.setUserSyncScript(webView)
  
  // ユーザースクリプトを設定した後で、ページのロード処理を行う
  if let url = URL(string: "https://example.com") {
    let request = URLRequest(url: url)
    webView.load(request)
  }
}
- (void)viewDidLoad {
  [super viewDidLoad];
  WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectZero];
  ...
  // 連携用のユーザースクリプトをWebViewに設定する
  [KRTUserSync setUserSyncScriptWithWebView:webView];
  
  // ユーザースクリプトを設定した後で、ページのロード処理を行う
  NSURL *URL = [NSURL URLWithString:@"https://example.com"];
  NSURLRequest *request = [NSURLRequest requestWithURL:URL];
  [webView loadRequest:request];
}
クエリパラメータを利用した紐付けの実装方法(WKWebView / SFSafariViewController) SDKが用意しているヘルパーメソッドにロードするページのURLを渡すことで、紐付け処理に必要となるクエリパラメータを付加することができます。

紐付け用のクエリパラメータが付加されたURLをWebViewでロードすることにより、紐付けが行われた状態でトラッキングが行われます。

if let baseUrl = URL(string: "https://example.com") {
  // 連携用のパラメータを付与したURLを取得
  let url = UserSync.appendingQueryParameter(baseUrl)
  
  // 連携用パラメータが付与されたURLを利用して、ページのロード処理を行う
  webView.loadRequest(URLRequest(url: url))
}
NSURL *baseURL = [NSURL URLWithString:@"https://example.com"];

// 連携用のパラメータを付与したURLを取得
NSURL *URL = [KRTUserSync appendingQueryParameterWithURL:baseURL];

// 連携用パラメータが付与されたURLを利用して、ページのロード処理を行う
NSURLRequest *request = [NSURLRequest requestWithURL:URL];
[webView loadRequest:request];

🚧

クエリパラメータの有効期限について

クエリパラメータには1分の有効期限を設けており、有効期限が切れている場合は紐付けが行われません。
そのためページをロードする際は、URLに都度クエリパラメータを付与するようにしてください。

🚧

WebView内で発生したイベントをトリガーに接客を配信する際の注意点

WebView内で発生したイベント(_sourcenative_app_webview のイベント)をトリガーに配信される接客サービスはSDKではなくアプリが管理するWebViewにアクションが表示されます。
WebViewがWKWebViewの場合、そのままではアクション内のURLスキームが自動で処理されません。URLスキームを処理するためにはWKWebViewのnavigationDelegateの実装が必要となります。


SDKを利用してトラッキングを行う

ネイティブアプリSDKを利用してトラッキングを行う場合、基本的にWebView内のページ遷移をフックしてトラッキングを行います。

下記は WKWebView における実装例

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
  let title = webView.title ?? "-"
  let url = webView.url?.absoluteString ?? "-"
  Tracker.view("webview", title: title, values: [
    "url": url
  ]
}
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
  NSString *title = webView.title ? webView.title : @"-";
  NSString *url = webView.URL.absoluteString ? webView.URL.absoluteString : @"-";
  [KRTTracker view:@"webview" title:@title values:@{
    @"url": url
  }];
}

なおWebページ内に計測タグが設置されている場合は、WebとAppで別々のユーザーの行動としてトラッキングが行われてしまいます。
これを防ぐために、Webページ内の計測タグを無効にする実装を追加する必要となります。

WebView で開くページの URL にクエリパラメータとして _karte_tracker_deactivate=true を付加してください。

override func viewDidLoad() {
  super.viewDidLoad()
    
  if let url = URL(string: "https://example.com?_karte_tracker_deactivate=true") {
    webView.load(URLRequest(url: url))
  }
}
- (void)viewDidLoad {
  [super viewDidLoad];
  
  NSURL *url = [NSURL URLWithString:@"https://example.com?_karte_tracker_deactivate=true"];
  [webView loadRequest:[NSURLRequest requestWithURL:url]];
}

検証方法

Webページ内に計測タグを設置してトラッキングを行う場合

管理画面のユーザーストーリー画面で、Webページ上での行動がネイティブアプリ上での行動として扱われているか確認してください。

計測タグ経由でトラッキングされた閲覧イベントに APP アイコンが付いていれば、ネイティブアプリ上での行動として扱われております。

SDKを利用してトラッキングを行う場合

通常のイベントトラッキングと同様に、管理画面のユーザーストーリー画面で送信したイベントが計測されているか確認してください。

Updated about a month ago

WebView内の行動をトラッキングする


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.