Application Insights per pagine WebApplication Insights for web pages

Scoprire le prestazioni e l'utilizzo della pagina Web o dell'app.Find out about the performance and usage of your web page or app. Se si aggiunge Application Insights allo script di pagina, si ottengono gli intervalli di tempo di caricamento delle pagine e delle chiamate AJAX, i conteggi e i dettagli delle eccezioni del browser e degli errori AJAX, nonché i conteggi relativi a utenti e sessioni.If you add Application Insights to your page script, you get timings of page loads and AJAX calls, counts and details of browser exceptions and AJAX failures, as well as users and session counts. Tutti questi elementi possono essere segmentati per pagina, sistema operativo client e versione del browser, posizione geografica e altre dimensioni.All these can be segmented by page, client OS and browser version, geo location, and other dimensions. È possibile impostare avvisi relativi al numero di errori o rallentare il caricamento delle pagine.You can set alerts on failure counts or slow page loading. Inoltre, inserendo le chiamate di traccia nel codice JavaScript, è possibile rilevare come vengono usate le diverse funzionalità dell'applicazione della pagina Web.And by inserting trace calls in your JavaScript code, you can track how the different features of your web page application are used.

Application Insights è compatibile con tutte le pagine Web, con una minima aggiunta di codice JavaScript.Application Insights can be used with any web pages - you just add a short piece of JavaScript. Se il servizio Web è Java o ASP.NET, è possibile integrare i dati di telemetria dal server e dai client.If your web service is Java or ASP.NET, you can integrate telemetry from your server and clients.

In portal.azure.com aprire la risorsa dell'app e fare clic su Browser

È necessaria una sottoscrizione a Microsoft Azure.You need a subscription to Microsoft Azure. Se il team ha una sottoscrizione per l'organizzazione, chiedere al proprietario di aggiungervi l'account Microsoft dell'utente.If your team has an organizational subscription, ask the owner to add your Microsoft Account to it. Lo sviluppo e un uso su scala ridotta sono gratuiti.Development and small-scale use won't cost anything.

Installare Application Insights per la pagina WebSet up Application Insights for your web page

Aggiungere il frammento di codice del caricatore alle pagine Web, come indicato di seguito.Add the loader code snippet to your web pages, as follows.

Aprire o creare una risorsa Application InsightsOpen or create Application Insights resource

La risorsa di Application Insights è dove vengono visualizzati i dati sulle prestazioni e l'utilizzo della pagina.The Application Insights resource is where data about your page's performance and usage is displayed.

Accedere al portale di Azure.Sign into Azure portal.

Se è già stato configurato il monitoraggio per il lato server dell'app, si ha già una risorsa:If you already set up monitoring for the server side of your app, you already have a resource:

Scegliere Sfoglia, quindi Servizi per gli sviluppatori, Application Insights

Se non si ha un account, crearlo:If you don't have one, create it:

Scegliere Nuovo, quindi Servizi per gli sviluppatori, Application Insights.

Altre domande?Questions already? Altre informazioni sulla creazione di una risorsa.More about creating a resource.

Aggiungere lo script SDK per l'app o pagine WebAdd the SDK script to your app or web pages

In Avvio rapido ottenere lo script per le pagine Web:In Quick Start, get the script for web pages:

Nel pannello di panoramica delle app, scegliere Avvio rapido, quindi ottenere il codice per monitorare le pagine Web.

Inserire lo script poco prima del tag </head> di ogni pagina di cui si vuole tenere traccia. Se il sito Web presenta una pagina master, è possibile inserire lo script in tale posizione.Insert the script just before the </head> tag of every page you want to track. If your website has a master page, you can put the script there. ad esempio:For example:

  • In un progetto ASP.NET MVC inserire lo script in View\Shared\_Layout.cshtmlIn an ASP.NET MVC project, you'd put it in View\Shared\_Layout.cshtml
  • Nel pannello di controllo di un sito di SharePoint aprire Impostazioni sito/pagina Master.In a SharePoint site, on the control panel, open Site Settings / Master Page.

Lo script contiene la chiave di strumentazione che indirizza i dati alla risorsa di Application Insights.The script contains the instrumentation key that directs the data to your Application Insights resource.

Spiegazione più approfondita dello script.(Deeper explanation of the script.)

(Se si usa un framework di pagine Web noto, cercare adattatori Application Insights. Ad esempio, un modulo AngularJS.)(If you're using a well-known web page framework, look around for Application Insights adaptors. For example, there's an AngularJS module.)

Configurazione dettagliataDetailed configuration

Sono disponibili diversi parametri che è possibile impostare, anche se nella maggior parte dei casi non è necessario farlo.There are several parameters you can set, though in most cases, you shouldn't need to. È ad esempio possibile disabilitare o limitare il numero di chiamate AJAX segnalate per visualizzazione pagina allo scopo di ridurre il trafficoFor example, you can disable or limit the number of Ajax calls reported per page view (to reduce traffic). oppure impostare la modalità di debug per velocizzare lo spostamento dei dati di telemetria nella pipeline senza che vengano divisi in batch.Or you can set debug mode to have telemetry move rapidly through the pipeline without being batched.

Per impostare questi parametri, cercare la riga seguente nel frammento di codice e aggiungere altri elementi delimitati da virgole dopo la riga:To set these parameters, look for this line in the code snippet, and add more comma-separated items after it:

})({
  instrumentationKey: "..."
  // Insert here
});

I parametri disponibili includono:The available parameters include:

// Send telemetry immediately without batching.
// Remember to remove this when no longer required, as it
// can affect browser performance.
enableDebug: boolean,

// Don't log browser exceptions.
disableExceptionTracking: boolean,

// Don't log ajax calls.
disableAjaxTracking: boolean,

// Limit number of Ajax calls logged, to reduce traffic.
maxAjaxCallsPerView: 10, // default is 500

// Time page load up to execution of first trackPageView().
overridePageViewDuration: boolean,

// Set these dynamically for an authenticated user.
appUserId: string,
accountId: string,

Eseguire l'appRun your app

Eseguire l'app Web, usarla un periodo di tempo per generare dati di telemetria e attendere alcuni secondi.Run your web app, use it a while to generate telemetry, and wait a few seconds. È possibile eseguirla premendo F5 sul computer di sviluppo o pubblicarla e metterla a disposizione degli utenti.You can either run it using the F5 key on your development machine, or publish it and let users play with it.

Se si desidera controllare i dati di telemetria che un'app Web sta inviando ad Application Insights, usare gli strumenti di debug del browser (F12 in molti browser).If you want to check the telemetry that a web app is sending to Application Insights, use your browser's debugging tools (F12 on many browsers). I dati vengono inviati a dc.services.visualstudio.com.Data is sent to dc.services.visualstudio.com.

Esplorare i dati sulle prestazioni del browserExplore your browser performance data

Aprire il pannello Browser per visualizzare i dati sulle prestazioni aggregati relativi ai browser degli utenti.Open the Browser blade to show aggregated performance data from your users' browsers.

In portal.azure.com aprire la risorsa dell'app e fare clic su Impostazioni, Browser

Ancora nessun dato? Fare clic su **Aggiorna* nella parte superiore della pagina. Ancora niente di fatto? Vedere Risoluzione dei problemi.No data yet? Click Refresh at the top of the page. Still nothing? See Troubleshooting.*

Il pannello Browser è un pannello di Esplora metriche con selezioni di grafici e filtri predefiniti.The Browser blade is a Metrics Explorer blade with preset filters and chart selections. È possibile modificare l'intervallo di tempo, i filtri e la configurazione del grafico e salvare il risultato tra i preferiti.You can edit the time range, filters, and chart configuration if you want, and save the result as a favorite. Fare clic su Ripristina impostazioni predefinite per tornare alla configurazione originale del pannello.Click Restore defaults to get back to the original blade configuration.

Prestazioni di caricamento delle paginePage load performance

Nella parte superiore è presente un grafico segmentato relativo ai tempi di caricamento delle pagine.At the top is a segmented chart of page load times. L'altezza totale del grafico rappresenta il tempo medio di caricamento e visualizzazione delle pagine dall'app nel browser degli utenti.The total height of the chart represents the average time to load and display pages from your app in your users' browsers. Il tempo viene misurato dal momento in cui il browser invia la richiesta HTTP iniziale fino al termine dell'elaborazione di tutti gli eventi di caricamento sincrono, inclusi gli script di esecuzione e layout.The time is measured from when the browser sends the initial HTTP request until all synchronous load events have been processed, including layout and running scripts. Non sono incluse le attività asincrone, ad esempio il caricamento di Web part da chiamate AJAX.It doesn't include asynchronous tasks such as loading web parts from AJAX calls.

Il grafico segmenta il tempo totale di caricamento delle pagine negli intervalli di tempo standard definiti da W3C.The chart segments the total page load time into the standard timings defined by W3C.

Si noti che il tempo di connessione alla rete è spesso inferiore al previsto, perché è una media di tutte le richieste dal browser al server.Note that the network connect time is often lower than you might expect, because it's an average over all requests from the browser to the server. Molte richieste singole hanno un tempo di connessione pari a 0 perché esiste già una connessione attiva sul server.Many individual requests have a connect time of 0 because there is already an active connection to the server.

Caricamento lentoSlow loading?

Il caricamento lento delle pagine è tra le principali cause di insoddisfazione per gli utenti.Slow page loads are a major source of dissatisfaction for your users. Se il grafico indica caricamenti lenti delle pagine, è possibile eseguire delle semplici ricerche diagnostiche.If the chart indicates slow page loads, it's easy to do some diagnostic research.

Il grafico mostra la media di tutti i caricamenti di pagina nell'app.The chart shows the average of all page loads in your app. Per verificare se il problema è limitato a determinate pagine, vedere la griglia segmentata in base agli URL delle pagine più in basso nel pannello:To see if the problem is confined to particular pages, look further down the blade, where there's a grid segmented by page URL:

Si noti il conteggio delle visualizzazioni pagina e la deviazione standard.Notice the page view count and standard deviation. Se il conteggio delle pagine è molto basso, il problema non influisce molto sugli utenti.If the page count is very low, then the issue isn't affecting users much. Una deviazione standard elevata, paragonabile alla media stessa, indica grandi differenze tra le singole misure.A high standard deviation (comparable to the average itself) indicates a lot of variation between individual measurements.

Ingrandire un URL e una visualizzazione pagina.Zoom in on one URL and one page view. Fare clic su un nome di pagina per visualizzare un pannello relativo ai grafici del browser filtrati in base a tale URL e quindi fare clic sull'istanza di una visualizzazione pagina.Click any page name to see a blade of browser charts filtered just to that URL; and then on an instance of a page view.

Fare clic su ... per un elenco completo delle proprietà dell'evento oppure controllare le chiamate AJAX e gli eventi correlati.Click ... for a full list of properties for that event, or inspect the Ajax calls and related events. La lentezza delle chiamate AJAX influisce sul tempo di caricamento totale delle pagine se le chiamate sono sincrone.Slow Ajax calls affect the overall page load time if they are synchronous. Gli eventi correlati includono le richieste server per lo stesso URL, se Application Insights è stato configurato nel server Web.Related events include server requests for the same URL (if you've set up Application Insights on your web server).

Prestazioni delle pagine nel tempo.Page performance over time. Tornare al pannello Browser e trasformare la griglia del tempo di caricamento della visualizzazione pagina in un grafico a linee per verificare se ci sono stati picchi in orari specifici:Back at the Browsers blade, change the Page View Load Time grid into a line chart to see if there were peaks at particular times:

Fare clic sull'intestazione della griglia e selezionare un nuovo tipo di grafico

Segmentare in base ad altre dimensioni.Segment by other dimensions. Il caricamento delle pagine potrebbe risultare più lento in un determinato browser, un sistema operativo client o una località utente.Maybe your pages are slower to load on a particular browser, client OS, or user locality? Aggiungere un nuovo grafico e provare la dimensione Raggruppamento .Add a new chart and experiment with the Group-by dimension.

Prestazioni AJAXAJAX Performance

Assicurarsi che le prestazioni di tutte le chiamate AJAX nelle pagine Web siano soddisfacenti.Make sure any AJAX calls in your web pages are performing well. Spesso vengono usate per riempire parti della pagina in modo asincrono.They are often used to fill parts of your page asynchronously. Anche se la pagina in generale viene caricata tempestivamente, gli utenti potrebbero non essere soddisfatti dei tempi di caricamento e visualizzazione troppo lenti di alcune Web part.Although the overall page might load promptly, your users could be frustrated by staring at blank web parts, waiting for data to appear in them.

Le chiamate AJAX eseguite dalla pagina Web vengono visualizzate nel pannello Browser come dipendenze.AJAX calls made from your web page are shown on the Browsers blade as dependencies.

Sono disponibili grafici di riepilogo nella parte superiore del pannello:There are summary charts in the upper part of the blade:

e griglie dettagliate più in basso:and detailed grids lower down:

Fare clic su una riga per visualizzare i dettagli specifici.Click any row for specific details.

Nota

Se si elimina il filtro Browser nel pannello, le dipendenze AJAX e server verranno incluse entrambe in questi grafici.If you delete the Browsers filter on the blade, both server and AJAX dependencies are included in these charts. Fare clic su Ripristina impostazioni predefinite per riconfigurare il filtro.Click Restore Defaults to reconfigure the filter.

Per esaminare le chiamate AJAX non riuscite , scorrere verso il basso fino alla griglia degli errori di dipendenza e quindi fare clic su una riga per visualizzare le istanze specifiche.To drill into failed Ajax calls scroll down to the Dependency failures grid, and then click a row to see specific instances.

Fare clic su ... per visualizzare i dati di telemetria completi per una chiamata AJAX.Click ... for the full telemetry for an Ajax call.

Nessuna chiamata AJAX segnalataNo Ajax calls reported?

Le chiamate AJAX includono tutte le chiamate HTTP/HTTPS inviate dallo script della pagina Web.Ajax calls include any HTTP/HTTPS calls made from the script of your web page. Se non vengono segnalate, controllare che nel frammento di codice non siano impostati i parametri disableAjaxTracking o maxAjaxCallsPerView .If you don't see them reported, check that the code snippet doesn't set the disableAjaxTracking or maxAjaxCallsPerView parameters.

Eccezioni del browserBrowser exceptions

Nel pannello Browser è presente un grafico di riepilogo delle eccezioni, una griglia dei tipi di eccezione è disponibile più in basso nel pannello.On the Browsers blade, there's an exceptions summary chart, and a grid of exception types further down the blade.

Se le eccezioni del browser non vengono segnalate, controllare che nel frammento di codice non sia impostato il parametro disableExceptionTracking.If you don't see browser exceptions reported, check that the code snippet doesn't set the disableExceptionTracking parameter.

Esaminare singoli eventi di visualizzazione paginaInspect individual page view events

In genere la telemetria delle visualizzazioni di pagina viene analizzata da Application Insights e vengono quindi visualizzati solo i report cumulativi, mediati su tutti gli utenti del sito.Usually page view telemetry is analyzed by Application Insights and you see only cumulative reports, averaged over all your users. A scopo di debug, tuttavia, è possibile visualizzare anche singoli eventi di visualizzazione di pagina.But for debugging purposes, you can also look at individual page view events.

Nella falda di ricerca diagnostica, impostare Filtri su Visualizzazione pagina.In the Diagnostic Search blade, set Filters to Page View.

Selezionare qualsiasi evento per visualizzare altri dettagli.Select any event to see more detail. Nella pagina dei dettagli fare clic su "..." per visualizzare altri dettagli.In the details page, click "..." to see even more detail.

Nota

Se si usa Ricerca, si noti che è necessaria la corrispondenza dell'intera parola: "Informaz" e "Info" non corrispondono a "Informazioni".If you use Search, notice that you have to match whole words: "Abou" and "bout" do not match "About".

Per eseguire ricerche sulle visualizzazioni di pagina, è anche possibile usare l'avanzato linguaggio di query di Log Analytics.You can also use the powerful Log Analytics query language to search page views.

Proprietà delle visualizzazioni di paginaPage view properties

  • Durata della visualizzazione paginaPage view duration

    • Per impostazione predefinita, indica il tempo necessario per caricare la pagina, dalla richiesta del client al caricamento completo, inclusi i file ausiliari ma escludendo le attività asincrone come le chiamate Ajax.By default, the time it takes to load the page, from client request to full load (including auxiliary files but excluding asynchronous tasks such as Ajax calls).
    • Se si imposta overridePageViewDuration nella configurazione della pagina, indica l'intervallo tra la richiesta del client e l'esecuzione del primo trackPageView.If you set overridePageViewDuration in the page configuration, the interval between client request to execution of the first trackPageView. Se si sposta trackPageView dalla posizione consueta dopo l'inizializzazione dello script, rifletterà un valore diverso.If you moved trackPageView from its usual position after the initialization of the script, it will reflect a different value.
    • Se viene impostato il valore overridePageViewDuration e viene specificato un argomento Duration nella chiamata trackPageView(), viene usato invece il valore dell'argomento.If overridePageViewDuration is set and a duration argument is provided in the trackPageView() call, then the argument value is used instead.

Conteggi di pagina personalizzatiCustom page counts

Per impostazione predefinita, viene conteggiata una pagina ogni volta che una nuova pagina viene caricata nel browser client.By default, a page count occurs each time a new page loads into the client browser. Potrebbero tuttavia essere utile conteggiare visualizzazioni di pagina aggiuntive.But you might want to count additional page views. Ad esempio, il contenuto di una pagina potrebbe essere visualizzato in schede e si desidera conteggiare una pagina quando l'utente cambia schedaFor example, a page might display its content in tabs and you want to count a page when the user switches tabs. oppure un codice JavaScript nella pagina potrebbe caricare nuovi contenuti senza cambiare l'URL del browser.Or JavaScript code in the page might load new content without changing the browser's URL.

Inserire una chiamata JavaScript simile a questa nel punto appropriato nel codice del client:Insert a JavaScript call like this at the appropriate point in your client code:

appInsights.trackPageView(myPageName);

Il nome della pagina può contenere gli stessi caratteri di un URL, ma i caratteri successivi a "#" o "?" vengono ignorati.The page name can contain the same characters as a URL, but anything after "#" or "?" is ignored.

Monitoraggio dell'utilizzoUsage tracking

Per sapere in che modo gli utenti usano l'app,Want to find out what your users do with your app?

VideoVideo

Passaggi successiviNext steps