WebViewのトラッキングを行う

WebView内のユーザーの行動をトラッキングする方法として、現在2種類方法を提供しております。

  • Webページ内に計測タグを設置してトラッキング(推奨)
  • ネイティブアプリSDKを利用してトラッキング

なお「Webページ内に計測タグを設置してトラッキング」の方が、実装の手間が少なく、取得できる情報量も多いため、こちらで実装することを推奨致します。

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

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

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

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

計測タグの設置方法については こちら を参考にして下さい。

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

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

計測タグを設置しただけでは、ネイティブアプリSDKでトラッキングした情報と、計測タグでトラッキングした情報は、それぞれ別のユーザーの行動として扱われます。
そのため紐付け前後の WebView 内のユーザー行動と、ネイティブアプリ内の行動を統合するために、ユーザーの紐付け処理を実装する必要があります。

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

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

紐付け処理の実装方法
現在2つの紐付け方法を提供しており、いずれかの方法により実装を行なってください。
なお、利用しているWebViewの種類により利用可能な紐付け方法が異なりますので、ご注意ください。

  • ユーザースクリプトを利用した紐付け (WKWebViewのみ)
  • クエリパラメータを利用した紐付け (WKWebView / UIWebView / SFSafariViewController)

ユーザースクリプトを利用した紐付け

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

override func viewDidLoad() {
  super.viewDidLoad()
  let webView = WKWebView(frame: .zero)
  ...
  KarteTrackerJsUtil.setUserSyncScript(with: webView)
}
- (void)viewDidLoad {
  [super viewDidLoad];
  WKWebView *webView = [[WKWebView alloc] initWithFrame:xxxx];
  ...
  // 連携用のユーザースクリプトをWebViewに設定する
  [KarteTrackerJsUtil setUserSyncScriptWithWebView:webView];
}

制限事項

この機能は iOS SDK v1.6.2 から対応しています。

クエリパラメータを利用した紐付け

SDK が用意しているヘルパーメソッドに URL を渡すことで、紐付け処理に必要となるクエリパラメータが付加された状態の URL を得ることができます。

url = KarteTrackerJsUtil.URLByAppendingUserSyncQueryParameter(appKey: "YOUR_APP_KEY", url: url)
webView.loadRequest(URLRequest(url: url))
url = [KarteTrackerJsUtil URLByAppendingUserSyncQueryParameter:@"YOUR_APP_KEY" withURL: url];
[webView loadRequest:[NSURLRequest requestWithURL: url]];

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

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

3. 動作検証

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

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

ネイティブアプリSDKを利用してトラッキングを行う

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

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
  let title = webView.title ?? "-"
  let url = webView.url?.absoluteString ?? "-"
  KarteTracker.shared.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 : @"-";
  [[KarteTracker sharedTracker] 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://karte.io?_karte_tracker_deactivate=true") {
    webView.load(URLRequest(url: url))
  }
}
- (void)viewDidLoad {
  [super viewDidLoad];
  
  NSURL *url = [NSURL URLWithString:@"https://karte.io?_karte_tracker_deactivate=true"];
  [webView loadRequest:[NSURLRequest requestWithURL:url]];
}

WebViewのトラッキングを行う


Suggested Edits are limited on API Reference Pages

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