npm i ng-amp-diagnostics-logger --save-dev
<!--HEAD tag of index.html-->
/*** app.component.ts*///import// constructorconstructorprivate ngAmpDiagnosticsLoggerService: NgAmpDiagnosticsLoggerService// ngAfterViewInit;this.ngAmpDiagnosticsLoggerService.initializengAmpDiagnosticsLoggerConfiguration;}// when media is played in the component// some unqiue string will be stored in Application Insights User Id fieldthis.ngAmpDiagnosticsLoggerService.log'SOME UNIQUE STRING';
Full sample and documentation can be found here
- ng-amp-diagnostics-logger comes with it's own copy of azuremediaplayer.d.ts.
NgAmpDiagnosticsLoggerConfiguration - This interface is used to initialize the NgAmpDiagnosticsLoggerService Service when a Angular Component is ready to use the service. The interface has 3 properties:
- appName - The name of the application that is using the NgAmpDiagnosticsLoggerService service. This can be set to any value.
- instrumentationKey - The Application Insights Instrumentation Key used by applicationinsights-js
- player - The azuremediaplayer.d.ts player object
The service has 2 public methods:
- initialize Method - This method accepts a NgAmpDiagnosticsLoggerConfiguration object and initializes the NgAmpDiagnosticsLoggerService service by setting important private variables. This method also sets the callback variable, which is used to log telemetry data to Application Insights.
- log Method - This method accepts a string to serve as the value for the Application Insights User Id field. At the time this documentation was written, we are using the ProjectId field from the Project Table. This method evaluates the _isInitalized and _isConfigured private variables to determine if plumbing to wireup the Azure Media Player events to send telemetry data to Application Insights.
- Execute the code to add a TelemetryInitializer to the applicationinsights-js node package AppInsights object context. The TelemetryInializer is used to set the Application Insights User Id field via the ['ai.user.id'] tag.
- Execute the code to wireup the Azure Media Player events to send telemetry data to Application Insights. At the time this documentation was written, all Azure Media Player events are being logged to Application insights.
- Mocking - In the future, it would be beneficial inject the amp and AppInsights object into the NgAmpDiagnosticsLoggerService service. The amp object is just a namespace, so I was not able to figure out how to inject this object. I was able to inject the AppInsights object into the constructor but I observed very odd and inconsistent behavior when not just using this object directly. Injecting these objects into the constructor will allow for the service to be tested via mocking.
- Custom Callback - In the future, it may be beneficial to make the callback variable a property in the NgAmpDiagnosticsLoggerService interface to allow for custom code for logging.
- Configurable Console Logging - In the future, it may be benefical to add a new property to the AmpDiagnosticsLoggerConfiguration interface that can be used to turn on/off console logging in the NgAmpDiagnosticsLoggerService Service.
- Configure Events - In the future, it may be beneficial to make configurable which Azure Media Player Events are sent to Application Insights.
- Set Multiple Application Insights Fields - In the future, it would be beneficial to be able to set more than just the Application Insights User Id field.
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the MIT License.