啟用 Azure 監視器 Application Insights 實際使用者監視

發行項
11/16/2023

Microsoft Azure 監視器 Application Insights JavaScript SDK 會收集使用量數據，讓您監視和分析 JavaScript Web 應用程式的效能。這通常稱為「實際用戶監視」或「RUM」。

Application Insights JavaScript SDK 具有基底 SDK 和數個外掛程式，可取得更多功能。

我們預設會收集頁面檢視。但是，如果您想要預設也收集點選，請考慮新增 Click Analytics 自動收集外掛程式：

如果您要新增架構延伸模組，您可以在遵循下列步驟開始后新增此擴充功能，您可以在新增架構擴充功能時選擇性地新增 Click Analytics。
如果您未新增架構擴充功能，請在遵循步驟開始之後新增 Click Analytics 外掛程式。

我們提供偵錯外掛程式和效能外掛程式來進行偵錯/測試。在極少數情況下，您可以藉由新增自定義外掛程式來建置自己的擴充功能。

必要條件

Azure 訂用帳戶：免費建立 Azure 訂用帳戶
Application Insights 資源：建立 Application Insights 資源
使用 JavaScript 的應用程式

開始使用

請遵循本節中的步驟，使用 Application Insights JavaScript SDK 檢測您的應用程式。

提示

好消息！我們可讓您更輕鬆地啟用 JavaScript。查看可用組態的 JavaScript （Web） SDK 載入器腳本插入位置！

新增 JavaScript 程式代碼

有兩種方法可用來新增程序代碼，以透過Application Insights JavaScript SDK 啟用 Application Insights：

方法	我何時會使用此方法？
JavaScript （Web） SDK 載入器腳本	對於大多數客戶，我們建議使用 JavaScript （Web） SDK 載入器腳本，因為您永遠不需要更新 SDK，而且會自動取得最新的更新。此外，您也可以控制要新增 Application Insights JavaScript SDK 的頁面。
NPM 套件	您想要將 SDK 帶入您的程式代碼，並啟用 IntelliSense。只有需要更多自定義事件和設定的開發人員才需要此選項。

JavaScript （Web） SDK 載入器腳本
NPM 套件

將 JavaScript （Web） SDK 載入器腳本貼到您想要啟用 Application Insights 的每個頁面頂端。

最好將其新增為區 <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>

（選擇性）視您需要優化網頁載入或解決載入錯誤而定，新增或更新選擇性的 JavaScript （Web） SDK 載入器腳本設定。

JavaScript （Web） SDK 載入器腳本設定

名稱	類型	是必要的嗎？	描述
src	string	必要	要從何處載入 SDK 的完整 URL。這個值用於動態新增 <文本/> 標記的 “src” 屬性。您可以使用公用 CDN 位置或您自己的私人裝載位置。
NAME	字串	選擇性	初始化 SDK 的全域名稱。如果您需要同時初始化兩個不同的 SDK，請使用此設定。默認值為 appInsights，因此 `window.appInsights` 是初始化實例的參考。注意：如果您指派名稱值，或先前的實例已指派給全域名稱 appInsightsSDK，SDK 初始化程式代碼會要求它位於全域命名空間 `window.appInsightsSDK=<name value>` 中，以確保正確的 JavaScript （Web） SDK 載入器腳本基本架構，並初始化和更新 Proxy 方法。
識別碼	ms 中的 number	選擇性	定義嘗試載入SDK之前要等待的載入延遲。當 HTML 頁面無法載入時，請使用此設定，因為 JavaScript （Web） SDK 載入器腳本在錯誤的時間載入。預設值在逾時後為 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） { ... }	選擇性	在成功從 CDN 載入並初始化主要 SDK 腳本之後，會呼叫此回呼函式（根據 src 值）。當您需要插入遙測初始化表達式時，此回呼函式很有用。它會傳遞一個自變數，這是針對所呼叫的SDK實例參考，也會在第一個初始頁面檢視之前呼叫。如果 SDK 已載入並初始化，仍會呼叫此回呼。注意：在處理 sdk.queue 陣列期間，會呼叫此回呼。您無法再將任何專案新增至佇列，因為它們會被忽略和卸除。（新增為 JavaScript （Web） SDK 載入器腳本第 5 版--腳本中的 sv：“5” 值。
鉻	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，則不適用此組態選項。

使用下列命令來安裝 Microsoft Application Insights JavaScript SDK - Web 套件。
```
npm i --save @microsoft/applicationinsights-web
```
此套件包含類型，因此您不需要安裝個別的輸入套件。

將下列 JavaScript 新增至應用程式的程式代碼。

新增此 JavaScript 程式代碼的位置和方式取決於您的應用程式程式代碼。例如，您可以完全如下面所示新增它，或者您可能需要建立包裝函式。

import { ApplicationInsights } from '@microsoft/applicationinsights-web'

const appInsights = new ApplicationInsights({ config: {
  connectionString: 'YOUR_CONNECTION_STRING'
  /* ...Other Configuration Options... */
} });
appInsights.loadAppInsights();
appInsights.trackPageView();

在您的環境中貼上連接字串

若要在您的環境中貼上連接字串，請遵循下列步驟：

流覽至 Application Insights 資源的 [概觀] 窗格。
找出連線字串。
選取 [複製到剪貼簿] 圖示，將連接字串複製到剪貼簿。
將 JavaScript 程式代碼中的佔位元"YOUR_CONNECTION_STRING"取代為複製到剪貼簿的連接字串。

connectionString格式必須遵循 “InstrumentationKey=xxxx;....”。如果提供的字串不符合此格式，SDK 載入程式就會失敗。

連接字串不會被視為安全性令牌或金鑰。如需詳細資訊，請參閱新的 Azure 區域是否需要使用連接字串？。

（選擇性）新增 SDK 組態

選擇性的 SDK 組態會在初始化期間傳遞至 Application Insights JavaScript SDK。

若要新增 SDK 組態，請直接在下 connectionString新增每個組態選項。例如：

（選擇性）新增進階 SDK 組態

如果您要針對特定架構使用外掛程式所提供的額外功能，並選擇性地啟用 Click Analytics 外掛程式，請參閱：

確認數據正在流動

移至您已啟用 SDK 的 Application Insights 資源。
在左側的 Application Insights 資源功能表中，選取 [調查] 下的 [交易搜尋] 窗格。
開啟 [ 事件類型] 下拉功能表，然後選取 [ 全部選取] 以清除功能表中的複選框。
從 [ 事件類型] 下拉功能表中，選取：
- Azure 監視器 Application Insights 實際使用者監視的頁面檢視
- Click Analytics 自動收集外掛程式的自定義事件 。
可能需要幾分鐘的時間，數據才會顯示在入口網站中。如果您看到的唯一數據是載入失敗例外狀況，請參閱針對 JavaScript Web 應用程式的 SDK 載入失敗進行疑難解答。

在某些情況下，如果多個不同版本的 Application Insights 實例在同一個頁面上執行，則初始化期間可能會發生錯誤。如需這些案例和出現的錯誤訊息，請參閱在一個會話中執行多個版本的 Application Insights JavaScript SDK。如果您遇到其中一個錯誤，請嘗試使用 name 設定來變更命名空間。如需詳細資訊，請參閱 JavaScript （Web） SDK 載入器腳本組態。
如果您要查詢資料以確認資料正在流動：
1. 選取左窗格中的 [ 記錄 ]。
  
  當您選取 [記錄] 時，[ 查詢] 對話框隨即開啟，其中包含與您的數據相關的範例查詢。
2. 針對您想要執行的範例查詢，選取 [ 執行 ]。
3. 如有需要，您可以使用 Kusto 查詢語言（KQL）來更新範例查詢或撰寫新的查詢。
  
  如需基本的 KQL 運算子，請參閱瞭解常見的 KQL 運算符。

常見問題集

本節提供常見問題的解答。

用戶和會話計數為何？

JavaScript SDK 會在 Web 用戶端上設定使用者 Cookie，以識別傳回的使用者，以及群組活動的會話 Cookie。
如果沒有用戶端文本，您可以在伺服器上設定 Cookie。
如果一位真實使用者在不同的瀏覽器中使用您的網站，或使用私人/無痕流覽或不同的計算機，則會多次計算這些網站。
若要識別跨計算機和瀏覽器登入的使用者，請新增 setAuthenticatedUserContext（）的呼叫。

什麼是 JavaScript SDK 效能/額外負荷？

Application Insights JavaScript SDK 在您的網站上具有最少的額外負荷。只有 36 KB 的 gzipped，而且只需要大約 15 毫秒才能初始化，SDK 會將可忽略的載入時間新增至您的網站。當您使用 SDK 時，連結庫的最小組件會快速載入，並在背景下載完整的腳本。

此外，當腳本從CDN下載時，您頁面的所有追蹤都會排入佇列，因此您不會在頁面的整個生命週期內遺失任何遙測。此設定程式會為您的頁面提供一個順暢的分析系統，讓使用者看不見。

JavaScript SDK 支援哪些瀏覽器？


Chrome Latest ✔	Firefox Latest ✔	v3.x：IE 9+ & Microsoft Edge ✔ v2.x：IE 8+ 相容的 & Microsoft Edge ✔	Opera Latest ✔	Safari Latest ✔

哪裡可以找到 JavaScript SDK 的程式代碼範例？

如需可執行的範例，請參閱 Application Insights JavaScript SDK 範例。

ES3/Internet Explorer 8 與 JavaScript SDK 的兼容性為何？

我們需要採取必要措施，以確保此 SDK 會繼續「運作」，且不會在較舊的瀏覽器載入時中斷 JavaScript 執行。它非常適合不支援較舊的瀏覽器，但許多大型客戶無法控制其用戶選擇使用的瀏覽器。

此語句並不表示我們只支援最低的常見功能集。我們需要維護 ES3 程式代碼相容性。必須以不會中斷ES3 JavaScript剖析和新增為選擇性功能的方式新增新功能。

如需 Internet Explorer 8 支援的完整詳細數據，請參閱 GitHub。

JavaScript SDK 是否開放原始碼？

是，Application Insights JavaScript SDK 開放原始碼。若要檢視原始碼或參與專案，請參閱官方 GitHub 存放庫。

支援

如果您無法執行應用程式或未如預期般取得數據，請參閱專用的疑難解答文章。
如需 JavaScript SDK 的常見問題，請參閱常見問題。
針對 Azure 支援問題，請開啟 Azure 支援票證。
如需與 Application Insights JavaScript SDK 相關的開啟問題清單，請參閱 GitHub 問題頁面。
使用遙測查看器擴充功能來列出網路承載中的個別事件，並在 Application Insights 內監視內部呼叫。

啟用 Azure 監視器 Application Insights 實際使用者監視

必要條件