WebView

ネイティブアプリのWebViewで表示するWebページ内で、JavaScriptを使ってイベントをトラックしたりユーザープロフィールの設定をすることが出来ます。

警告

• 本ドキュメントは、iOS SDKまたはAndroid SDKを導入された方向けのWebViewの利用方法です。Web SDKを導入している方は WebViewでの動作について をご確認ください。
• WebViewにてユーザープロフィールの設定を行うには、iOS SDK 5.19.0 以上 および Android SDK 5.18.0 以上を導入し、かつ バージョン6以上のrepro.js を利用する必要があります。
  • 詳細な利用方法は ユーザープロフィール を参照してください。

注釈

• iOSの SFSafariViewController には対応していません
• Unity、Cocos2d-xアプリ内のWebViewには対応していません。
• CordovaおよびMonacaでWebページを表示する場合は、本ページの実装は不要です。
• トラッキングについての詳しい説明は、[イベントトラッキング] を参照してください。

WebViewでReproの機能を利用するために、以下の設定が必要になります。

• WebViewでReproの利用を有効にする
• Webページにトラッキングコードを追加する

WebViewでReproの利用を有効にする

まずはWebViewのイベントトラッキングおよびユーザープロフィールの設定を有効にします。有効にする方法はiOSとAndroidで対応方法が異なるので、それぞれ説明します。

iOS

WKWebView にセットするdelegateオブジェクトを渡します。

以下のサンプルでは 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(delegate: self)
        self.webView.navigationDelegate = self
    }

// This section explains the implementation in iOS.
// Please change the language to Objective-C or Swift.

// This section explains the implementation in iOS.
// Please change the language to Objective-C or Swift.

// This section explains the implementation in android.
// Please change the language to Objective-C or Swift.

警告

WKWebView.navigationDelegate へのインスタンスセットより前に startWebViewTracking: を実行してください。

設定が完了したら Webページにトラッキングコードを追加する へ進んでください。

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); **Avoid implementing this line**

        // 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");
    }
}

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

警告

startWebViewTracking() では、その内部において WebView.setWebViewClient() が実行されます。したがって、 WebViewClient を独自に実装した場合においても明示的に WebView.setWebViewClient() を行うことは避けてください。

警告

startWebViewTracking() より後に WebView.setWebViewClient() を実行した場合、本機能が無効となりますのでご注意ください。

警告

Android 9 Pie以降のOSでHTTP通信を行う場合、HTTP通信を許可するドメインを明示的に指名する必要があります。 詳しくは、 Android 9 PieでHTTPページのWebviewのトラッキングができない をご参考ください。

設定が完了したら Webページにトラッキングコードを追加する へ進んでください。

React Native

React Native の WebView は react-native-webview のみ対応しています。

react-native-webview の onShouldStartLoadWithRequest で Repro の handleWebViewUrl に request.url を渡してください。

次に、 originWhitelist に 'repro://*' を追加してください。

以下にサンプルコードを提示します。

// This section explains the implementation in React Native.
// Please change the language to JavaScript(React Native).

// This section explains the implementation in React Native.
// Please change the language to JavaScript(React Native).

// This section explains the implementation in React Native.
// Please change the language to JavaScript(React Native).

render() {
    return <WebView
        source={{ uri: 'https://somewebsite_that_loads_repro.js' }}
        style={{ flex: 1 }}
        originWhitelist={['https://*', 'repro://*']}
        onShouldStartLoadWithRequest={ (request) => {
            if (Repro.handleWebViewUrl(request.url)) {
                return false;
            }
            ... optional other custom code ...

            return true;
        }}
    />
}

// This section explains the implementation in React Native.
// Please change the language to JavaScript(React Native).

設定が完了したら Webページにトラッキングコードを追加する へ進んでください。

Flutter

Flutter の WebView は webview_flutter と flutter_inappwebview に対応しています。また、 webview_flutter と flutter_inappwebview は実装方法が違うためご注意ください。

webview_flutter のサンプルコードは以下の通りです。 setJavaScriptMode に JavaScriptMode.unrestricted を設定してください。

次に、 addJavaScriptChannel を追加して onMessageReceived で受け取った data.message を handleWebViewUrl に渡してください。

// This section explains the implementation in Flutter.
// Please change the language to Dart.

// This section explains the implementation in Flutter.
// Please change the language to Dart.

// This section explains the implementation in Flutter.
// Please change the language to Dart.

// This section explains the implementation in Flutter.
// Please change the language to Dart.

// WebViewControllerの初期化
final controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted);

// JavaScriptチャンネルの追加
controller.addJavaScriptChannel(
  Repro.WEBVIEW_FLUTTER_CHANNEL_NAME,
  onMessageReceived: (JavaScriptMessage data) {
    Repro.handleWebViewUrl(data.message);
  },
);

// WebViewWidgetの作成
WebViewWidget(controller: controller)

flutter_inappwebview のサンプルコードは以下の通りです。 shouldOverrideUrlLoading で Repro の handleWebViewUrl に navigationAction.request.url.toString() を渡してください。

// This section explains the implementation in Flutter.
// Please change the language to Dart.

// This section explains the implementation in Flutter.
// Please change the language to Dart.

// This section explains the implementation in Flutter.
// Please change the language to Dart.

// This section explains the implementation in Flutter.
// Please change the language to Dart.

InAppWebView(
  // ...
  shouldOverrideUrlLoading: (controller, navigationAction) async {
    if (Repro.handleWebViewUrl(navigationAction.request.url.toString())) {
      return NavigationActionPolicy.CANCEL;
    }
    // optional other custom code ...

    return NavigationActionPolicy.ALLOW;
  },
  // ...
)

設定が完了したら Webページにトラッキングコードを追加する へ進んでください。

Webページにトラッキングコードを追加する

HTMLファイルから、ReproのJavaScriptライブラリrepro.jsを読み込みます。トラッキングタグを生成したいページに、下記を追記してください。

<head>
  ...
  <script src="//cdn.reproio.com/js/v8/repro.js" type="text/javascript" charset="utf-8"></script>
  ...
</head>

ロードした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/v8/repro.js" type="text/javascript" charset="utf-8"></script>
  ...
</head>

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

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

• « アプリ内パラメーター
• オプトアウト機能 »