Abilitare Monitoraggio degli utenti reali di Application Insights di Monitoraggio di Azure

  • Articolo

Microsoft Azure Monitor Application Insights JavaScript SDK raccoglie i dati di utilizzo, che consente di monitorare e analizzare le prestazioni delle applicazioni Web JavaScript. Questo è comunemente definito Monitoraggio utenti reali o RUM.

Application Insights JavaScript SDK include un SDK di base e diversi plug-in per altre funzionalità.

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

Le visualizzazioni pagina vengono raccolte per impostazione predefinita. Tuttavia, se vuoi anche raccogliere clic per impostazione predefinita, prendi in considerazione l'aggiunta del plug-in Click Analytics Auto-Collection:

  • Se si aggiunge un'estensione del framework, che è possibile aggiungere dopo aver seguito i passaggi per iniziare, è possibile aggiungere facoltativamente Click Analytics quando si aggiunge l'estensione del framework.
  • Se non si aggiunge un'estensione del framework, aggiungere il plug-in Click Analytics dopo aver seguito la procedura per iniziare.

Forniamo il plug-in Debug e il plug-in Prestazioni per il debug/test. In rari casi, è possibile creare un'estensione personalizzata aggiungendo un plug-in personalizzato.

Prerequisiti

Attività iniziali

Seguire i passaggi descritti in questa sezione per instrumentare l'applicazione con Application Insights JavaScript SDK.

Suggerimento

Ottime notizie! L'abilitazione di JavaScript è ancora più semplice. Vedere dove è disponibile l'inserimento di script del caricatore SDK JavaScript (Web) in base alla configurazione.

Aggiungere il codice JavaScript

Sono disponibili due metodi per aggiungere il codice per abilitare Application Insights tramite Application Insights JavaScript SDK:

metodo Quando usare questo metodo?
Script del caricatore dell'SDK JavaScript (Web) Per la maggior parte dei clienti, è consigliabile usare lo script del caricatore JavaScript (Web) SDK perché non è mai necessario aggiornare l'SDK e ottenere automaticamente gli aggiornamenti più recenti. Inoltre, si ha il controllo sulle pagine a cui si aggiunge Application Insights JavaScript SDK.
Pacchetto npm Si vuole inserire l'SDK nel codice e abilitare IntelliSense. Questa opzione è necessaria solo per gli sviluppatori che richiedono più eventi e configurazione personalizzati. Questo metodo è obbligatorio se si prevede di usare l'estensione React, React Native o Angular Framework.

  1. Incollare lo script del caricatore DELL'SDK JavaScript (Web) nella parte superiore di ogni pagina per cui si vuole abilitare Application Insights.

    Preferibilmente, è consigliabile aggiungerlo come primo script nella <head> sezione in modo che possa monitorare eventuali problemi con tutte le dipendenze.

    Se viene rilevato Internet Explorer 8, JavaScript SDK v2.x viene caricato automaticamente.

    <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. (Facoltativo) Aggiungere o aggiornare la configurazione facoltativa dello script del caricatore SDK JavaScript (Web), a seconda che sia necessario ottimizzare il caricamento della pagina Web o risolvere gli errori di caricamento.

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

Configurazione dello script del caricatore sdk JavaScript (Web)

Nome Type Obbligatorio? Descrizione
src string Obbligatorio URL completo da cui caricare l'SDK. Questo valore viene usato per l'attributo "src" di uno script/>tag aggiunto <dinamicamente. È possibile usare la posizione rete CDN pubblica o privatamente ospitata.
name string Facoltativo Nome globale per l'SDK inizializzato. Usare questa impostazione se è necessario inizializzare due SDK diversi contemporaneamente.

Il valore predefinito è appInsights, quindi window.appInsights è un riferimento all'istanza inizializzata.

Nota: se si assegna un valore di nome o se è stata assegnata un'istanza precedente al nome globale appInsightsSDK, il codice di inizializzazione dell'SDK richiede che sia nello spazio dei nomi globale per window.appInsightsSDK=<name value> assicurarsi che lo scheletro dello script di caricamento dell'SDK JavaScript (Web) corretto e i metodi proxy vengano inizializzati e aggiornati.
ID numero in ms Facoltativo Definisce il ritardo di caricamento di attesa prima di tentare di caricare l'SDK. Usare questa impostazione quando la pagina HTML non viene caricata perché lo script del caricatore DELL'SDK JavaScript (Web) viene caricato in un momento errato.

Il valore predefinito è 0 ms dopo il timeout. Se si usa un valore negativo, il tag di script viene aggiunto immediatamente all'area <head> della pagina e blocca l'evento di caricamento della pagina fino a quando lo script non viene caricato o non riesce.
useXhr boolean Facoltativo Questa impostazione viene usata solo per segnalare errori di caricamento dell'SDK. Ad esempio, questa impostazione è utile quando lo script del caricatore JavaScript (Web) SDK impedisce il caricamento della pagina HTML, causando la mancata disponibilità di fetch().

La creazione di report tenta prima di usare fetch() se disponibile e quindi il fallback in XHR. Impostare questa impostazione su true per ignorare il controllo di recupero. Questa impostazione è necessaria solo se l'applicazione viene usata in un ambiente in cui il recupero non invia gli eventi di errore, ad esempio se lo script del caricatore DELL'SDK JavaScript (Web) non viene caricato correttamente.
crossOrigin string Facoltativo Includendo questa impostazione, il tag di script aggiunto per scaricare l'SDK include l'attributo crossOrigin con questo valore stringa. Usare questa impostazione quando è necessario fornire supporto per CORS. Se non è definito (impostazione predefinita), non viene aggiunto alcun attributo crossOrigin. I valori consigliati non sono definiti (impostazione predefinita), "" o "anonimo". Per tutti i valori validi, vedere la documentazione sull'attributo HTML tra origini.
Oninit function(aiSdk) { ... } Facoltativo Questa funzione di callback viene chiamata dopo il caricamento e l'inizializzazione dello script SDK principale dal rete CDN (in base al valore src). Questa funzione di callback è utile quando è necessario inserire un inizializzatore di telemetria. Viene passato un argomento, ovvero un riferimento all'istanza dell'SDK per cui viene chiamato e viene chiamato anche prima della prima visualizzazione pagina iniziale. Se l'SDK è già stato caricato e inizializzato, questo callback viene comunque chiamato. NOTA: durante l'elaborazione della matrice sdk.queue, questo callback viene chiamato. Non è possibile aggiungere altri elementi alla coda perché vengono ignorati e eliminati. Aggiunta come parte di JavaScript (Web) SDK Loader Script versione 5--the sv:"5" valore all'interno dello script.
Cr boolean Facoltativo Se l'SDK non viene caricato e il valore dell'endpoint definito per src è il percorso di rete CDN pubblico, questa opzione di configurazione tenta di caricare immediatamente l'SDK da uno degli endpoint di backup rete CDN seguenti:
  • 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
NOTA: az416426.vo.msecnd.net è parzialmente supportato, quindi non è consigliabile.

Se l'SDK viene caricato correttamente da un endpoint di backup rete CDN, viene caricato dal primo endpoint disponibile, che viene determinato quando il server esegue un controllo di caricamento riuscito. Se l'SDK non viene caricato da uno degli endpoint di rete CDN di backup, viene visualizzato il messaggio di errore dell'SDK.

Se non definito, il valore predefinito è true. Se non si vuole caricare l'SDK dagli endpoint di backup rete CDN, impostare questa opzione di configurazione su false.

Se si carica l'SDK dall'endpoint rete CDN ospitato privatamente, questa opzione di configurazione non è applicabile.

Incollare il stringa di connessione nell'ambiente

Per incollare il stringa di connessione nell'ambiente, seguire questa procedura:

  1. Passare al riquadro Panoramica della risorsa di Application Insights.

  2. Individuare la stringa di Connessione ion.

  3. Selezionare l'icona Copia negli Appunti per copiare il stringa di connessione negli Appunti.

    Screenshot that shows Application Insights overview and connection string.

  4. Sostituire il segnaposto "YOUR_CONNECTION_STRING" nel codice JavaScript con il stringa di connessione copiato negli Appunti.

    Il connectionString formato deve seguire "InstrumentationKey=xxxx;...". Se la stringa specificata non soddisfa questo formato, il processo di caricamento dell'SDK non riesce.

    Il stringa di connessione non è considerato un token di sicurezza o una chiave. Per altre informazioni, vedere Le nuove aree di Azure richiedono l'uso di stringa di connessione?.

(Facoltativo) Aggiungere la configurazione dell'SDK

La configurazione facoltativa dell'SDK viene passata all'SDK JavaScript di Application Insights durante l'inizializzazione.

Per aggiungere la configurazione dell'SDK, aggiungere ogni opzione di configurazione direttamente in connectionString. Ad esempio:

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

(Facoltativo) Aggiungere la configurazione avanzata dell'SDK

Se si vogliono usare le funzionalità aggiuntive fornite dai plug-in per framework specifici e, facoltativamente, abilitare il plug-in Click Analytics, vedere:

Verificare che i dati vengano trasmessi

  1. Passare alla risorsa di Application Insights per cui è stato abilitato l'SDK.

  2. Nel menu delle risorse di Application Insights a sinistra selezionare il riquadro Ricerca transazioni in Ricerca transazioni.

  3. Aprire il menu a discesa Tipi di evento e selezionare Seleziona tutto per deselezionare le caselle di controllo nel menu.

  4. Dal menu a discesa Tipi di evento selezionare:

    • Visualizzazione pagina per Monitoraggio di Azure Application Insights Monitoraggio utenti reale
    • Evento personalizzato per il plug-in Click Analytics Auto-Collection.

    La visualizzazione dei dati nel portale potrebbe richiedere alcuni minuti. Se gli unici dati visualizzati sono un'eccezione di errore di caricamento, vedere Risolvere gli errori di caricamento dell'SDK per le app Web JavaScript.

    In alcuni casi, se più istanze di versioni diverse di Application Insights vengono eseguite nella stessa pagina, possono verificarsi errori durante l'inizializzazione. Per questi casi e il messaggio di errore visualizzato, vedere Esecuzione di più versioni di Application Insights JavaScript SDK in una sessione. Se si è verificato uno di questi errori, provare a modificare lo spazio dei nomi usando l'impostazione name . Per altre informazioni, vedere Configurazione dello script del caricatore SDK JavaScript (Web).

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

  5. Per eseguire query sui dati per verificare che i dati vengano trasmessi:

    1. Selezionare Log nel riquadro sinistro.

      Quando si seleziona Log, viene visualizzata la finestra di dialogo Query che contiene query di esempio rilevanti per i dati.

    2. Selezionare Esegui per la query di esempio da eseguire.

    3. Se necessario, è possibile aggiornare la query di esempio o scrivere una nuova query usando Linguaggio di query Kusto (KQL).

      Per gli operatori KQL essenziali, vedere Informazioni sugli operatori KQL comuni.

Domande frequenti

Questa sezione fornisce le risposte alle domande comuni.

Quali sono i conteggi utente e sessione?

  • JavaScript SDK imposta un cookie utente nel client Web, per identificare gli utenti abituali, e un cookie di sessione per raggruppare le attività.
  • Se non è presente alcun script sul lato client, è possibile impostare i cookie nel server.
  • Se un utente reale usa il sito in browser diversi o tramite l'esplorazione in incognito/privato o in computer diversi, vengono conteggiati più di una volta.
  • Per identificare un utente connesso tra computer e browser, aggiungere una chiamata a setAuthenticatedUserContext().To identify a signed-in user across machines and browser, add a call to setAuthenticatedUserContext().

Qual è il sovraccarico/prestazioni di JavaScript SDK?

Application Insights JavaScript SDK comporta un sovraccarico minimo nel sito Web. A soli 36 KB di gzipped e richiede solo ~15 ms per inizializzare, l'SDK aggiunge una quantità trascurabile di tempo di caricamento al sito Web. I componenti minimi della libreria vengono caricati rapidamente quando si usa l'SDK e lo script completo viene scaricato in background.

Inoltre, mentre lo script viene scaricato dalla rete CDN, tutto il rilevamento della pagina viene accodato, quindi non si perdono dati di telemetria durante l'intero ciclo di vita della pagina. Questo processo di configurazione fornisce alla pagina un sistema di analisi facile che è invisibile agli utenti.

Quali browser sono supportati da JavaScript SDK?

Chrome Firefox IE Opera Safari
Chrome più recente ✔ Firefox più recente ✔ v3.x: Internet Explorer 9+ & Microsoft Edge ✔
v2.x: Compatibile con Internet Explorer 8+ e Microsoft Edge ✔		 Opera Latest ✔ Safari più recente ✔

Dove è possibile trovare esempi di codice per JavaScript SDK?

Per esempi eseguibili, vedere Esempi di Application Insights JavaScript SDK.

Qual è la compatibilità ES3/Internet Explorer 8 con JavaScript SDK?

È necessario adottare misure necessarie per garantire che questo SDK continui a funzionare e non interrompa l'esecuzione di JavaScript quando viene caricato da un browser precedente. Sarebbe ideale non supportare browser meno recenti, ma numerosi clienti di grandi dimensioni non possono controllare il browser che gli utenti scelgono di usare.

Questa istruzione non significa che sia supportato solo il set di funzionalità più basso comune. È necessario mantenere la compatibilità del codice ES3. Le nuove funzionalità devono essere aggiunte in modo da non interrompere l'analisi e l'aggiunta di ES3 JavaScript come funzionalità facoltativa.

Per informazioni dettagliate sul supporto di Internet Explorer 8, vedere GitHub.

JavaScript SDK è open source?

Sì, Application Insights JavaScript SDK è open source. Per visualizzare il codice sorgente o per contribuire al progetto, vedere il repository GitHub ufficiale.

Supporto

  • Se non è possibile eseguire l'applicazione o non si ottengono dati come previsto, vedere l'articolo dedicato sulla risoluzione dei problemi.
  • Per domande comuni su JavaScript SDK, vedere le domande frequenti.
  • Per supporto tecnico di Azure problemi, aprire un ticket di supporto tecnico di Azure.
  • Per un elenco dei problemi aperti relativi all'SDK JavaScript di Application Insights, vedere la pagina relativa ai problemi di GitHub.
  • Usare l'estensione Visualizzatore telemetria per elencare i singoli eventi nel payload di rete e monitorare le chiamate interne in Application Insights.

Passaggi successivi