Monitoring the Power Platform: Power Apps Portal – Implementing Application Insights

Summary

Power Apps Portal represent a unique offering to the Power Platform, one that allows the Power Platform to reach virtually any and all users your enterprise wants to connect to. It represents the external face of your enterprise to your users, allowing them to interact with other users as well as internal representatives. Users can now provide updates and artifacts to the Common Data Service without the need to communicate with your enterprise reps, freeing them to focus on providing the best customer experience available. Power Apps Portal allow its users to interact anonymously and login using their preferred identity of choice, opening up the Common Data Service like never before.

This article will focus on how Power Apps Portal administrators can implement a monitoring strategy to better understand their user base. Insights into user traffic and interactions with the Power Apps Portal can all be tracked. Using this data, your organization can focus on how to better serve your customer base and provide an optimal solution and experience.

In this article we focus on adding Azure Application Insights to a Power Apps Portal. We explore how to configure and provide context which will provide rich and meaningful telemetry.

What is Azure Application Insights

As part of the Azure Monitor suite, Azure Application Insights is an extensible Application Performance Management (APM) service that can be used to monitor applications, tests, etc. Azure Application Insights can be used with any application hosted in any environment. Depending on what’s being monitored there are SDKs available. For other applications connections and message delivery can be programmed using the REST APIs available.

For Power Platform components, Application Insights is recommended due to its direct integration with Power Apps features and tools and its capabilities to deliver to the API.

Once we begin sending telemetry to Application Insights we can review in real time availability tests, user actions, deployment metrics as well as other feedback from our applications. Connecting our messages with correlation identifiers allows us a holistic view into how our apps are interdependent upon each other. This provides the transparency desired and honestly needed with modern era technology.

Adding a Power Apps Portal to a Power Platform Environment

To begin working with Power Apps Portal, navigate to the Maker Portal and add a new application. This is similar to adding a new Model or Canvas Driven application within the Maker Portal.

Go through the provisioning wizard to define the basic characteristics of your Power Apps Portal including a name, the URL and what language or region to use. Here is a reference to a step by step guide to provisioning the portal that includes important considerations.

When initially configured and provisioned, a new Model Driven Power Application titled ‘Portal Management‘ will appear. This application will serve as the primary customization point for makers and portal developers. This will also be where Azure Application Insights will be configured to work within Power Apps Portals.

NOTE: If your Power Platform environment has migrated from Dynamics 365 and included Dynamics 365 Portals you may see the Model Driven Application called ‘Dynamics 365 Portals‘.

Adding Azure Application Insights to Power Apps Portal

Similar to web based application encompassing HTML, CSS and JavaScript, Power Apps Portal pages can be injected with the Azure Application Insights JavaScript SDK. Oleksandr Olashyn’s article “PowerApps Portals tracking using Azure Application Insights” does a great job detailing provisioning Azure Application Insights and adding the JavaScript SDK that I describe in this section.

Open the Portal Management Power App

When a Power Apps Portal Application is added to a Power Platform environment, a Model Driven Application titled ‘Portal Management‘ will also be added. To add Azure Application Insights, begin by playing the ‘Portal Management‘ app.

Once the application has loaded, locate the ‘Enable Traffic Analytics‘ sub area within the Administration group on the site map and open.

Add the Azure Application Insights SDK

The Portal Analytics page will prompt makers to choose a portal, depending if multiples exist, and an area to include the Azure Application Insights snippet.

To locate the Azure Application Insights JavaScript SDK snippet, two primary options exist: reference the official Microsoft Docs site or go to the GitHub repository. As referenced in the Power Apps Component Framework article, I tend to go with the GitHub repository but either will work.

NOTE: The version of the SDK may change, the current version of this writing is 2.5.6. For the most current release, refer to this reference.

When adding the Azure Application Insights SDK snippet, the application is updating a adx_contentsnippet entity record titled ‘Tracking Code‘.

Configure the Azure Application Insights SDK

Once the snippet for the JavaScript SDK has been added, it needs to be configured to point to the organization’s Azure Application Insights resource. The instrumentation key is a 32 digit GUID located on the Overview page of the Azure Application Insights resource.

The instrumentation key will need to be added to the telemetry client’s configuration property ‘instrumentationKey‘ as shown below.

cfg: { // Application Insights Configuration    instrumentationKey: "YOUR_INSTRUMENTATION_KEY_GOES_HERE"    /* ...Other Configuration Options... */ }});

Once the instrumentation key has been added and the changes have been applied to the Power Apps Portal, telemetry will begin to flow to Azure Application Insights. With that in mind, as discussed in previous articles, enriching the messages sent is key to optimizing the various features of Azure Application Insights. Continuing that train of thought, let’s explore some options Power Apps Portal will allow for enrichment.
Enriching the Power Apps Portal Messages
 
Establishing a strong session and operational context is key to not only Power App Portal telemetry but practically any service or application. Review the information found in the Power Apps Component Framework article, while using TypeScript, is applicable here working with JavaScript.

Working with Liquid Templating Objects
Liquid Templating allows makers and developers to add contextual information dynamically to Power Apps Portal web pages. Logged in user information, site settings, Common Data Service data, etc can all be referenced. For example, to work with user contextual information, refer to this article, which describes user as an entity object (contact). 
Below is an example of referencing a logged in user’s information to set the authenticated user context within the Azure Application Insights telemetry client. 
Author’s Note: Big thanks to Nikita Polyakov for his assistance with creating and identifying enhancements to this script!


Working with Portal Web Page Variables
 
The window object on each Power Apps Portal web page contains a Microsoft object which includes information about the portal and user. I haven’t seen this documented so I would not rely on it being supported.

Using this object we can set the “ai.cloud.role” or other contextual attributes to set the type of Portal:

Reviewing Initial Messages in Azure Application Insights
 
Now that the Azure Application Insights snippet has been added, the configuration established and the context enriched, the final step to getting started is to review messages. Navigating to the Azure Portal and Application Insights scripts, we can write basic Kusto queries to see our users interaction with the portal.

Portal, being a Web App by nature, works really well with various features of Azure Application Insights. Some highlights include User Session Timelines and User Flows. These features tend to provide a good visualization and help answer questions like “where do my users typically go from the home page?” or “how long were they on a page before navigating away?“

As discussed above, enriching messages is key to understanding and gaining insight into potential problems. In the example below I have created a scenario where a AJAX call has caused a performance concern. 

Sample Code
 
The sample code used in this article can be found in the MonitoringPowerPlatform GitHub repo located here.
Next Steps
 
In this article we have discussed how to set up Azure Application Insights with Power Apps Portals. We covered using the content snippet to add the Azure Application Insights JavaScript SDK. We discussed how to extend the SDK to include values from liquid templating and window objects. Finally we reviewed page views and how they can represented in Application Insights.
For next steps, continue exploring liquid templating and how to continuous enrich your messages sent to Azure Application Insights. Consider the custom property and metrics bag and how these can be supplemented with Common Data Service content or browser resource timings. Also consider ways add instrumentation to other aspects of Power Apps Portal than just collecting Page Views including page exceptions, dependent API calls, JavaScript processing, etc.
Continuing this series we will cover how to implement and use Azure Blob Storage for diagnostic logging.
If you are interested in learning more about specialized guidance and training for monitoring or other areas of the Power Platform, which includes a monitoring workshop, please contact your Technical Account Manager or Microsoft representative for further details.
Your feedback is extremely valuable so please leave a comment below and I’ll be happy to help where I can! Also, if you find any inconsistencies, omissions or have suggestions, please go here to submit a new issue.
Index
 
Monitoring the Power Platform: Introduction and Index
Let’s block ads! (Why?)
Dynamics 365 Customer Engagement in the Field
The post Monitoring the Power Platform: Power Apps Portal – Implementing Application Insights appeared first on Business Intelligence Info.