Repro - Mobile Analytics for growth
English
リソース
Growth Hack Journal
アカウント登録 管理画面に戻る
  • 動作環境
  • 管理画面ガイド
  • 開発ガイド
    • アカウント作成
    • iOS/Android SDK
      • 導入
      • セッション・ライフサイクル
      • ユーザーID
      • デバイスID
      • ユーザープロフィール
      • イベントトラッキング
      • プッシュ通知
      • ニュースフィード
      • アプリ内メッセージ
      • シルバーエッグレコメンドメッセージ
      • UXオプティマイザー(ベータ版)
      • WebView
        • WebViewのイベントトラッキングを有効にする
          • iOS
          • Android
        • Webページにトラッキングコードを追加する
        • トラッキング
        • マスキング
          • マスクをかける
          • マスクを外す
      • オプトアウト機能
      • Adjustで取得したアトリビューションデータをReproにセットする
      • AppsFlyerで取得したアトリビューションデータをReproにセットする
      • ログレベル
      • 検証方法
    • Web
    • オーディエンスAPI
    • オーディエンスインポート(β)
    • プッシュAPI
    • ユーザープロフィールAPI
    • ユーザープロフィールバルクインポートAPI
  • リリースノート
  • FAQ

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>

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

  • WebViewのユーザーエージェントをカスタマイズする (iOS)
  • WebViewのユーザーエージェントをカスタマイズする (Android)

トラッキング¶

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

マスキング¶

警告

録画関連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 がロードされていない場合、ページ遷移後もマスクが残り続けます。
  • « UXオプティマイザー – Flutter
  • オプトアウト機能 »

About Us Careers Terms of Service Privacy Policy Cookie Policy

© 2020 Repro Inc.