WebViewのトラッキングを行う

Suggest Edits

🚧

このドキュメントは古いバージョンのiOS SDK v1について記載しています

iOS SDK v1は 2021/05/11でサポート終了となります。
SDK v1 からのアップグレードについては、まず SDK v1からv2のアップグレード方法 をご覧ください。

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 が付く
  • 計測タグが発行する全イベントのmetadataフィールド内に app_info フィールドが付与される

🚧

マルチドメインオプション利用時の注意点

WebとAppのユーザー紐付け処理はマルチドメインオプションによるクロスドメインでのユーザ統合機能の対象外となります

紐付け処理の実装方法
現在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];
}

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

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 アイコンが付いていれば、ネイティブアプリ上での行動として扱われております。

1158

🚧

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

WebView内で発生したイベント（_sourceが native_app_webview のイベント）をトリガーに配信される接客サービスはSDKではなくアプリが管理するWebViewにアクションが表示されます。

WebViewがWKWebViewの場合、下記のようにそのままではアクション内のURLリンクが自動で処理されないケースがあります。その場合、WKWebViewのnavigationDelegateの実装が必要となります。アプリをリリースする前に動作確認をしてください。

  • URLスキーム（deeplink処理を含む）
  • _blank を含むaタグ

ネイティブアプリ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]];
}

Updated 5 months ago