Schnellstart: Beginnen der Überwachung Ihrer Website mit Azure Monitor Application InsightsQuickstart: Start monitoring your website with Azure Monitor Application Insights

In dieser Schnellstartanleitung erfahren Sie, wie Sie das Application Insights JavaScript SDK (Open Source) zu Ihrer Website hinzufügen.In this quickstart, you learn to add the open-source Application Insights JavaScript SDK to your website. Darüber hinaus wird gezeigt, wie Sie Erkenntnisse hinsichtlich der client-/browserseitigen Erfahrung Ihrer Websitebesucher gewinnen.You also learn how to better understand the client/browser-side experience for visitors to your website.

Mit Azure Monitor Application Insights können Sie ganz einfach die Verfügbarkeit, Leistung und Nutzung Ihrer Website überwachen.With Azure Monitor Application Insights, you can easily monitor your website for availability, performance, and usage. Sie können auch Fehler in Ihrer Anwendung schnell erkennen und diagnostizieren, ohne darauf warten zu müssen, dass diese Fehler von Benutzern gemeldet werden.You can also quickly identify and diagnose errors in your application without waiting for a user to report them. Application Insights bietet Funktionen für die serverseitige Überwachung und Funktionen für die client-/browserseitige Überwachung.Application Insights provides both server-side monitoring and client/browser-side monitoring capabilities.

VoraussetzungenPrerequisites

  • Ein Azure-Konto mit einem aktiven Abonnement.An Azure account with an active subscription. Sie können kostenlos ein Konto erstellen.Create an account for free.
  • Eine Website, der Sie das Application Insights JavaScript SDK hinzufügen könnenA website to which you can add the Application Insights JavaScript SDK.

Aktivieren von Application InsightsEnable Application Insights

Application Insights kann Telemetriedaten aus jeder mit dem Internet verbundenen Anwendung erfassen, die lokal oder in der Cloud ausgeführt wird.Application Insights can gather telemetry data from any internet-connected application that's running on-premises or in the cloud. Führen Sie die folgenden Schritte aus, um diese Daten anzuzeigen:Use the following steps to view this data:

  1. Melden Sie sich beim Azure-Portal an.Sign in to the Azure portal.

  2. Klicken Sie auf Ressource erstellen > Verwaltungstools > Application Insights.Select Create a resource > Management tools > Application Insights.

    Hinweis

    Wenn Sie zum ersten Mal eine Application Insights-Ressource erstellen, finden Sie unter Erstellen einer Application Insights-Ressource weitere Informationen dazu.If this is your first time creating an Application Insights resource, see Create an Application Insights resource.

  3. Wenn das Dialogfeld für die Konfiguration angezeigt wird, füllen Sie die Eingabefelder anhand der Informationen in der folgenden Tabelle aus:When the configuration box appears, use the following table to complete the input fields:

    EinstellungenSettings WertValue BeschreibungDescription
    NameName Global eindeutiger WertGlobally Unique Value Der Name, der die zu überwachende App identifiziertThe name that identifies the app you're monitoring.
    RessourcengruppeResource Group myResourceGroupmyResourceGroup Der Name der neuen Ressourcengruppe, die Application Insights-Daten hosten soll.The name for the new resource group to host Application Insights data. Sie können eine neue Ressourcengruppe erstellen oder eine bereits vorhandene Ressourcengruppe verwenden.You can create a new resource group or use an existing one.
    LocationLocation East USEast US Wählen Sie einen Standort in Ihrer Nähe oder in der Nähe des Standorts aus, an dem Ihre App gehostet wird.Choose a location near you, or near where your app is hosted.
  4. Klicken Sie auf Erstellen.Select Create.

Erstellen einer HTML-DateiCreate an HTML file

  1. Erstellen Sie auf Ihrem lokalen Computer eine Datei namens hello_world.html.On your local computer, create a file called hello_world.html. Erstellen Sie in diesem Beispiel die Datei im Stammverzeichnis von Laufwerk C, sodass das Ergebnis etwa wie folgt aussieht: C:\hello_world.html.For this example, create the file on the root of drive C so that it looks like C:\hello_world.html.

  2. Kopieren Sie das folgende Skript, und fügen Sie es in hello_world.html ein:Copy and paste the following script into hello_world.html:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Azure Monitor Application Insights</title>
    </head>
    <body>
    <h1>Azure Monitor Application Insights Hello World!</h1>
    <p>You can use the Application Insights JavaScript SDK to perform client/browser-side monitoring of your website. To learn about more advanced JavaScript SDK configurations, visit the <a href="https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md" title="API Reference">API reference</a>.</p>
    </body>
    </html>
    

Konfigurieren des Application Insights SDKConfigure Application Insights SDK

  1. Wählen Sie Übersicht aus, und kopieren Sie die Verbindungszeichenfolge Ihrer Anwendung.Select Overview and then copy your application's Connection String. In diesem Beispiel benötigen wir nur den Instrumentationsschlüsselteil der Verbindungszeichenfolge InstrumentationKey=00000000-0000-0000-0000-000000000000;.For this example, we only need the Instrumentation key part of the connection string InstrumentationKey=00000000-0000-0000-0000-000000000000;.

    Screenshot: Übersichtsseite mit dem Instrumentierungsschlüssel und der Verbindungszeichenfolge

  2. Fügen Sie der Datei hello_world.html das folgende Skript vor dem schließenden Tag </head> hinzu:Add the following script to your hello_world.html file before the closing </head> tag:

    <script type="text/javascript">
    !function(T,l,y){var S=T.location,k="script",D="instrumentationKey",C="ingestionendpoint",I="disableExceptionTracking",E="ai.device.",b="toLowerCase",w="crossOrigin",N="POST",e="appInsightsSDK",t=y.name||"appInsights";(y.name||T[e])&&(T[e]=t);var n=T[t]||function(d){var g=!1,f=!1,m={initialize:!0,queue:[],sv:"5",version:2,config:d};function v(e,t){var n={},a="Browser";return n[E+"id"]=a[b](),n[E+"type"]=a,n["ai.operation.name"]=S&&S.pathname||"_unknown_",n["ai.internal.sdkVersion"]="javascript:snippet_"+(m.sv||m.version),{time:function(){var e=new Date;function t(e){var t=""+e;return 1===t.length&&(t="0"+t),t}return e.getUTCFullYear()+"-"+t(1+e.getUTCMonth())+"-"+t(e.getUTCDate())+"T"+t(e.getUTCHours())+":"+t(e.getUTCMinutes())+":"+t(e.getUTCSeconds())+"."+((e.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}}}}var h=d.url||y.src;if(h){function a(e){var t,n,a,i,r,o,s,c,u,p,l;g=!0,m.queue=[],f||(f=!0,t=h,s=function(){var e={},t=d.connectionString;if(t)for(var n=t.split(";"),a=0;a<n.length;a++){var i=n[a].split("=");2===i.length&&(e[i[0][b]()]=i[1])}if(!e[C]){var r=e.endpointsuffix,o=r?e.location:null;e[C]="https://"+(o?o+".":"")+"dc."+(r||"services.visualstudio.com")}return e}(),c=s[D]||d[D]||"",u=s[C],p=u?u+"/v2/track":d.endpointUrl,(l=[]).push((n="SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details)",a=t,i=p,(o=(r=v(c,"Exception")).data).baseType="ExceptionData",o.baseData.exceptions=[{typeName:"SDKLoadFailed",message:n.replace(/\./g,"-"),hasFullStack:!1,stack:n+"\nSnippet failed to load ["+a+"] -- Telemetry is disabled\nHelp Link: https://go.microsoft.com/fwlink/?linkid=2128109\nHost: "+(S&&S.pathname||"_unknown_")+"\nEndpoint: "+i,parsedStack:[]}],r)),l.push(function(e,t,n,a){var i=v(c,"Message"),r=i.data;r.baseType="MessageData";var o=r.baseData;return o.message='AI (Internal): 99 message:"'+("SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details) ("+n+")").replace(/\"/g,"")+'"',o.properties={endpoint:a},i}(0,0,t,p)),function(e,t){if(JSON){var n=T.fetch;if(n&&!y.useXhr)n(t,{method:N,body:JSON.stringify(e),mode:"cors"});else if(XMLHttpRequest){var a=new XMLHttpRequest;a.open(N,t),a.setRequestHeader("Content-type","application/json"),a.send(JSON.stringify(e))}}}(l,p))}function i(e,t){f||setTimeout(function(){!t&&m.core||a()},500)}var e=function(){var n=l.createElement(k);n.src=h;var e=y[w];return!e&&""!==e||"undefined"==n[w]||(n[w]=e),n.onload=i,n.onerror=a,n.onreadystatechange=function(e,t){"loaded"!==n.readyState&&"complete"!==n.readyState||i(0,t)},n}();y.ld<0?l.getElementsByTagName("head")[0].appendChild(e):setTimeout(function(){l.getElementsByTagName(k)[0].parentNode.appendChild(e)},y.ld||0)}try{m.cookie=l.cookie}catch(p){}function t(e){for(;e.length;)!function(t){m[t]=function(){var e=arguments;g||m.queue.push(function(){m[t].apply(m,e)})}}(e.pop())}var n="track",r="TrackPage",o="TrackEvent";t([n+"Event",n+"PageView",n+"Exception",n+"Trace",n+"DependencyData",n+"Metric",n+"PageViewPerformance","start"+r,"stop"+r,"start"+o,"stop"+o,"addTelemetryInitializer","setAuthenticatedUserContext","clearAuthenticatedUserContext","flush"]),m.SeverityLevel={Verbose:0,Information:1,Warning:2,Error:3,Critical:4};var s=(d.extensionConfig||{}).ApplicationInsightsAnalytics||{};if(!0!==d[I]&&!0!==s[I]){var c="onerror";t(["_"+c]);var u=T[c];T[c]=function(e,t,n,a,i){var r=u&&u(e,t,n,a,i);return!0!==r&&m["_"+c]({message:e,url:t,lineNumber:n,columnNumber:a,error:i}),r},d.autoExceptionInstrumented=!0}return m}(y.cfg);function a(){y.onInit&&y.onInit(n)}(T[t]=n).queue&&0===n.queue.length?(n.queue.push(a),n.trackPageView({})):a()}(window,document,{
    src: "https://js.monitor.azure.com/scripts/b/ai.2.min.js", // The SDK URL Source
    // name: "appInsights", // Global SDK Instance name defaults to "appInsights" when not supplied
    // ld: 0, // Defines the load delay (in ms) before attempting to load the sdk. -1 = block page load and add to head. (default) = 0ms load after timeout,
    // useXhr: 1, // Use XHR instead of fetch to report failures (if available),
    crossOrigin: "anonymous", // When supplied this will add the provided value as the cross origin attribute on the script tag
    // onInit: null, // Once the application insights instance has loaded and initialized this callback function will be called with 1 argument -- the sdk instance (DO NOT ADD anything to the sdk.queue -- As they won't get called)
    cfg: { // Application Insights Configuration
        connectionString:"InstrumentationKey=YOUR_INSTRUMENTATION_KEY_GOES_HERE;" 
        /* ...Other Configuration Options... */
    }});
    </script>
    

    Hinweis

    Der aktuelle Codeausschnitt (oben aufgeführt) ist Version „5“. Die Version ist im Ausschnitt als „sv:"#"“ codiert, und die aktuelle Version und Konfigurationsdetails sind auf GitHub verfügbar.The current Snippet (listed above) is version "5", the version is encoded in the snippet as sv:"#" and the current version and configuration details are available on GitHub.

  3. Bearbeiten Sie hello_world.html, und fügen Sie Ihren Instrumentierungsschlüssel hinzu.Edit hello_world.html and add your instrumentation key.

  4. Öffnen Sie hello_world.html in einer lokalen Browsersitzung.Open hello_world.html in a local browser session. Mit dieser Aktion wird ein einzelner Seitenaufruf generiert.This action creates a single page view. Sie können Ihren Browser aktualisieren, um mehrere Testseitenaufrufe zu generieren.You can refresh your browser to generate multiple test-page views.

Überwachen Ihrer Website im Azure-PortalMonitor your website in the Azure portal

  1. Öffnen Sie jetzt im Azure-Portal erneut die Seite Übersicht für Application Insights, um Details zu Ihrer aktuell ausgeführten Anwendung anzuzeigen.Reopen the Application Insights Overview page in the Azure portal to view details of your currently running application. Auf der Seite Übersicht haben Sie den Instrumentierungsschlüssel abgerufen.The Overview page is where you retrieved your instrumentation key.

    Die vier Standarddiagramme auf der Übersichtsseite sind auf serverseitige Anwendungsdaten ausgelegt.The four default charts on the overview page are scoped to server-side application data. Da Sie die client-/browserseitigen Interaktionen mit dem JavaScript SDK instrumentieren, ist diese spezielle Ansicht nicht relevant (es sei denn, es ist auch ein serverseitiges SDK installiert).Because we're instrumenting the client/browser-side interactions with the JavaScript SDK, this particular view doesn't apply unless we also have a server-side SDK installed.

  2. Wählen Sie Protokolle aus.Select Logs. Mit dieser Aktion wird Protokolle geöffnet. Hier steht eine erweiterte Abfragesprache zum Analysieren aller Daten zur Verfügung, die von Application Insights gesammelt werden.This action opens Logs, which provides a rich query language for analyzing all data collected by Application Insights. Führen Sie die folgende Abfrage aus, um Daten im Zusammenhang mit den clientseitigen Browseranforderungen anzuzeigen:To view data related to the client-side browser requests, run the following query:

    // average pageView duration by name
    let timeGrain=1s;
    let dataset=pageViews
    // additional filters can be applied here
    | where timestamp > ago(15m)
    | where client_Type == "Browser" ;
    // calculate average pageView duration for all pageViews
    dataset
    | summarize avg(duration) by bin(timestamp, timeGrain)
    | extend pageView='Overall'
    // render result in a chart
    | render timechart
    

    Screenshot: Protokollanalysediagramm der Benutzeranforderungen in einem bestimmten Zeitraum

  3. Kehren Sie zur Seite Übersicht zurück.Go back to the Overview page. Wählen Sie unter der Überschrift Untersuchen die Option Leistung und anschließend die Registerkarte Browser aus. Metriken im Zusammenhang mit der Leistung Ihrer Website werden angezeigt.Under the Investigate header, select Performance then select the Browser tab. Metrics related to the performance of your website appear. Es gibt eine Ansicht zum Analysieren von Fehlern und Ausnahmen für Ihre Website.There's a corresponding view for analyzing failures and exceptions in your website. Sie können Beispiele auswählen, um auf die End-to-End-Transaktionsdetails zuzugreifen.You can select Samples to access the end-to-end transaction details.

    Screenshot: Registerkarte „Leistung“ mit dem Browsermetrikdiagramm

  4. Wählen Sie im Hauptmenü von Application Insights unter der Überschrift Nutzung die Option Benutzer aus, um die Analysetools für Benutzerverhalten zu erkunden.On the main Application Insights menu, under the Usage header, select Users to begin exploring the user behavior analytics tools. Da wir zum Testen einen einzelnen Computer verwenden, werden nur Daten für einen einzelnen Benutzer angezeigt.Because we're testing from a single machine, we'll only see data for one user.

  5. Für eine komplexere Website mit mehreren Seiten können Sie das Tool Benutzerabläufe verwenden, um die Navigation der Besucher auf Ihrer Website nachzuvollziehen.For a more complex website with multiple pages, you can use the User Flows tool to track the pathway that visitors take through the various parts of your website.

Informationen zu komplexeren Konfigurationen für die Websiteüberwachung finden Sie in der API-Referenz für das JavaScript SDK.To learn more advanced configurations for monitoring websites, see the JavaScript SDK API reference.

Bereinigen von RessourcenClean up resources

Wenn Sie planen, mit zusätzlichen Schnellstarts oder Tutorials fortzufahren, sollten Sie die in diesem Schnellstart erstellten Ressourcen nicht bereinigen.If you plan to continue working with additional quickstarts or tutorials, don't clean up the resources created in this quickstart. Führen Sie andernfalls die folgenden Schritte aus, um alle erstellten Ressourcen dieses Schnellstarts im Azure-Portal zu löschen.Otherwise, use the following steps to delete all resources created by this quickstart in the Azure portal.

Hinweis

Wenn Sie eine vorhandene Ressourcengruppe verwendet haben, funktionieren die folgenden Anweisungen nicht.If you used an existing resource group, the following instructions won't work. Stattdessen können Sie einfach die einzelne Application Insights-Ressource löschen.Instead, you can just delete the individual Application Insights resource. Denken Sie daran: Wenn Sie eine Ressourcengruppe löschen, werden auch alle zugrunde liegenden Ressourcen gelöscht, die Mitglieder dieser Gruppe sind.Keep in mind that when you delete a resource group, all underyling resources that are members of that group are deleted too.

  1. Wählen Sie im Azure-Portal im Menü auf der linken Seite Ressourcengruppen und dann myResourceGroup oder den Namen Ihrer temporären Ressourcengruppe aus.On the left menu on the Azure portal, select Resource groups, and then select myResourceGroup or the name of your temporary resource group.
  2. Wählen Sie auf der Seite mit Ihrer Ressourcengruppe die Option Löschen aus, geben Sie in das Textfeld myResourceGroup ein, und wählen Sie anschließend Löschen aus.On your resource group page, select Delete, enter myResourceGroup in the text box, and then select Delete.

Nächste SchritteNext steps