Azure Application Insights for static web page?

Question

I have a basic .html page with the following code below. I'm using my real Instrumentation Key (not xxx) which I have setup for my Application Insights monitoring environment. Looks like it initializes successfully with no errors. However, I can't see any Incoming Requests, data, etc. (Live metrics, Performance).

NOTE: I do use this same Application Insights monitoring environment setup on Azure Portal for separate vb.NET websites/projects (those projects use NuGet packages) with no problems seeing incoming data. However, my static .html and .asp pages are grouped in a separate website within solution with no NuGet packages...just this script directly in example static page.

I retrieved example here --> https://github.com/Microsoft/ApplicationInsights-node.js/

<script type="text/javascript" src="https://js.monitor.azure.com/scripts/b/ai.2.min.js"></script> 
<script type="text/javascript">
    var snippet = {
        config: {
            instrumentationKey: "xxx"
        }
    };
    var init = new Microsoft.ApplicationInsights.ApplicationInsights(snippet);
    var appInsights = init.loadAppInsights();
    //appInsights.trackPageView();

    //---- Send Telemetry to Azure Portal
    //appInsights.trackEvent({ name: 'some event' });
    appInsights.trackEvent({
        name: 'some event',
        properties: { // accepts any type
            prop1: 'string',
            prop2: 123.45,
            prop3: { nested: 'objects are okay too' }
        }
    });
    appInsights.trackPageView({ name: 'some page' });
    appInsights.trackPageViewPerformance({ name: 'some page', url: 'some url' });
    appInsights.trackException({ exception: new Error('some error') });

    //appInsights.trackTrace({ message: 'some trace' });

    var telemetryInitializer = (envelope) => {
    envelope.data.someField = 'This item passed through my telemetry initializer';
    };
    appInsights.addTelemetryInitializer(telemetryInitializer);
    appInsights.trackTrace({ message: 'This message will use a telemetry initializer' });


    appInsights.trackMetric({ name: 'some metric', average: 42 });
    appInsights.trackDependencyData({ absoluteUrl: 'some url', responseCode: 200, method: 'GET', id: 'some id' });
    appInsights.startTrackPage("pageName");
    appInsights.stopTrackPage("pageName", null, { customProp1: "some value" });
    appInsights.startTrackEvent("event");
    appInsights.stopTrackEvent("event", null, { customProp1: "some value" });
    appInsights.flush();

</script>

Answer 1

@Christopher Orena Thanks for reaching out. Since you want to instrument a simple HTML web page, you can add the open-source Application Insights JavaScript SDK to your website. To configure the SDK, add this script to your HTML file before the closing </head> tag. Be sure to replace YOUR_INSTRUMENTATION_KEY with the appropriate iKey from your App Insights resource.

When you then access the web page in a browser session, the action is recorded as a single page view. You can analyze all data collected by Application Insights from the pageviews table under the Logs blade on the Azure portal. 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  

Please take note of the following:

• The four default charts on the App insights Overview page (Failed requests, Server response time, Server requests, Availability) are scoped to server-side application data. Because we're instrumenting the client/browser-side interactions for the static HTML page with the JS SDK, this particular view doesn't apply unless we also have a server-side SDK installed.
• If you also have a web service that's in Java or ASP.NET, you can use the server-side SDKs in conjunction with the client-side JavaScript SDK to get an end-to-end understanding of your app's performance.
• Live Metrics is a server-side feature and is supported for the languages/frameworks mentioned here. It is not supported for the JS SDK or any of the web/browser scenarios.
• Perf-related data for the web page would be available under the Performance blade in the Browser tab.

Please go through this quickstart for a detailed walkthrough. For more advanced configurations for monitoring websites, check out the JavaScript SDK API reference and the details provided on the GitHub source.

Hope this helps. Do let us know if you have further questions.

----------

If an answer is helpful, please "Accept answer" and/or "Up-Vote" which might help other community members reading this thread.