Azure Monitor Application Insights のリアル ユーザー監視を有効にする

  • [アーティクル]

Microsoft Azure Monitor の Application Insights JavaScript SDK を使用すると、JavaScript Web アプリケーションのパフォーマンスの監視と分析を可能にする、使用状況データが収集されます。 これは一般に、リアル ユーザー監視または RUM と呼ばれます。

Application Insights JavaScript SDK には、基本 SDK と追加機能用のいくつかのプラグインがあります。

Conceptual diagram that shows the Application Insights JavaScript SDK, its plugins/extensions, and their relationship to each other.

既定では、ページ ビューが収集されます。 ただし、既定でクリックも収集する必要がある場合は、クリック分析自動収集プラグインを追加することを検討してください。

デバッグ/テスト用のデバッグ プラグインとパフォーマンス プラグインが用意されています。 まれなケースとして、カスタム プラグインを追加して独自の拡張機能を構築することもできます。

前提条件

はじめに

このセクションの手順に従って、Application Insights JavaScript SDK を使用してアプリケーションをインストルメント化します。

ヒント

うれしいことに、 JavaScript をより簡単に有効にできるようになりました。 構成による JavaScript (Web) SDK ローダー スクリプトの挿入が利用可能な場面を確認しましょう。

JavaScript コードを追加する

Application Insights JavaScript SDK を使用して Application Insights を有効にするためのコードを追加するには、2 つの方法があります。

メソッド このメソッドはいつ使用しますか?
JavaScript (Web) SDK ローダー スクリプト ほとんどのお客様に、JavaScript (Web) SDK ローダー スクリプトをお勧めします。SDK を更新する必要なく、最新の更新プログラムを自動的に取得できるためです。 さらに、Application Insights JavaScript SDK を追加するページを制御することもできます。
npm パッケージ SDK をコードに持ち込んで、IntelliSense を有効にしたい場合があります。 このオプションは、より多くのカスタム イベントと構成を必要とする開発者にのみ必要です。 React、React Native、または Angular フレームワーク拡張機能を使用する予定の場合は、このメソッドが必要です。

  1. Application Insights を有効にしたい各ページの上部に JavaScript (Web) SDK ローダー スクリプトを貼り付けます。

    可能であれば、これを <head> セクションの最初のスクリプトとして追加すると、すべての依存関係に関する潜在的な問題を監視することができます。

    Internet Explorer 8 が検出されると、JavaScript SDK v2.x が自動的に読み込まれます。

    <script type="text/javascript">
!(function (cfg){function e(){cfg.onInit&&cfg.onInit(i)}var S,u,D,t,n,i,C=window,x=document,w=C.location,I="script",b="ingestionendpoint",E="disableExceptionTracking",A="ai.device.";"instrumentationKey"[S="toLowerCase"](),u="crossOrigin",D="POST",t="appInsightsSDK",n=cfg.name||"appInsights",(cfg.name||C[t])&&(C[t]=n),i=C[n]||function(l){var d=!1,g=!1,f={initialize:!0,queue:[],sv:"7",version:2,config:l};function m(e,t){var n={},i="Browser";function a(e){e=""+e;return 1===e.length?"0"+e:e}return n[A+"id"]=i[S](),n[A+"type"]=i,n["ai.operation.name"]=w&&w.pathname||"_unknown_",n["ai.internal.sdkVersion"]="javascript:snippet_"+(f.sv||f.version),{time:(i=new Date).getUTCFullYear()+"-"+a(1+i.getUTCMonth())+"-"+a(i.getUTCDate())+"T"+a(i.getUTCHours())+":"+a(i.getUTCMinutes())+":"+a(i.getUTCSeconds())+"."+(i.getUTCMilliseconds()/1e3).toFixed(3).slice(2,5)+"Z",iKey:e,name:"Microsoft.ApplicationInsights."+e.replace(/-/g,"")+"."+t,sampleRate:100,tags:n,data:{baseData:{ver:2}},ver:4,seq:"1",aiDataContract:undefined}}var h=-1,v=0,y=["js.monitor.azure.com","js.cdn.applicationinsights.io","js.cdn.monitor.azure.com","js0.cdn.applicationinsights.io","js0.cdn.monitor.azure.com","js2.cdn.applicationinsights.io","js2.cdn.monitor.azure.com","az416426.vo.msecnd.net"],k=l.url||cfg.src;if(k){if((n=navigator)&&(~(n=(n.userAgent||"").toLowerCase()).indexOf("msie")||~n.indexOf("trident/"))&&~k.indexOf("ai.3")&&(k=k.replace(/(\/)(ai\.3\.)([^\d]*)$/,function(e,t,n){return t+"ai.2"+n})),!1!==cfg.cr)for(var e=0;e<y.length;e++)if(0<k.indexOf(y[e])){h=e;break}var i=function(e){var a,t,n,i,o,r,s,c,p,u;f.queue=[],g||(0<=h&&v+1<y.length?(a=(h+v+1)%y.length,T(k.replace(/^(.*\/\/)([\w\.]*)(\/.*)$/,function(e,t,n,i){return t+y[a]+i})),v+=1):(d=g=!0,o=k,c=(p=function(){var e,t={},n=l.connectionString;if(n)for(var i=n.split(";"),a=0;a<i.length;a++){var o=i[a].split("=");2===o.length&&(t[o[0][S]()]=o[1])}return t[b]||(e=(n=t.endpointsuffix)?t.location:null,t[b]="https://"+(e?e+".":"")+"dc."+(n||"services.visualstudio.com")),t}()).instrumentationkey||l.instrumentationKey||"",p=(p=p[b])?p+"/v2/track":l.endpointUrl,(u=[]).push((t="SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details)",n=o,r=p,(s=(i=m(c,"Exception")).data).baseType="ExceptionData",s.baseData.exceptions=[{typeName:"SDKLoadFailed",message:t.replace(/\./g,"-"),hasFullStack:!1,stack:t+"\nSnippet failed to load ["+n+"] -- Telemetry is disabled\nHelp Link: https://go.microsoft.com/fwlink/?linkid=2128109\nHost: "+(w&&w.pathname||"_unknown_")+"\nEndpoint: "+r,parsedStack:[]}],i)),u.push((s=o,t=p,(r=(n=m(c,"Message")).data).baseType="MessageData",(i=r.baseData).message='AI (Internal): 99 message:"'+("SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details) ("+s+")").replace(/\"/g,"")+'"',i.properties={endpoint:t},n)),o=u,c=p,JSON&&((r=C.fetch)&&!cfg.useXhr?r(c,{method:D,body:JSON.stringify(o),mode:"cors"}):XMLHttpRequest&&((s=new XMLHttpRequest).open(D,c),s.setRequestHeader("Content-type","application/json"),s.send(JSON.stringify(o))))))},a=function(e,t){g||setTimeout(function(){!t&&f.core||i()},500),d=!1},T=function(e){var n=x.createElement(I),e=(n.src=e,cfg[u]);return!e&&""!==e||"undefined"==n[u]||(n[u]=e),n.onload=a,n.onerror=i,n.onreadystatechange=function(e,t){"loaded"!==n.readyState&&"complete"!==n.readyState||a(0,t)},cfg.ld&&cfg.ld<0?x.getElementsByTagName("head")[0].appendChild(n):setTimeout(function(){x.getElementsByTagName(I)[0].parentNode.appendChild(n)},cfg.ld||0),n};T(k)}try{f.cookie=x.cookie}catch(p){}function t(e){for(;e.length;)!function(t){f[t]=function(){var e=arguments;d||f.queue.push(function(){f[t].apply(f,e)})}}(e.pop())}var r,s,n="track",o="TrackPage",c="TrackEvent",n=(t([n+"Event",n+"PageView",n+"Exception",n+"Trace",n+"DependencyData",n+"Metric",n+"PageViewPerformance","start"+o,"stop"+o,"start"+c,"stop"+c,"addTelemetryInitializer","setAuthenticatedUserContext","clearAuthenticatedUserContext","flush"]),f.SeverityLevel={Verbose:0,Information:1,Warning:2,Error:3,Critical:4},(l.extensionConfig||{}).ApplicationInsightsAnalytics||{});return!0!==l[E]&&!0!==n[E]&&(t(["_"+(r="onerror")]),s=C[r],C[r]=function(e,t,n,i,a){var o=s&&s(e,t,n,i,a);return!0!==o&&f["_"+r]({message:e,url:t,lineNumber:n,columnNumber:i,error:a,evt:C.event}),o},l.autoExceptionInstrumented=!0),f}(cfg.cfg),(C[n]=i).queue&&0===i.queue.length?(i.queue.push(e),i.trackPageView({})):e();})({
src: "https://js.monitor.azure.com/scripts/b/ai.3.gbl.min.js",
// name: "appInsights",
// ld: 0,
// useXhr: 1,
crossOrigin: "anonymous",
// onInit: null,
// cr: 0,
cfg: { // Application Insights Configuration
 connectionString: "YOUR_CONNECTION_STRING"
}});
</script>

  2. (省略可能) Web ページの読み込みを最適化する、または読み込みエラーを解決する必要があるかどうかに応じて、オプションの JavaScript (Web) SDK ローダー スクリプト構成を追加または更新します。

    Screenshot of the JavaScript (Web) SDK Loader Script. The parameters for configuring the JavaScript (Web) SDK Loader Script are highlighted.

JavaScript (Web) SDK ローダー スクリプトの構成

名前 Type 必須 説明
src string 必須 SDK の読み込み元の完全な URL。 この値は、動的に追加される <script /> タグの "src" 属性に使用されます。 パブリック CDN の場所を使用することも、プライベートにホストされている独自の場所を使用することもできます。
name string 省略可能 初期化された SDK のグローバル名。 2 つの異なる SDK を同時に初期化する必要がある場合は、この設定を使用します。

既定値は appInsights であるため、window.appInsights は初期化されたインスタンスへの参照です。

注: name 値を割り当てる、または前のインスタンスがグローバル名 appInsightsSDK に割り当てられている場合、正しい JavaScript (Web) SDK ローダー スクリプト スケルトンとプロキシ メソッドが初期化および更新されていることを保証するために、SDK 初期化コードでは、その値がグローバル名前空間内に window.appInsightsSDK=<name value> として存在する必要があります。
ld ミリ秒単位の数値 オプション SDK の読み込みを試行するまで待機する読み込み遅延を定義します。 JavaScript (Web) SDK ローダー スクリプトが間違ったタイミングで読み込みを行うために HTML ページの読み込みに失敗する場合は、この設定を使用します。

既定値は、タイムアウト後 0 ミリ秒です。 負の値を使用すると、スクリプト タグがページの <head> 領域にすぐに追加され、スクリプトが読み込まれるか失敗するまでページ読み込みイベントがブロックされます。
useXhr boolean 省略可能 この設定は、SDK 読み込みエラーのレポートにのみ使用されます。 この設定は、たとえば、JavaScript (Web) SDK ローダー スクリプトが HTML ページの読み込みを妨げ、fetch() を使用できなくしている場合に便利です。

報告では、まず fetch() の使用を試みてから (使用可能な場合)、XHR にフォールバックします。 フェッチ チェックをバイパスするには、この設定を true にします。 この設定は、JavaScript (Web) SDK ローダー スクリプトが正常に読み込みを行っていない場合など、フェッチで失敗イベントの送信に失敗する環境でアプリケーションが使用されている場合にのみ必要です。
crossOrigin string 省略可能 この設定を追加すると、SDK をダウンロードするために追加されたスクリプト タグに、この文字列値が設定された crossOrigin 属性が含まれます。 CORS のサポートを提供する必要がある場合は、この設定を使用します。 定義されていない場合 (既定値)、crossOrigin 属性は追加されません。 推奨値は未定義 (既定値)を表す ""、または "anonymous" です。 すべての有効な値については、クロス オリジンの HTML 属性に関するドキュメントをご覧ください。
onInit function(aiSdk) { ... } オプション このコールバック関数の呼び出しは、メインの SDK スクリプトが (src 値に基づいて) 正常に読み込まれ、CDN から初期化された後に行われます。 このコールバック関数は、テレメトリ初期化子を挿入する必要がある場合に便利です。 これには、その呼び出しが行われている SDK インスタンスへの参照である 1 つの引数が渡されます。また、この呼び出しは、最初の初期ページ ビューの前にも実行されます。 SDK が既に読み込まれて初期化されていても、このコールバックは呼び出されます。 注: sdk.queue 配列の処理中に、このコールバックが呼び出されます。 それ以上の項目は無視および削除されるため、キューに追加できません。 (JavaScript (Web) SDK ローダー スクリプト バージョン 5 の一部として追加されました -- スクリプト内の sv:"5" の値)。
cr boolean 省略可能 SDK の読み込みに失敗し、src に定義されているエンドポイント値がパブリック CDN の場所である場合、この構成オプションは、次のいずれかのバックアップ CDN エンドポイントから SDK を直ちに読み込もうとします。
  • js.monitor.azure.com
  • js.cdn.applicationinsights.io
  • js.cdn.monitor.azure.com
  • js0.cdn.applicationinsights.io
  • js0.cdn.monitor.azure.com
  • js2.cdn.applicationinsights.io
  • js2.cdn.monitor.azure.com
  • az416426.vo.msecnd.net
注: az416426.vo.msecnd.net のサポートは部分的であるため、お勧めしません。

SDK がバックアップ CDN エンドポイントから正常に読み込まれた場合は、最初に使用可能なものから読み込まれます。これは、サーバーが正常な読み込みのチェックを実行したときに決定されます。 SDK がいずれかのバックアップ CDN エンドポイントからの読み込みに失敗した場合は、SDK の失敗に関するエラー メッセージが表示されます。

定義されていない場合、既定値は true です。 バックアップ CDN エンドポイントから SDK を読み込まない場合は、この構成オプションを false に設定します。

プライベートにホストされている独自の CDN エンドポイントから SDK を読み込む場合、この構成オプションは適用されません。

お使いの環境で接続文字列を貼り付ける

環境内に接続文字列を貼り付けるには、次の手順に従います。

  1. Application Insights リソースの [概要] ペインに移動します。

  2. [接続文字列] を見つけます。

  3. [クリップボードにコピー] アイコンを選択して、接続文字列をクリップボードにコピーします。

    Screenshot that shows Application Insights overview and connection string.

  4. JavaScript コード内のプレースホルダー "YOUR_CONNECTION_STRING" を、クリップボードにコピーした接続文字列に置き換えます。

    connectionString の形式は、"InstrumentationKey=xxxx;...." に従う必要があります。 指定された文字列がこの形式を満たしていない場合、SDK の読み込みプロセスは失敗します。

    接続文字列は、セキュリティ トークンまたはキーとは見なされません。 詳細については、「新しい Azure リージョンでは、接続文字列を使用する必要がありますか」を参照してください。

(省略可能) SDK 構成を追加する

初期化中に、オプションの SDK 構成が Application Insights JavaScript SDK に渡されます。

SDK 構成を追加するには、connectionString の下に各構成オプションを直接追加します。 次に例を示します。

Screenshot of JavaScript code with SDK configuration options added and highlighted.

(省略可能) 高度な SDK 構成を追加する

特定のフレームワークのためにプラグインによって提供される追加機能を使用し、オプションで Click Analytics プラグインを有効にしたい場合は、次を参照してください。

データが流れていることを確認する

  1. SDK を有効にした Application Insights リソースに移動します。

  2. 左側の Application Insights リソース メニューの [調査] で、[Transaction search] (トランザクションの検索) ウィンドウを選択します。

  3. [イベントの種類] ドロップダウン メニューを開き、[すべて選択] を選択して、メニューのチェック ボックスをオフにします。

  4. [イベントの種類] ドロップダウン メニューで、次を選択します。

    • Azure Monitor Application Insights のリアル ユーザー監視のページ ビュー
    • Click Analytics Auto-Collection プラグインのカスタム イベント。

    データがポータルに表示されるまでに数分かかる場合があります。 表示されるデータが読み込みエラーの例外である場合は、「JavaScript Web アプリの SDK 読み込みエラーのトラブルシューティング」を参照してください。

    異なるバージョンの Application Insights の複数のインスタンスが同じページで実行されている場合、初期化中にエラーが発生する場合があります。 このような場合、および表示されるエラー メッセージについては、1 つのセッションにおける複数バージョンの Application Insights JavaScript SDK の実行に関する記事を参照してください。 これらのエラーのいずれかが発生した場合は、name 設定を使用して名前空間を変更してみてください。 詳細については、「JavaScript (Web) SDK ローダー スクリプトの構成」を参照してください。

    Screenshot of the Application Insights Transaction search pane in the Azure portal with the Page View option selected. The page views are highlighted.

  5. データが流れていることを確認するためにデータのクエリを実行するには、次のようにします。

    1. 左側のペインで [ログ] を選択します。

      [ログ] を選択すると、[クエリ] ダイアログが開き、データに関連するサンプル クエリが示されます。

    2. 実行するサンプル クエリの [実行] を選択します。

    3. 必要に応じて、Kusto 照会言語 (KQL) を使用して、サンプル クエリを更新したり、新しいクエリを作成したりできます。

      重要な KQL 演算子については、一般的な KQL 演算子に関する記事を参照してください。

よく寄せられる質問

このセクションでは、一般的な質問への回答を示します。

ユーザー数とセッション数とは何ですか?

  • JavaScript SDK では、Web クライアントにユーザー Cookie を設定することで戻ってきたユーザーを識別し、セッション Cookie を設定することでグループ アクティビティを識別します。
  • クライアント側のスクリプトがない場合は、サーバーで Cookie を設定できます。
  • 1 人の実在するユーザーが、複数の異なるブラウザーや、プライベート/シークレット ブラウズ、または複数のコンピューターでサイトを利用した場合、それらは複数のユーザーとしてカウントされます。
  • 複数のコンピューターやブラウザー間でサインイン済みのユーザーを識別するには、setAuthenticatedUserContext() の呼び出しを追加します。

SDK のパフォーマンスとオーバーヘッドについて教えてください。

Application Insights JavaScript SDK は、Web サイトに対して最小限のオーバーヘッドがかかります。 SDK は、ちょうど 36 KB に gzip 圧縮され、初期化に 15 ミリ秒以下しかかからないため、Web サイトの読み込み時間にほとんど影響はありません。 SDK を使用すると、ライブラリの最小限のコンポーネントがすばやく読み込まれ、完全なスクリプトがバックグラウンドでダウンロードされます。

さらに、スクリプトが CDN からダウンロードされている間は、ページのすべての追跡がキューに登録されるため、ページのライフ サイクル全体でテレメトリは一切失われません。 このセットアップ プロセスでは、ユーザーには見えないシームレスな分析システムを使用してページが提供されます。

JavaScript SDK でサポートされているブラウザーは何ですか?

Chrome Firefox IE Opera Safari
Chrome 最新バージョン ✔ Firefox 最新バージョン ✔ v3.x: IE 9+ & Microsoft Edge ✔
v2.x: IE 8+ Compatible & Microsoft Edge ✔		 Opera 最新バージョン ✔ Safari 最新バージョン ✔

JavaScript SDK のコードの例はどこで確認できますか?

実行できる例については、Application Insights JavaScript SDK サンプルを参照してください。

JavaScript SDK と ES3/Internet Explorer 8 の互換性について教えてください。

古いブラウザーで読み込まれたときに、この SDK が引き続き "動作" し、JavaScript の実行が中断されないように、必要な手段を講じる必要があります。 古いブラウザーをサポートしないことが理想的ですが、多くの大規模なお客様は、ユーザーが使用するブラウザーを制御できません。

このように述べることは、最も一般的ではない機能セットだけをサポートすることを意味するわけではありません。 ES3 コードの互換性を維持する必要があります。 ES3 JavaScript の解析を中断させない方法で、オプション機能として、新しい機能を追加する必要があります。

Internet Explorer 8 のサポートについて詳しくは、GitHub をご覧ください。

JavaScript SDK はオープンソースですか?

はい。Application Insights JavaScript SDK はオープンソースです。 ソース コードを見たり、プロジェクトに参加したりするには、GitHub の公式リポジトリをご覧ください。

サポート

  • アプリケーションを実行できないか、想定どおりにデータを取得していない場合は、専用のトラブルシューティングに関する記事を参照してください。
  • JavaScript SDK に関する一般的な質問については、「FAQ」を参照してください。
  • Azure サポートの問題については、Azure サポート チケットを開いてください。
  • Application Insights JavaScript SDK に関するオープン状態のイシューの一覧については、「GitHub イシュー ページ」を参照してください。
  • Telemetry Viewer 拡張機能を使用して、ネットワーク ペイロード内の個々のイベントを一覧表示し、Application Insights 内での内部呼び出しを監視します。

次のステップ