question

ChristopherOrena-7649 avatar image
0 Votes"
ChristopherOrena-7649 asked ChristopherOrena-7649 commented

Azure Application Insights for static web page?

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>

azure-monitor
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

bhargaviannadevara-msft avatar image
1 Vote"
bhargaviannadevara-msft answered ChristopherOrena-7649 commented

@ChristopherOrena-7649 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.

· 5
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@bhargaviannadevara-msft Thanks for reply. In my case, I'm looking for Live Metrics to work across dedicated Classic ASP website within a .Net solution (Framework 4.5.1). We have other vb.net websites/projects utilizing Live Metrics in same solution with no issues. Utlizing Javascript SDK in this feedback example seems to be limited.

I'm wondering if it's feasible to install NuGet (ApplicationInsights.config) package on a Classic ASP website (which typically doesn't require a build) within a .Net environment so that it can be integrated with IIS and utilize Live Metrics, more detailed telemetry, etc.? Seems a little quirky approach to do something like this but we need Live Metrics to work the same as it does regular .Net websites/projects.

0 Votes 0 ·

@ChrisOrena-8312 Oh ok, I believe you had detailed this requirement in a different question here: https://docs.microsoft.com/en-us/answers/questions/520909/index.html
Nonetheless, thanks for the response. I'm still working with our internal Teams to know more about the available support for this use-case. Will keep you posted as I have more details to share.

1 Vote 1 ·

Correct, this thread details the steps taken to resolve --> https://docs.microsoft.com/en-us/answers/questions/520909/index.html

1 Vote 1 ·

@ChrisOrena-8312 Please check my response on the other thread referenced above for details.

1 Vote 1 ·

@ChrisOrena-8312 Now that you have successfully instrumented your application with the server-side AI SDK, you should be able to leverage the available features along with client-side monitoring for an end-to-end understanding of your app's performance.

Thanks again for reaching out. Please feel free to revert in case of questions.



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

0 Votes 0 ·