Versions Compared

    Key

    • This line was added.
    • This line was removed.
    • Formatting was changed.
    Comment: Published by Scroll Versions from this space and version 20.7
    Sv translation
    languageen
    Appd tocbox
    Width250px

    Related pages:

    Follow the steps below to get your EUM App Key and instrument your Cordova-based apps.

    Table of Contents
    maxLevel2
    minLevel2
    outlinetrue
    excludeUpdate.*
    stylenone

    Info

    For native mobile applications, following either the iOS Instrumentation or Android Instrumentation instructions. The Mobile Agents will inject the JavaScript Agent and auto-instrument your mobile application including the auto-instrumentation of the WKWebView.

    Check Requirements

    To use the AppDynamics Cordova plugin, your hybrid application must be using the following:

    • Cordova 8.0.0+
    • npm 3.10.10+
    • Node.js v6.11.3+
    • WKWebView for iOS applications 
    Info

    Support for UIWebView has been deprecated in Cordova. For more information, see Breaking changes coming to the iOS WebView in Apache Cordova.

    Get Your Application Key

    After you completed the Getting Started Wizard, you were given an EUM App Key. You will need this key when you modify the source code. In some cases, multiple mobile applications can share the same key.

    If you have completed the Getting Started Wizard, but don't have your EUM App Key, see Get Your Application Key.

    Install and Initialize the Cordova Plugin

    The AppDynamics Cordova plugin is certified to work with the Ionic and PhoneGap frameworks. Thus, the installation instructions below are for Ionic and PhoneGap applications. You should also be able to use the plugin for other Cordova-based frameworks. See the plugin installation instructions for your Cordova-based framework.

    Tabs Container
    Width1200px
    directionhorizontal
    Tabs Page
    tabNameIonic
    titleIonic

    From the root directory of your Ionic application, run the following commands to install the plugin and build the mobile app. See the Ionic Cordova plugin documentation for more information.

    1. Replace the values in brackets with the configurations for your app and run the command to add the configured plugin.
      For SaaS deployments:

      Code Block
      languagejs
      ionic cordova plugin add appd-plugin-eum-mobile --variable APP_KEY="<#EUM_APP_KEY#>" --variable SCREENSHOTS_ENABLED=<true|false> --variable LOGGING_LEVEL=[0-6]  --save

      For on-prem deployments, replace the value for the variable COLLECTOR_URL with the URL to your EUM Server and the value for SCREENSHOT_URL with the URL to your on-prem Screenshot Service.

      Code Block
      languagejs
      ionic cordova plugin add appd-plugin-eum-mobile --variable APP_KEY="<#EUM_APP_KEY#>" --variable SCREENSHOTS_ENABLED=<true|false> --variable LOGGING_LEVEL=[0-6] --variable COLLECTOR_URL="http(s)://<on-prem_eum-server_url>" --variable SCREENSHOT_URL="http(s)://<on-prem_screenshot_service-url>" --save
    2. (Optional) You can also disable or set the interaction capture mode (iOS/Android) and set the URL to test the network connectivity of Cordova iOS applications. 

      1. The interaction capture mode is on by default, but you can disable it by setting the variable INTERACTION_CAPTURE_MODE to 0 or specify the desired capture mode for the platform (see the interaction mode values for iOS and Android in the table below).

        Code Block
        languagecpp
        ionic cordova plugin add appd-plugin-eum-mobile --variable APP_KEY="<#EUM_APP_KEY#>" --variable INTERACTION_CAPTURE_MODE=<see modes in table below> --variable SCREENSHOTS_ENABLED=<true|false> --variable LOGGING_LEVEL=[0-6] --variable COLLECTOR_URL="http(s)://<on-prem_eum-server_url>" --variable SCREENSHOT_URL="http(s)://<on-prem_screenshot_service-url>" --save
        Tabs Container
        Width800px
        directionhorizontal
        Tabs Page
        tabNameiOS
        titleiOS
        Capture ModeValueDescription
        Capture None0No user interactions are captured.
        Button Pressed1Button presses are captured.
        Table Cell Selected2Table cell selections are captured.
        Text Field Selected4Text field selections are captured.
        Text View Selected8Text view selections are captured.
        All-1All user interactions are captured.
        Tabs Page
        tabNameAndroid
        titleAndroid
        Capture ModeValueDescription
        Capture None0 No user interactions are captured.
        Button Pressed Button presses are captured.
        Edit Text Selected2 Selection of edited text is captured.
        List Item Selected4Selection of list item is captured.
        All-1All user interactions are captured.
      2. By default, the Cordova Plugin will use http://google.com/ to test the connectivity of Cordova iOS applications You can, however, use a different URL to test the connectivity by setting the variable REACHABILITY_HOST to the URL. In the example below, the Cordova Plugin is configured to use http://example.com to test the connectivity of the Cordova iOS application.

        Code Block
        languagejs
        ionic cordova plugin add appd-plugin-eum-mobile --variable APP_KEY="<#EUM_APP_KEY#>" --variable REACHABILITY_HOST=http://example.com --variable SCREENSHOTS_ENABLED=<true|false> --variable LOGGING_LEVEL=[0-6] --save
    3. Build the mobile app:

      Code Block
      languagejs
      ionic cordova build [android, ios]
    Tabs Page
    tabNamePhoneGap
    titlePhoneGap

    From the root directory of your PhoneGap application, run the commands below to install the plugin. See the PhoneGap plugin documentation for more information.

    1. Replace the values in brackets with the configurations for your app and run the command to add the configured plugin.
      For SaaS deployments:

      Code Block
      languagejs
      phonegap cordova plugin add appd-plugin-eum-mobile --variable APP_KEY="<#EUM_APP_KEY#>" --variable SCREENSHOTS_ENABLED=<true|false> --variable LOGGING_LEVEL=[0-6] --save

      For on-prem deployments, replace the value for the variable COLLECTOR_URL with the URL to your EUM Server and the value for SCREENSHOT_URL with the URL to your on-prem Screenshot Service.

      Code Block
      languagejs
      phonegap cordova plugin add appd-plugin-eum-mobile --variable APP_KEY="<#EUM_APP_KEY#>" --variable SCREENSHOTS_ENABLED=<true|false> --variable LOGGING_LEVEL=[0-6] --variable COLLECTOR_URL="http(s)://<on-prem_eum-server_url>" --variable SCREENSHOT_URL="http(s)://<on-prem_screenshot_service-url>" --save
    2. (Optional) You can also set variables to enable user interaction capture mode (iOS/Android) and troubleshoot the network connectivity of Cordova iOS applications.

      1. The interaction capture mode is on by default, but you can disable it by setting the variable INTERACTION_CAPTURE_MODE to 0 or specify the desired capture mode for the platform (see the interaction mode values for iOS and Android in the table below).

        Code Block
        languagejs
        phonegap cordova plugin add appd-plugin-eum-mobile --variable APP_KEY="<#EUM_APP_KEY#>" --variable INTERACTION_CAPTURE_MODE=<see modes in table below> --variable SCREENSHOTS_ENABLED=<true|false> --variable LOGGING_LEVEL=[0-6] --save
        Tabs Container
        Width800px
        directionhorizontal
        Tabs Page
        tabNameiOS
        titleiOS
        Capture ModeValueDescription
        Capture None0No user interactions are captured.
        Button Pressed1Button presses are captured.
        Table Cell Selected2Table cell selections are captured.
        Text Field Selected4Text field selections are captured.
        Text View Selected8Text view selections are captured.
        All-1All user interactions are captured.
        Tabs Page
        tabNameAndroid
        titleAndroid
        Capture ModeValueDescription
        Capture None0 No user interactions are captured.
        Button Pressed Button presses are captured.
        Edit Text Selected2 Selection of edited text is captured.
        List Item Selected4Selection of list item is captured.
        All-1All user interactions are captured.
      2. By default, the Cordova Plugin will use http://google.com to test the connectivity of Cordova iOS applications You can, however, use a different URL to test the connectivity by setting the variable REACHABILITY_HOST to the URL. In the example below, the Cordova Plugin is configured to use http://example.com to test the connectivity of the Cordova iOS application.

        Code Block
        languagejs
        phonegap cordova plugin add appd-plugin-eum-mobile --variable APP_KEY="<#EUM_APP_KEY#>" --variable REACHABILITY_HOST=http://example.com --variable SCREENSHOTS_ENABLED=<true|false> --variable LOGGING_LEVEL=[0-6] --save
    3. Build the mobile app:

      Code Block
      languagejs
      phonegap cordova build [android, ios]

    Customize the Cordova Application Instrumentation

    See Customize the Cordova Application showing how to use the Cordova SDK through examples and brief explanations.

    Update Cordova Agent Configurations
    Anchor
    update-configs
    update-configs

    To update the configurations set when you first added the Cordova plugin to your application, the suggested practice is to remove the values for configuration values and then add new configuration values.

    See the following examples:

    Table of Contents
    maxLevel3
    minLevel3

    Change the App Key

    To change the app key for your Ionic or PhoneGap applications:

    1. Remove the old value for the variable APP_KEY with the remove command:

      Code Block
      languagebash
      cordova plugin remove --variable APP_KEY="old-app-key" appd-plugin-eum-mobile
    2. Add new value for the variable APP_KEY with the add command. Be sure to include the variables that you set when you first added the plugin (represented by <variable_list> below). For example, if you set REACHABILITY_HOST=http://example.com when you first added the plugin, you will need to reset the variable when running the add command again.

      Code Block
      languagebash
      cordova plugin add --variable APP_KEY="new-app-key" <variable_list> appd-plugin-eum-mobile

    Change the App Name

    To change the name of your Ionic or PhoneGap applications:

    1. Remove the old value for the variable APP_NAME with the remove command:

      Code Block
      languagebash
      cordova plugin remove --variable APP_NAME="old-app-name" appd-plugin-eum-mobile
    2. Add new value for the variable APP_NAME with the add command. Be sure to include the variables that you set when you first added the plugin (represented by <variable_list> below). For example, if you set REACHABILITY_HOST=http://example.com/ when you first added the plugin, you will need to reset the variable when running the add command again.

      Code Block
      languagebash
      cordova plugin add --variable APP_NAME="new-app-name" <variable_list> appd-plugin-eum-mobile



    Sv translation
    languageja
    Appd tocbox

    Related pages

    EUM アプリケーションキーを取得し、Cordova ベースのアプリケーションをインストゥルメント化するには、次の手順を実行します。

    Table of Contents
    maxLevel2
    minLevel2
    outlinetrue
    stylenone

    Info

    ネイティブ モバイル アプリケーションの場合、iOS インストゥルメンテーションまたは Android インストゥルメンテーションの手順に従います。モバイルエージェントは、JavaScript エージェントを挿入し、UIWebView/WebView の自動インストゥルメンテーションを含むモバイルアプリケーションを自動でインストゥルメント化します。

    要件の確認

    AppDynamics Cordova プラグインを使用するには、ハイブリッド アプリケーションで次のものを使用する必要があります。

    • Cordova 8.0.0+
    • npm 3.10.10+
    • Node.js v6.11.3+

    アプリケーションキーの取得

    After you completed the Getting Started Wizard, you were given an EUM App Key. このキーは、ソースコードを変更するときに必要になります。場合によっては、複数のモバイルアプリケーションが同じキーを共有できます。

    [Getting Started Wizard] を完了したが、EUM アプリケーションキーを持っていない場合は、「アプリケーションキーの取得」を参照してください。

    Cordova プラグインのインストールと初期化

    AppDynamics Cordova プラグインは、Ionic および PhoneGap フレームワークと連携して動作するように認定されています。そのため、以下のインストール手順は Ionic および PhoneGap アプリケーション用です。また、他の Cordova ベースのフレームワークにもプラグインを使用できる必要があります。Cordova ベースのフレームワークについては、プラグインのインストール手順を参照してください。

    Appd tabs container
    Width1200px
    Appd tab item
    tabNameIonic

    Ionic アプリケーションのルートディレクトリから、次のコマンドを実行してプラグインをインストールし、モバイルアプリケーションを構築します。詳細については、Ionic Cordova プラグインのマニュアルを参照してください。

    1. カッコ内の値をアプリケーションの設定に置き換え、コマンドを実行して、設定されたプラグインを追加します。
      SaaS 展開の場合:

      Code Block
      languagejs
      ionic cordova plugin add appd-plugin-eum-mobile --variable APP_KEY="<#EUM_APP_KEY#>" --variable SCREENSHOTS_ENABLED=<true|false> --variable LOGGING_LEVEL=[0-6]  --save

      オンプレミス展開の場合は、変数 COLLECTOR_URL の値を EUM サーバの URL に置き換えて、SCREENSHOT_URL の値をオンプレミスのスクリーンショット サービスへの URL に置き換えます。

      Code Block
      languagejs
      ionic cordova plugin add appd-plugin-eum-mobile --variable APP_KEY="<#EUM_APP_KEY#>" --variable SCREENSHOTS_ENABLED=<true|false> --variable LOGGING_LEVEL=[0-6] --variable COLLECTOR_URL="http(s)://<on-prem_eum-server_url>" --variable SCREENSHOT_URL="http(s)://<on-prem_screenshot_service-url>" --save
    2. (オプション)また、インタラクション キャプチャ モードiOS/Androidを無効または設定し、Cordova iOS アプリケーションのネットワーク接続をテストする URL を設定することもできます。 

      1. インタラクション キャプチャ モードはデフォルトでオンになっていますが、このモードを無効にするには、変数 INTERACTION_CAPTURE_MODE を 0 に設定するか、プラットフォームに必要なキャプチャモードを指定します(次の表の iOS および Android のインタラクションモード値を参照)。

        Code Block
        languagecpp
        ionic cordova plugin add appd-plugin-eum-mobile --variable APP_KEY="<#EUM_APP_KEY#>" --variable INTERACTION_CAPTURE_MODE=<see modes in table below> --variable SCREENSHOTS_ENABLED=<true|false> --variable LOGGING_LEVEL=[0-6] --variable COLLECTOR_URL="http(s)://<on-prem_eum-server_url>" --variable SCREENSHOT_URL="http(s)://<on-prem_screenshot_service-url>" --save
        Appd tabs container
        Width800px
        Appd tab item
        tabNameiOS
        Capture Mode説明
        キャプチャなし0ユーザのインタラクションはキャプチャされません。
        ボタンの押下1ボタンの押下がキャプチャされます。
        テーブルセルの選択2テーブルセルの選択がキャプチャされます。
        テキストフィールドの選択4テキストフィールドの選択がキャプチャされます。
        テキストビューの選択8テキストビューの選択がキャプチャされます。
        すべて-1すべてのユーザインタラクションがキャプチャされます。
        Appd tab item
        tabNameAndroid
        Capture Mode説明
        キャプチャなし0ユーザのインタラクションはキャプチャされません。
        ボタンの押下1ボタンの押下がキャプチャされます。
        編集テキストの選択2編集テキストの選択がキャプチャされます。
        リスト項目の選択4リスト項目の選択がキャプチャされます。
        すべて-1すべてのユーザインタラクションがキャプチャされます。
      2. デフォルトでは、Cordova プラグインは http://google.com/ を使用し、Cordova iOS アプリケーションの接続をテストします。ただし、変数 REACHABILITY_HOST を URL に設定することで、別の URL を使用して接続をテストできます。次の例では、Cordova プラグインは、Cordova iOS アプリケーションの接続をテストするために http://example.com を使用するように設定されています。

        Code Block
        languagejs
        ionic cordova plugin add appd-plugin-eum-mobile --variable APP_KEY="<#EUM_APP_KEY#>" --variable REACHABILITY_HOST=http://example.com --variable SCREENSHOTS_ENABLED=<true|false> --variable LOGGING_LEVEL=[0-6] --save
    3. モバイルアプリケーションを構築します。

      Code Block
      languagejs
      ionic cordova build [android, ios]
    Appd tab item
    tabNamePhoneGap

    PhoneGap アプリケーションのルートディレクトリから、次のコマンドを実行してプラグインをインストールします。詳細については、 PhoneGap プラグインのマニュアルを参照してください。

    1. カッコ内の値をアプリケーションの設定に置き換え、コマンドを実行して、設定されたプラグインを追加します。
      SaaS 展開の場合:

      Code Block
      languagejs
      phonegap cordova plugin add appd-plugin-eum-mobile --variable APP_KEY="<#EUM_APP_KEY#>" --variable SCREENSHOTS_ENABLED=<true|false> --variable LOGGING_LEVEL=[0-6] --save

      オンプレミス展開の場合は、変数 COLLECTOR_URL の値を EUM サーバの URL に置き換えて、SCREENSHOT_URL の値をオンプレミスのスクリーンショット サービスへの URL に置き換えます。

      Code Block
      languagejs
      phonegap cordova plugin add appd-plugin-eum-mobile --variable APP_KEY="<#EUM_APP_KEY#>" --variable SCREENSHOTS_ENABLED=<true|false> --variable LOGGING_LEVEL=[0-6] --variable COLLECTOR_URL="http(s)://<on-prem_eum-server_url>" --variable SCREENSHOT_URL="http(s)://<on-prem_screenshot_service-url>" --save
    2. (オプション)変数を設定し、ユーザ インタラクション キャプチャ モードiOS/Androidを有効にして、Cordova iOS アプリケーションのネットワーク接続をトラブルシューティングすることもできます。

      1. インタラクション キャプチャ モードはデフォルトでオンになっていますが、このモードを無効にするには、変数 INTERACTION_CAPTURE_MODE を 0 に設定するか、プラットフォームに必要なキャプチャモードを指定します(次の表の iOS および Android のインタラクションモード値を参照)。

        Code Block
        languagejs
        phonegap cordova plugin add appd-plugin-eum-mobile --variable APP_KEY="<#EUM_APP_KEY#>" --variable INTERACTION_CAPTURE_MODE=<see modes in table below> --variable SCREENSHOTS_ENABLED=<true|false> --variable LOGGING_LEVEL=[0-6] --save
        Appd tabs container
        Width800px
        Appd tab item
        tabNameiOS
        Capture Mode説明
        キャプチャなし0ユーザのインタラクションはキャプチャされません。
        ボタンの押下1ボタンの押下がキャプチャされます。
        テーブルセルの選択2テーブルセルの選択がキャプチャされます。
        テキストフィールドの選択4テキストフィールドの選択がキャプチャされます。
        テキストビューの選択8テキストビューの選択がキャプチャされます。
        すべて-1すべてのユーザインタラクションがキャプチャされます。
        Appd tab item
        tabNameAndroid
        Capture Mode説明
        キャプチャなし0ユーザのインタラクションはキャプチャされません。
        ボタンの押下1ボタンの押下がキャプチャされます。
        編集テキストの選択2編集テキストの選択がキャプチャされます。
        リスト項目の選択4リスト項目の選択がキャプチャされます。
        すべて-1すべてのユーザインタラクションがキャプチャされます。
      2. デフォルトでは、Cordova プラグインは http://google.com を使用し、Cordova iOS アプリケーションの接続をテストします。ただし、変数 REACHABILITY_HOST を URL に設定することで、別の URL を使用して接続をテストできます。次の例では、Cordova プラグインは、Cordova iOS アプリケーションの接続をテストするために http://example.com を使用するように設定されています。

        Code Block
        languagejs
        phonegap cordova plugin add appd-plugin-eum-mobile --variable APP_KEY="<#EUM_APP_KEY#>" --variable REACHABILITY_HOST=http://example.com --variable SCREENSHOTS_ENABLED=<true|false> --variable LOGGING_LEVEL=[0-6] --save
    3. モバイルアプリケーションを構築します。

      Code Block
      languagejs
      phonegap cordova build [android, ios]

    Cordova アプリケーション インストゥルメンテーションのカスタマイズ

    Cordova アプリケーションのカスタマイズ」を参照してください。例と簡単な説明を通して Cordova SDK を使用する方法を示します。