モバイル RUM のセッションリプレイ

セッションリプレイを使用すると、クリック、スクロール、ナビゲーションなどのインタラクションを記録することで、モバイルアプリケーションでのユーザーアクティビティをモニターできます。これらのインタラクションを、詳細なセッションメタデータとともに、ビデオのようなダイナミックなプロセスとしてキャプチャします。これによりチームは、ユーザー体験に関する明確な洞察を、特に問題が発生した場合に、得られます。セッションのリプレイを見ると、次のことができます。

  • ユーザーエクスペリエンスを最適化する。

  • アプリケーションクラッシュのエラーをデバッグする。

  • アプリケーションが低速である理由を診断します。

Session Replay Licenses

Session Replay is an add-on license available for the packages: RUM Peak, Browser RUM-Pro, Browser RUM-Peak, Mobile RUM-Pro, and Mobile RUM-Peak. For more information, see セッションリプレイ.

Prerequisites

Ensure that the following conditions are met to use Session Replay:

  • Controller >= 25.7

  • iOS Agent >= 25.9

  • Android Agent >= 25.9

Configure the iOS Agent to Report Session Replay

  1. To report Session Replay for your mobile application, you must configure the iOS Agent as follows:
    Objective C
    PYTHON 
    #import <ADEumInstrumentation/ADEumInstrumentation.h>
#import "AppDelegate.h"
  
    // ...
    -(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
        ADEumAgentConfiguration *config = [[ADEumAgentConfiguration alloc] initWithAppKey:<#EUM_APP_KEY#>];
        //The default SaaS EUM Server and Screenshot Service are in the Americas,
        // so you can omit the following settings if you are in the Americas.
        config.collectorURL = @"https://<your_region>-col.eum-appdynamics.com";
        config.screenshotURL = @"https://<your_region>-image.eum-appdynamics.com";
        config.sessionReplayURL = @"https://<your_region>-blob-service.eum-appdynamics.com";
        [ADEumInstrumentation initWithConfiguration: config];
        // other tasks
        return YES;
     }
    Swift
    JAVASCRIPT 
    #import <ADEumInstrumentation/ADEumInstrumentation.h>
#import "AppDelegate.h"
  
    // ...
     func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        let config = ADEumAgentConfiguration(appKey: <#EUM_APP_KEY#>)
        config.collectorURL = "https://<your_region>.eum-appdynamics.com"
        config.screenshotURL = "https://<your_region>-image.eum-appdynamics.com"
        config.sessionReplayURL = "https://<your_region>-blob-service.eum-appdynamics.com"
        ADEumInstrumentation.initWith(config)
        // other tasks
        return true
    }
// ...
    注: Do not add region for the Oregon (PDX) region.
  2. To report Session Replay for your mobile application, you must configure the iOS Agent as follows:
    Objective C
    PYTHON 
    #import <ADEumInstrumentation/ADEumInstrumentation.h>
#import "AppDelegate.h"
  
    // ...
    -(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
        ADEumAgentConfiguration *config = [[ADEumAgentConfiguration alloc] initWithAppKey:<#EUM_APP_KEY#>];
        //The default SaaS EUM Server and Screenshot Service are in the Americas,
        // so you can omit the following settings if you are in the Americas.
        config.collectorURL = @"https://<your_region>-col.eum-appdynamics.com";
        config.screenshotURL = @"https://<your_region>-image.eum-appdynamics.com";
        config.sessionReplayURL = @"https://<your_region>-blob-service.eum-appdynamics.com";
        [ADEumInstrumentation initWithConfiguration: config];
        // other tasks
        return YES;
     }
    Swift
    JAVASCRIPT 
    #import <ADEumInstrumentation/ADEumInstrumentation.h>
#import "AppDelegate.h"
  
    // ...
     func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        let config = ADEumAgentConfiguration(appKey: <#EUM_APP_KEY#>)
        config.collectorURL = "https://<your_region>.eum-appdynamics.com"
        config.screenshotURL = "https://<your_region>-image.eum-appdynamics.com"
        config.sessionReplayURL = "https://<your_region>-blob-service.eum-appdynamics.com"
        ADEumInstrumentation.initWith(config)
        // other tasks
        return true
    }
// ...
    注: Do not add region for the Oregon (PDX) region.
To protect user privacy during session recordings, configure Session Replay to mask sensitive data by enabling options that obscure all text and input fields by default. For more information, see Handle Sensitive Data .

Configure the Android Agent to Report Session Replay

To report Session Replay for your mobile application, you must configure the Android Agent as follows:
  1. Initialise the agent by the following methods:

    • .withSessionReplayEnabled(true)

    • .withBlobServiceURL(configHelper.getSessionReplayUrl())

    • (Optional) Default configuration: RenderingMode.NATIVE_MODE.withSessionReplayRenderingMode(RenderingMode.WIREFRAME_MODE)

    PYTHON 
    import com.appdynamics.eumagent.runtime.Instrumentation;
...
@Override public void onCreate(Bundle savedInstanceState) {
  Instrumentation.start(AgentConfiguration.builder()
    .withAppKey("<EUM_APP_KEY>")
    .withContext(getApplicationContext())
    // The default SaaS EUM Server and Screenshot Service are in the Americas,
    // so you can omit the following settings if you are in the Americas.
    .withSessionReplayEnabled(true)
    .withBlobServiceURL(configHelper.getSessionReplayUrl()) 
    .build());
  ...
}
  2. In your app module-level build.gradle file, add session replay SDK.
    JSON 
    ...
...
repositories {
        maven {
            url = "https://sdk.smartlook.com/android/release"
        }
    }
...
...
dependencies {
        implementation 'com.cisco.android:sr-instrumentation-session-recording-core:1.0.12' 
}
To protect user privacy during session recordings, configure Session Replay to mask sensitive data by enabling options that obscure all text and input fields by default. For more information, see Handle Sensitive Data.

Configure the React Native Agent to Report Session Replay

To report Session Replay for React Native applications, you must configure the React Native Agent as follows:
  1. Initialize the agent with the sessionReplayURL parameter:
    PYTHON 
    import App from './src/App';
import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';

import {Instrumentation} from '@appdynamics/react-native-agent';  

Instrumentation.start({
    appKey: '<EUM-APP-KEY>',
    collectorURL: <Collector URL>
    sessionReplayURL: <URL for session replay>
    ……

});

AppRegistry.registerComponent(appName, () => App);
  2. (Conditional) Do this step only if you have React Native Android applications In your app module-level build.gradle file, add session replay SDK.
    JSON 
    ...
...
repositories {
        maven {
            url = "https://sdk.smartlook.com/android/release"
        }
    }
...
...
dependencies {
        implementation 'com.cisco.android:sr-instrumentation-session-recording-core:1.0.12' 
}

セッションリプレイの有効化

管理者はセッションリプレイのみを有効にできます。選択したモバイルアプリケーションのセッションリプレイを有効にするには、以下のオプションを実行します。
  1. コントローラ UI にログインします。
  2. 対象のモバイルアプリケーションを開きます。
  3. 左のナビゲーションメニューで、[Configuration] を選択します。
  4. モバイル アプリケーション グループの設定
  5. [Session Replay] タブで、[Enable Session Replay] を選択します。
    注: Xcode のメインスレッドチェッカー

    デバッグモードで iOS アプリを起動すると、数秒間停止することがあります。セッションリプレイを有効にすると、セッションリプレイが開始し警告が表示されます。この問題は、Xcode のメインスレッドチェッカーの診断によって引き起こされます。

    CODE 
    Main Thread Checker: UI API called on a background thread: -[UIView drawViewHierarchyInRect:afterScreenUpdates:]

    この警告は無害であり、iOS エージェントがバックグラウンドで画面をキャプチャしていることが原因で発生します。別の方法（メインスレッドでスクリーンショットをキャプチャする）は、アプリケーション UI の不具合を引き起こす可能性があります。そのため、この方法で実装し、この警告を表示することは、シームレスな記録機能を有効にするために必要なトレードオフです。

    この警告は、デバッグ中にアプリケーションが短時間フリーズする場合にも表示されます。このフリーズは実稼働環境ビルドでは発生せず、メインスレッドチェッカーの Xcode 診断オプションが原因で発生します。

    このオプションは、それぞれの実行スキームの診断オプションでオフにすることができます。詳細については、「メモリ、スレッド、クラッシュの問題の早期診断」の「バックグラウンドセクションの不適切な UI 更新の検出」セクションを参照してください。

セッションリプレイの表示

セッションリプレイでは、複数の録音とユーザーインタラクションが組み合わされています。セッションリプレイを表示するには、以下の手順を実行します。
  1. [Experience > Mobile Apps] に移動します。録音が可能な場合、[Session Replay] に再生アイコンが表示されます。[Session Replay] タブを展開します。
  2. セッションリプレイを有効にしたアプリケーションを選択します。
  3. [Sessions] を選択します。
    録音が可能な場合、[Session Replay] に再生アイコンが表示されます。
  4. [Session Replay] タブを展開します。
[Session Replay] は、セッションのアクティブなセグメントを強調表示します。録画またはユーザー アクティビティがない場合は、空白の画面が表示されます。
セッションリプレイの表示中に、以下のアクションを実行できます。

  • 再生速度を調整する。

  • [Video] モードと [Wireframe] モードを切り替えます。[Wireframe] モードでは、セッションリプレイは UI レイアウトだけを表示し、テキストはマスクされます。