[共通] WebAgent設定

IMQA Web Agentはサービスごとにオプションを異なるように与え、動作させることができます。

1. 必須設定

IMQA 使用設定

IMQA Web Agentはスクリプトをhtmlの<head>内部の最上段に挿入してください。以下の必須オプションを含めて正常に動作します。

Option Name

Type

Default Value

Description

imqaAgentUse

boolean

true

true : IMQA WebAgentを使用します。

false : IMQA Web Agentを使用していません。

projectKey

string

“PROJECT_KEY”

IMQAで生成したWPMプロジェクトのキーを入力します。

必須設定のみ適用したスクリプトは以下のとおりです。

Web-agent.jsをリンクする html <head>

// Connect IMQA web-agent.js
<script src="https://cdn.imqa.io/agent/web-agent-1.1.11.js"></script>
<script>
((w, c, _wv, _w, _wk, _mh, _b) => {
    w[c] = w[c] || {};
    function imqaConf(key, value){w[c][key]=value};

    imqaConf("imqaAgentUse", true); // Whether IMQA Agent is enabled
    imqaConf("projectKey", "PROJECT_KEY"); // User Project Key

    w[_w](w);
})(window, 'imqaClientConfig', 'IMQAWebviewMain', 'IMQAWebMain', 'webkit', 'messageHandlers', 'ImqaBridge')
</script>

クロスドメイン設定

IMQAにおいて分析するメインドメインの他にクロスドメインを設定することができます。サブドメイン(例：m.imqa.io)別途構成されている場合やCORS(オリジン間リソース共有)へのアクセスが必要な場合、許可するオリジンを指定することができます。

① IMQA WPMプロジェクトの [···] アイコンをクリックすると、プロジェクト管理メニューを表示します。

② [クロスドメイン設定]をクリックします。

③ 基本プロジェクトを作成するときに入力したメインドメインのURLが設定されており、Webサイトの構成により、サブドメインまたはオリジン間リソース共有へのアクセスを許可するオリジンを入力します。

許可ドメインの設定例)

許可ドメインのURLへのアクセスを許可するドメイン一覧を指定します。(例： http://localhost:8080)

1行で区切って入力することができ、プロトコルおよびポート番号、大文字と小文字を区別し、*文字を含めることはできません。

④ 許可されたドメイン一覧を入力し、[保存]をクリックします。

⑤ 入力した許可されたドメイン一覧からデータをリアルタイムで収集するように設定されており、IMQAにおいて確認することができます。

IMQA WebAgentは基本的にユーザーのWebブラウザアプリケーションの構成において重要な単位でのみデータが収集できるようにサポートし、インストール用のコードの複製によるライセンス保護などのため、許可されたドメインでのみデータを収集します。メインドメインURLの他に、性能データを収集したいドメインがあれば、クロスドメイン設定機能により許可されたドメイン一覧を設定する必要があります。

URLパターン設定

WebサイトのURLのパターンを探し、好きな形に置き換えてIMQAで収集することができます。URLの数字、識別子(例：流入ID、ユーザーID、検索クエリなど)の置き換え、類似したページを意味のある集計単位にグループ化することができます。

IMQA WPMは基本的にユーザーが接続した原始URLデータを収集します。ユーザーがWebサイトを利用するとき、複数の識別子、検索クエリなどでURLが断片化される可能性が高いページの場合、URLパターン設定により有意義な集計/分析の単位を定義することを推奨します。

❶ URLパターン

WebサイトのURLのパスまたはクエリパラメータにおいて、任意の形に置き換えるパターンを入力します。パスとクエリパラメータの単位を入力することができます。優先順位が高いURLパターンから適用され、クエリパラメータは「key=value」の形で入力する必要があります。

① WebサイトのURLの構成により、パスまたはクエリパラメータにおいて束ねたい単位に変数{group}を含めて入力します。 ② WebサイトのURLの構成により、パスまたはクエリパラメータにおいて解きたい単位に変数{value}を含めて入力します。 ③ URLパターンを入力し、[+]アイコンをクリックします。

URLパターン設定例 1)
「商品詳細ページのURLである「products」パスの後の数字を束ねて一つのページで集計/分析したいです。クエリパラメータは詳しく区別しなくても大丈夫です。」

① 特定の「パス」に適用するURLパターンを変数{group}を含めて入力します。 ② 設定時点から収集されるURLをご希望の形に置き換えてIMQAにおいて「ページ」単位で確認することができます。

URLパターン設定例 2)
「メインページに流入されるタイプを区別したいです。URLのクエリパラメータに付く外部からの流入ID「fbclid」、「NaPm」、「gclid」は表示し、値は詳しく区別しなくても大丈夫です。」

① 特定の「パス」と「クエリパラメータ」に適用するURLパターンを変数{group}を含めて入力します。 ② 設定時点から収集されるURLをご希望の形に置き換えてIMQAにおいて「ページ」単位で確認することができます。

URLパターン設定例 3)
「ベスト商品の一覧ページから各カテゴリータイプを区別したいです。「best」パスのURLクエリパラメータに付くカテゴリーID「category_id」と値を区別し、他のクエリパラメータは詳しく区別しなくても大丈夫です。」

① 特定の「パス」と「クエリパラメータ」に適用するURLのパターンを、変数{value}を含めて入力します。 ② 設定時点から収集されるURLをご希望の形に置き換えてIMQAにおいて「ページ」単位で確認することができます。

❷ 優先順位

URLパターンを適用する順番を表示します。優先順位の高いURLパターンから適用され、順番を変更することができます。

優先順位の設定例) 「商品詳細ページのURLである「products」パスの次の数字を束ねるパターンを適用していますが、メイン～商品詳細ページに移動するタイプの内部からの流入ID「flow」と外部からの流入ID「fbclid」でアクセスする場合を追加で区別したいです。」

① 優先順位が高い「パス」に適用されるURLパターンが優先的に適用されます。 ② 特定の「パス」と「クエリパラメータ」に適用するURLパターンの優先順位を高く変更します。

③ 設定した後、「クエリパラメータ」に適用されるURLパターンが優先的に適用され、ご希望の形に置き換えられます。

❸ URLパターン プロジェクトに設定されたすべてのURLパターンを一覧で表示します。

❹ 優先順位の変更 マウスドラッグでURLパターンを適用する順を設定することができます。

❺ 削除 追加したURLパターンを削除します。削除した場合、そのURLパターン項目が削除され、その後はURLパターンが適用されません。

適用するURLパターンと優先順位の設定が終わると、[保存]をクリックします。設定時点から収集されるURLをご希望の形に置き換えてIMQAにおいて「ページ」単位で確認することができます。

2. [WPM] SPA専用オプション

SPAでは1つのindex.htmlを基準に収集されるため、ページ変更に対するイベントはありません。 SPA専用オプションを設定して、pathが変更されたときの基準で一定時間までを収集することができます。 SPAでは、path変更時に特定のDOMが交換されるので、この特定のDOMをAgentオプションにターゲットに設定すると、正常にSPAでもページロード時間を収集することができます。

Option Name

Type

Default Value

Description

SPACollectInitTime

number

3000

デフォルト:3000 (3秒)

SPA 性能データ収集間隔をms（ミリ秒）単位で設定します。パスが変更されると、設定された収集時間中にデータを収集します。

SPARootDom

string

“#app”

CSSセレクタスタイルでターゲットとなるDOMを設定します。ターゲットとなったDOM基準でDOM変更を検知します。

(ID : #app, Class : .app)

重複するセレクタをターゲットに設定すると、正常に収集されません。

必須設定とSPA専用オプションを適用したスクリプトは以下の通りです。

Web-agent.jsをリンクする html <head

// Connect IMQA web-agent.js
<script src="https://cdn.imqa.io/agent/web-agent-1.1.11.js"></script>
<script>
((w, c, _wv, _w, _wk, _mh, _b) => {
    w[c] = w[c] || {};
    function imqaConf(key, value){w[c][key]=value};

    // Required Settings
    imqaConf("imqaAgentUse", true); // Whether IMQA Agent is enabled
    imqaConf("projectKey", "PROJECT_KEY"); // User Project Key

    // SPA-only option
    imqaConf("SPACollectInitTime", 5000); // SPA CollectInitTime
    imqaConf("SPARootDom", "#container"); // SPA ROOT DOM

    w[_w](w);
})(window, 'imqaClientConfig', 'IMQAWebviewMain', 'IMQAWebMain', 'webkit', 'messageHandlers', 'ImqaBridge')
</script>

3. [WPM] 行動分析の維持時間オプション

IMQAの行動分析で確認できるユーザー行動セッションの維持時間を設定できます。セッションはデフォルトの 30 分間保持され、ユーザーが 30 分間ページ移動がない場合は終了します。

コンテンツ中心のウェブサイトのように、平均的にユーザーがウェブサイトからページ移動せずに長時間利用する場合、セッションが終了しないように設定できます。

Option Name

Type

Default Value

Description

browserTxIdIntervalTime

number

800000

デフォルト: 1800000 (30分)

セッション保持時間をms（ミリ秒）単位で設定します。ユーザーの行動プロセスを維持するID値保持時間を設定します。

必須設定と行動分析の維持時間オプションを適用したスクリプトは以下の通りです。

Web-agent.jsをリンクする html <head>

// Connect IMQA web-agent.js
<script src="https://cdn.imqa.io/agent/web-agent-1.1.11.js"></script>
<script>
((w, c, _wv, _w, _wk, _mh, _b) => {
    w[c] = w[c] || {};
    function imqaConf(key, value){w[c][key]=value};

    // Required Settings
    imqaConf("imqaAgentUse", true); // Whether IMQA Agent is enabled
    imqaConf("projectKey", "PROJECT_KEY"); // User Project Key

    // Behavior Analysis Interval Time Options
    imqaConf("browserTxIdIntervalTime", 3600000); // Behavior Analysis Interval Time (1h)

    w[_w](w);
})(window, 'imqaClientConfig', 'IMQAWebviewMain', 'IMQAWebMain', 'webkit', 'messageHandlers', 'ImqaBridge')
</script>

4. [WPM] スクリプトの実行時間の測定

IMQAタイムラインでjavascriptで特定ロジックの作業時間をチェックすることが。 Performance標準のmark、measureを使えば簡単に追跡できます。各markとmeasureの中に入るテキストは重複しない固有のテキストとして定義してください。

フレームワークのコアに適用する際、追跡されるコードが異常に増え、メモリ漏れが発生する可能性がありますので、ご注意ください。

① 実行時間測定を希望するスクリプトの上段と下段にPerformance.markとmeasureを定義します。

Performance.mark, measure 예시코드


<script>
  function fun1(){
    performance.mark("fun1-start")

   // Code to measure performance...

    performance.mark("fun1-end")
    performance.measure("fun1-measure", "fun1-start", "fun1-end")
  }
</script>

② ‘ページロード時間詳細’ポップアップのスクリプト実行セクションでマーキングしたスクリプトを確認でき、そのスクリプト実行時間が表示されます。

以下のように、特定のスクリプトの実行時間も測定できます。

5. [WCrash] Custom Web Crash 発生

IMQA WebAgentでは、詳細なウェブエラー分析のために必要なエラーメッセージを指定してユーザー定義エラーを収集することができます。

ユーザー定義エラーを生成

IMQA WCrashはユーザーが定義したエラーを感知して収集します。

他のエラーでも同じエラータイプの場合、同一エラーと認識してエラーが累積する場合があります。

ユーザー定義エラーメッセージ指定

WebAgentで収集する基本エラーメッセージを希望するエラーメッセージに変更して収集することができます。詳細なウェブエラー分析のためにエラーメッセージを指定することをお勧めします。

エラーメッセージを指定する場合、同じエラータイプでも別のエラーで収集されます。

ユーザー定義エラーを収集するjsファイル

...
// If you use try catch
try {
	...
}
catch(e){
	throw new Error("User-specified error message");
}

// If you create a default error
new Error("User-specified error message");

Webクラッシュ分析

以下のようにIMQA WCrashサービスでWebクラッシュを詳細な情報とともに確認することができます。

❶ キャッチされたエラーインスタンスタイプ Webページでエラーが生成された場合、そのエラーのキャッチされたエラーインスタンス名を表示します。

Error Type

Description

Error

ユーザーが設定したエラータイプです。

EvalError

eval() で発生するエラーです。

RangeError

変数の有効な範囲を超えた場合に生成されるエラーです。

ReferenceError

誤った参照をした場合に生成されるエラーです。

SyntaxError

無効な構文が存在する場合のエラーです。

TypeError

有効な資料型でない場合は、そのタイプのエラーです。

URIError

encodeURI()や decodeURI() 関数に不適切なパラメータを渡した場合に生成されるエラーです。

AggregateError

複数のエラーを 1 つのエラーで包み込むエラー形式です。

❷ ユーザー定義エラーメッセージ 特定のエラータイプエラーが生成されるときに、ユーザーが指定したメッセージを表示します。

throw new Error("User-specified error message");

Previous[共通] WebAgentのインストール Next[共通] ブラウザ互換性

Last updated 1 year ago