Abilitare Monitoraggio degli utenti reali di Application Insights di Monitoraggio di Azure
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à.
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
- Sottoscrizione di Azure: creare gratuitamente una sottoscrizione di Azure
- Risorsa di Application Insights: creare una risorsa di Application Insights
- Applicazione che usa JavaScript
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. |
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>
(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.
Configurazione dello script del caricatore sdk JavaScript (Web)
Incollare il stringa di connessione nell'ambiente
Per incollare il stringa di connessione nell'ambiente, seguire questa procedura:
Passare al riquadro Panoramica della risorsa di Application Insights.
Individuare la stringa di Connessione ion.
Selezionare l'icona Copia negli Appunti per copiare il stringa di connessione negli Appunti.
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:
(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
Passare alla risorsa di Application Insights per cui è stato abilitato l'SDK.
Nel menu delle risorse di Application Insights a sinistra selezionare il riquadro Ricerca transazioni in Ricerca transazioni.
Aprire il menu a discesa Tipi di evento e selezionare Seleziona tutto per deselezionare le caselle di controllo nel menu.
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).Per eseguire query sui dati per verificare che i dati vengano trasmessi:
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.
Selezionare Esegui per la query di esempio da eseguire.
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 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
- Esplorare le esperienze di utilizzo di Application Insights
- Tenere traccia delle visualizzazioni pagina
- Tenere traccia di eventi e metriche personalizzati
- Inserire un inizializzatore di telemetria JavaScript
- Aggiungere la configurazione di JavaScript SDK
- Per gli aggiornamenti e le correzioni di bug, vedere le note sulla versione dettagliate su GitHub.
- Eseguire query sui dati in Log Analytics.