WebView¶
ネイティブアプリのWebViewで表示するWebページ内で、JavaScriptを使ってイベントをトラックすることが出来ます。
注釈
- iOSの
SFSafariViewController
には対応していません - Unity、Cocos2d-x、React Native、Flutterアプリ内のWebViewには対応していません。
- CordovaおよびMonacaでWebページを表示する場合は、本ページの実装は不要です。イベントトラッキングは こちら をご覧ください。
- Web SDKでは現在ネイティブアプリから呼び出されるWebViewにおけるデータ収集をサポートしておりません。
WebViewのイベントトラッキングを有効にする¶
iOS¶
UIWebView
や WKWebView
にセットするdelegateオブジェクトを渡します。
UIWebView¶
以下のサンプルでは MyViewController
が UIWebViewDelegate
を実装しているので、 MyViewController
のインスタンスである self
を startWebViewTracking
の引数として渡します。
@interface MyViewController () <UIWebViewDelegate>
- (void)viewDidLoad
{
[super viewDidLoad];
UIWebView *webView = [[UIWebView alloc] init];
...
[Repro startWebViewTracking:self];
webView.delegate = self;
}
class MyViewController: UIWebViewDelegate {
override func viewDidLoad() {
super.viewDidLoad()
let webView = UIWebView()
...
Repro.startWebViewTracking(self)
webView.delegate = self
}
class MyViewController: UIWebViewDelegate {
override func viewDidLoad() {
super.viewDidLoad()
let webView = UIWebView()
...
Repro.startWebViewTracking(delegate: self)
webView.delegate = self
}
// This section explains the implementation in iOS.
// Please change the language to Objective-C or Swift.
WKWebView¶
以下のサンプルでは MyViewController
が WKNavigationDelegate
を実装しているので、 MyViewController
のインスタンスである self
を startWebViewTracking
の引数として渡します。
@interface MyViewController () <WKNavigationDelegate>
- (void)viewDidLoad
{
[super viewDidLoad];
WKWebView *webView = [[WKWebView alloc] init];
...
[Repro startWebViewTracking:self];
webView.navigationDelegate = self;
}
class MyViewController: WKNavigationDelegate {
override func viewDidLoad() {
super.viewDidLoad()
let webView = WKWebView()
...
Repro.startWebViewTracking(self)
self.webView.navigationDelegate = self
}
class MyViewController: WKNavigationDelegate {
override func viewDidLoad() {
super.viewDidLoad()
let webView = WKWebView()
...
Repro.startWebViewTracking(delegate: self)
self.webView.navigationDelegate = self
}
// This section explains the implementation in iOS.
// Please change the language to Objective-C or Swift.
警告
WKWebView.navigationDelegate へのインスタンスセットより前に startWebViewTracking: を実行してください。
Android¶
WebViewのイベントをトラッキングするには、WebView自身とWebViewにセットするWebViewClientを startWebViewTracking()
に渡します。WebViewClientはnullとすることも可能です。
// This section explains the implementation in android.
// Please change the language to java.
// This section explains the implementation in android.
// Please change the language to java.
// This section explains the implementation in android.
// Please change the language to java.
import android.webkit.WebView;
import android.webkit.WebViewClient;
import io.repro.android.Repro;
public class MyActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
WebView webView = (WebView)findViewById(R.id.webView);
WebViewClient client = /* your WebViewClent object or null */;
webView.setWebViewClient(client);
// call startWebViewTracking() with webView and client
Repro.startWebViewTracking(webView, client);
// (Optional) You must specify "utf-8" as default encoding if you track events included localized strings
webView.getSettings().setDefaultTextEncodingName("utf-8");
}
}
警告
startWebViewTracking()
より後に WebView.setWebViewClient()
を実行した場合、ReproのWebViewトラッキングが無効となりますのでご注意ください。
警告
Android 9 Pie以降のOSでHTTP通信を行う場合、HTTP通信を許可するドメインを明示的に指名する必要があります。 詳しくは、 Android 9 PieでHTTPページのWebviewのトラッキングができない をご参考ください。
Webページにトラッキングコードを追加する¶
HTMLファイルから、ReproのJavaScriptライブラリrepro.jsをロードします。
<head>
...
<script src="//cdn.reproio.com/js/v4/repro.js" type="text/javascript" charset="utf-8"></script>
...
</head>
警告
エンドポイントのドメインが repro.io から reproio.com に変更されます。 旧ドメインも引き続きご利用頂けますが、なるべく新しいドメインをご利用ください。
ロードしたrepro.jsを動作しないようにする
イベントトラッキングを有効にしていないWebViewやブラウザからHTMLを開く場合は、 isInAppBrowser
フラグを利用してrepro.jsが動作しないようにしてください。 isInAppBrowser
に false
を指定するとrepro.jsは動作しません。 isInAppBrowser
の初期値は true
です。
以下のサンプルでは、アプリが送信するユーザーエージェントの値を正規表現でチェックし、その結果を isInAppBrowser
に設定しています。正規表現に一致するユーザーエージェントをアプリ側で指定することにより、そのアプリのWebViewで開かれた時のみrepro.jsが動作するようになります。
<head>
...
<script>
// enable repro.js only when loading this HTML by your app's WebView
window.repro = window.repro || {};
window.repro.isInAppBrowser = /MY_CUSTOM_USER_AGENT/.test(navigator.userAgent);
</script>
<script src="//cdn.reproio.com/js/v4/repro.js" type="text/javascript" charset="utf-8"></script>
...
</head>
アプリ側でユーザーエージェントを指定する方法については以下を参考にしてください。
トラッキング¶
イベントトラッキング をご覧ください。
マスキング¶
警告
録画関連APIは削除されました。2019年5月22日現在、これを利用することはできません。
マスクをかける¶
録画中、プライバシー情報を含むエレメントをマスクできます。キーとして使用できるのは String で、nullや空文字列は使えません。また、エレメントには DOMエレメントオブジェクト を指定してください。
repro.mask("password", document.getElementById("password"));
警告
position: fixed
が指定されたDOMエレメントオブジェクトにはマスクがかかりません。
マスクをかける前に一時的に録画停止する
DOMエレメントオブジェクトがDOMツリーに追加されてから mask
メソッドを呼ぶまでの間に録画されることを防ぐため、 disableRecording
メソッドで録画を一時的に停止し、 enableRecording
メソッドで録画を再開することができます。
例えば、ページロード直後にマスクをかける場合は、 <script>
タグ直下で disableRecording
を呼び出し、 DOMContentLoaded
イベントハンドラの中でマスク追加および enableRecording
を呼び出してください。
<body>
...
<script>
// disable recording
repro.disableRecording();
document.addEventListener('DOMContentLoaded', function() {
// apply mask
repro.mask("password", document.getElementById("password"));
// enable recording
repro.enableRecording();
});
</script>
</body>
マスクを外す¶
mask
メソッドで指定したマスクを消します。
repro.unmask("password");
注釈
WebView内でページ遷移した場合、遷移前に設定したマスクはSDKが自動で削除します。ただし、iOSのUIWebViewでは以下の制限事項があります。
- iOSのUIWebViewでは、マスクを設定したWebページの
window.load
またはwindow.pageshow
イベントが発生する前にページ遷移し、さらに遷移後のページにrepro.js
がロードされていない場合、ページ遷移後もマスクが残り続けます。