WebView¶

ネイティブアプリのWebViewで表示するWebページ内で、JavaScriptを使ってイベントをトラックしたり、録画中にプライバシー情報を含むDOMエレメントをマスクすることが出来ます。

注釈

iOSの SFSafariViewController には対応していません
Unity、Cocos2d-x、React Nativeアプリ内のWebViewには対応していません。
CordovaおよびMonacaでWebページを表示する場合は、本ページの実装は不要です。イベントトラッキングはこちらを、画面中のマスキングはこちらをご覧ください。

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
    }

// 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
    }

// 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.

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トラッキングが無効となりますのでご注意ください。

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>

アプリ側でユーザーエージェントを指定する方法については以下を参考にしてください。

トラッキング¶

イベントトラッキングをご覧ください。

マスクをかける¶

録画中、プライバシー情報を含むエレメントをマスクできます。キーとして使用できるのは 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");

注釈

WewbView内でページ遷移した場合、遷移前に設定したマスクはSDKが自動で削除します。ただし、iOSのUIWebViewでは以下の制限事項があります。

iOSのUIWebViewでは、マスクを設定したWebページの window.load または window.pageshow イベントが発生する前にページ遷移し、さらに遷移後のページに repro.js がロードされていない場合、ページ遷移後もマスクが残り続けます。