このページは日本語には対応しておりません。随時翻訳に取り組んでいます。
翻訳に関してご質問やご意見ございましたら、お気軽にご連絡ください

概要

リアルユーザーモニタリングにより、ハイブリッドモバイルアプリケーションの Web ビューを監視し、死角をなくすことができます。

以下を実行できます。

  • モバイルアプリケーションの Web とネイティブコンポーネントにまたがるユーザージャーニーの追跡
  • モバイルアプリケーションの Web ページやネイティブコンポーネントへのレイテンシーの根本原因を特定する
  • モバイルデバイスで Web ページの読み込みが困難なユーザーへの対応

また、iOS または Android の Web ビューとネイティブビューの両方におけるユーザーの行動をすべて記録し、それを単一の Session Replay で確認することもできます。 統合されたブラウザとモバイル Web ビューのインスツルメンテーション方法についてはこちらをご覧ください。

セットアップ

前提条件

モバイルアプリケーションでレンダリングしたい Web ページで RUM ブラウザ SDK を設定します。詳しくは、RUM ブラウザモニタリングをご参照ください。

DatadogWebViewTracking を依存関係として宣言します (iOS または Kotlin Multiplatform のみ)

iOS

Web View tracking を有効にするには、RUM と (または) Logs も有効にしてください。その後、依存関係マネージャーに従ってパッケージを追加し、初期化スニペットを更新します。

モバイルアプリケーションでレンダリングしたい Web ページの RUM ブラウザ SDK を設定します。詳しくは、RUM ブラウザモニタリングをご参照ください。

モバイルアプリケーションでレンダリングしたい Web ページで RUM ブラウザ SDK を設定します。詳しくは、RUM ブラウザモニタリングをご参照ください。

クラッシュレポートを有効にするには

  1. RUM および (または) Logs を有効にしていることを確認してください。
  2. 依存関係マネージャーに従ってパッケージを追加します。
  3. 下記のとおり DatadogWebViewTracking を依存関係として宣言し、初期化スニペットを更新してください。

CocoaPods を使用して dd-sdk-ios をインストールできます。

pod 'DatadogWebViewTracking'

Apple の Swift Package Manager を使用して統合するには、Package.swift に以下を依存関係として追加します。

.package(url: "https://github.com/Datadog/dd-sdk-ios.git", .upToNextMajor(from: "2.0.0"))

プロジェクトで、以下のライブラリをリンクします。

DatadogCore
DatadogWebViewTracking

Carthage を使用して、dd-sdk-ios をインストールできます。

github "DataDog/dd-sdk-ios"

Xcode で、以下のフレームワークをリンクします。

DatadogWebViewTracking.xcframework

モバイルアプリケーションでレンダリングしたい Web ページで RUM ブラウザ SDK を設定します。詳しくは、RUM ブラウザモニタリングをご参照ください。

モバイルアプリケーションでレンダリングしたい Web ページで RUM ブラウザ SDK を設定します。詳しくは、RUM ブラウザモニタリングをご参照ください。

こちらのガイドに従って DatadogWebViewTracking ライブラリをアプリケーションに追加してください。

Web ビューをインスツルメントする

  1. Web ページからの RUM イベントを転送したい場合は、RUM Android SDK の最新バージョンをダウンロードし、専用ガイドに従って RUM 機能をセットアップしてください。

  2. Web ページからのログイベントを転送したい場合は、Logs Android SDK の最新バージョンをダウンロードし、専用ガイドに従ってログ機能をセットアップしてください。

  3. モジュールレベルの build.gradle ファイルで dd-sdk-android-webview ライブラリを依存関係として宣言し、Gradle 依存関係を追加します。

    dependencies {
        implementation "com.datadoghq:dd-sdk-android-webview:x.x.x"
    }
    
  4. 以下のコードスニペットで Web ビューの追跡を有効にします。

      WebViewTracking.enable(webView, allowedHosts)
    

allowedHosts は、指定されたホストおよびそのサブドメインに一致します。正規表現は許可されていません。

: WebView コンポーネントでインスツルメンテーションを機能させるには、WebView で JavaScript を有効にすることが非常に重要です。有効にするには、以下のコードスニペットを使用します。

    webView.settings.javaScriptEnabled = true

RUM iOS SDK は、Web ビュー追跡を制御するための API を提供します。Web ビュー追跡を有効にするには、WKWebView インスタンスを提供します。

import WebKit
import DatadogWebViewTracking

let webView = WKWebView(...)
WebViewTracking.enable(webView: webView, hosts: ["example.com"])

Web ビュー追跡を無効にする場合

WebViewTracking.disable(webView: webView)

allowedHosts は、指定されたホストおよびそのサブドメインに一致します。正規表現は許可されていません。

RUM Flutter SDK は、webview_flutter または flutter_inappwebview パッケージを使用する際に、Web ビューのトラッキングを制御するための API を提供します。

Web view Flutter パッケージ

webview_flutter を使用して Web ビュー トラッキングを追加するには、最新版の datadog_webview_tracking プラグインを pubspec.yaml に以下のように追加してください。

dependencies:
  datadog_webview_tracking: ^x.x.x

その後、許可するホストのリストを指定して、WebViewController に対して trackDatadogEvents エクステンションメソッドを呼び出します。

例:

import 'package:datadog_flutter_plugin/datadog_flutter_plugin.dart';

webViewController = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..trackDatadogEvents(
    DatadogSdk.instance,
    ['myapp.example'],
  )
  ..loadRequest(Uri.parse('myapp.example'));

なお、Android で追跡機能を有効にするには、JavaScriptMode.unrestricted が必要です。 allowedHosts は、指定されたホストおよびそのサブドメインに一致します。正規表現は許可されていません。

Flutter InAppWebView パッケージ

flutter_inappwebview を使用して Web ビュー トラッキングを追加するには、最新版の datadog_inappwebview_tracking プラグインを pubspec.yaml に以下のように追加してください。

dependencies:
  datadog_webview_tracking: ^x.x.x

InAppWebView をインスツルメンテーションするには、initialUserScriptsDatadogInAppWebViewUserScript を追加し、onWebViewCreated コールバック内で trackDatadogEvents エクステンションメソッドを呼び出します。

InAppWebView(
  // 他の設定...
  initialUserScripts: UnmodifiableListView([
    DatadogInAppWebViewUserScript(
      datadog: DatadogSdk.instance,
      allowedHosts: {'shopist.io'},
    ),
  ]),
  onWebViewCreated: (controller) async {
    controller.trackDatadogEvents(DatadogSdk.instance);
  },
)

InAppBrowser をインスツルメンテーションするには、onBrowserCreated をオーバーライドして webViewController に対して trackDatadogEvents エクステンションメソッドを呼び出し、カスタム InAppBrowser を作成する際に initialUserScriptsDatadogInAppWebViewUserScript を追加します。

class MyInAppBrowser extends InAppBrowser {
  MyInAppBrowser({super.windowId, super.initialUserScripts});

  @override
  void onBrowserCreated() {
    webViewController?.trackDatadogEvents(DatadogSdk.instance);
    super.onBrowserCreated();
  }
}

// ブラウザの生成
_browser = MyInAppBrowser(
  initialUserScripts: UnmodifiableListView(
    [
      DatadogInAppWebViewUserScript(
        datadog: DatadogSdk.instance,
        allowedHosts: {'shopist.io'},
      ),
    ],
  ),
);

DatadogInAppWebViewUserScriptallowedHosts パラメーターは、指定したホストおよびそのサブドメインに一致します。正規表現の使用は許可されていません。

  1. 公式インストールドキュメントに従って、react-native-webview をアプリケーションに追加します。

  2. react-native-webview ではなく、@datadog/mobile-react-native-webview から WebView をインポートします。

    import { WebView } from '@datadog/mobile-react-native-webview';
    // or
    import WebView from '@datadog/mobile-react-native-webview';
    
  3. @datadog/mobile-react-native-webviewWebViewコンポーネントは react-native-webview コンポーネントをラップしているので、react-native-webview の既存のすべての機能を使用することができます。

  4. WebView コンポーネントの allowedHosts プロップを使用して、Datadog が追跡するホストのリストを Web ビュー内に提供します。

    <WebView
        source={{ uri: 'https://www.example.com' }}
        allowedHosts={['example.com']}
    />
    

allowedHosts は、指定されたホストおよびそのサブドメインに一致します。正規表現は許可されていません。

  1. Web ページから送信される RUM イベントを転送したい場合は、RUM Kotlin Multiplatform SDK の最新バージョンをダウンロードし、専用ガイドに従って RUM をセットアップしてください。

  2. Web ページから送信されるログ イベントを転送したい場合は、Logs Kotlin Multiplatform SDK の最新バージョンをダウンロードし、専用ガイドに従ってログをセットアップしてください。

  3. モジュールレベルの build.gradle.kts ファイルで dd-sdk-kotlin-multiplatform-webview ライブラリを依存関係として宣言し、共通のソースセットに Gradle 依存関係を追加します。

    kotlin {
      // ...
      sourceSets {
        commonMain.dependencies {
          implementation("com.datadoghq:dd-sdk-kotlin-multiplatform-webview:x.x.x")
        }
      }
    }
    
  4. 以下のコードスニペットで Web ビューの追跡を有効にします。

      // call it in Android or iOS source set, not in the common one
      WebViewTracking.enable(webView, allowedHosts)
    
  5. Web ビューのインスタンスが解放可能になったら、Web ビューのトラッキングを無効化します (iOS のみ)。

      // call it in iOS source set, not in the common one
      WebViewTracking.disable(webView, allowedHosts)
    

allowedHosts は指定したホストおよびそのサブドメインに一致します。正規表現は許可されていません。

Web ビューにアクセスする

Web ビューは、関連する servicesource 属性とともに RUM エクスプローラーに表示されます。service 属性は Web ビューが生成された Web コンポーネントを示し、source 属性は Android などのモバイルアプリケーションのプラットフォームを表します。

Web ビューにアクセスするには

  1. Digital Experiences > Real User Monitoring > (Sessions) Explorer に移動します。

  2. 以下をフィルタリングするクエリを作成します。

    • application.id または application.name を使用している Android および Android TV アプリケーション
    • service を使用している Web コンポーネント
    • source を使用しているプラットフォーム

    : モバイルアプリで見慣れないバージョン番号が報告される場合、それは Browser SDK のバージョンである可能性があります。その場合は、たとえば source: react-native のように指定して Browser プラットフォームのセッションをフィルタリングできます。

  3. セッションをクリックすると、そのセッションに含まれるイベント一覧がサイドパネルに表示されます。

    RUM エクスプローラーのセッションで取得した Web ビューイベント

    Web アイコンが付いているサービスは Web ビューを示します。

セッションイベントにカーソルを合わせて Open View waterfall をクリックすると、ビューの Performance タブにあるリソースウォーターフォールのビジュアル表示へ移動できます。

請求への影響

モバイルアプリケーションの Web ビューがセッションの記録と請求にどのように影響するかの詳細については、RUM & Session Replay の請求を参照してください。

その他の参考資料