Understand Your Users with App Insights to Improve Adoption

After spending several months of software requirements, scrum and design meetings, hours of implementation and testing efforts, our application is finally deployed, but the work for a sustainable product is not complete. After the app is deployed, it is important to understand the users to improve its adoption, and to understand its users, many questions need to be answered. Some common questions may include:

How do we know about user acceptance? How can we measure the user experience? Are all those different features on the app being used? How can we learn from our users to make app improvements?

To answer those question, we need to collect data that can be used to provide and validate the answers.  The best approach to collect this data is by adding telemetry tracking in our apps. By tracking user activities like page views, clicks and custom events, we can use Application Insights analytical visualization tools to understand the user’s behavior. In this article, we look at some of the analytical tools that are available on Azure Monitor Services, which we can leverage to help us answer the questions listed before and better understand our users. Before we get to understand those tools, let’s first provide an overview of the monitor service that host them.

Application Insights (AppInsights)

AppInsights is part of the Cloud Monitor Services on Azure. It has two main areas that work tightly together. It is a monitor service with statistical analysis tooling, and it is an application framework, with support for languages like JavaScript, C#, Python, that is used to instrument our applications and track telemetry information for our apps.

This service has multiple statistical analysis tool to help digest the telemetry information for many areas of the apps which can include front-end, back-end, APIs. The tools are also grouped on areas of concerns like investigation for performance metrics and problems, monitoring/alert, and application usage.

It is the usage statistical analysis tooling that can help us learn how are users interacting with the application. Some of these tools include the users, sessions, events, cohorts, funnels, and flows tools. Let’s review each one of these tools and see how they can help us understand our users and their behavior.

Users Analysis

The user analysis tool helps us understand details about the users. We can visualize what events and pages/views the users are interested in as well as some user specifics like country or city of origin, operating system in their devices, and browser versions.

Those details can help us make decisions like improving advertisement on some geographical areas to attract those users. Also, they are great indicators to understand the usability based on the device types and browsers being used. This leads to making decision on open issues that are related to mobile device improvement, as an example.

Sessions Analysis

The session analysis tool is very similar to the users’ tool, but it provides session-based information about those users. Keep in mind that one user can have multiple session. These sessions can help us see how users are using the application. The sessions can be visualized by tracking page views and user events. This information is valuable to be able to understand what areas of the application are mostly used. Analysis can be done to understand usability problems in some areas, so they can be improved or simply removed from the app altogether.  

The session information is very valuable for some A/B testing analysis, in which design variants can be introduced to the user experience. This, for example, can reveal that users tend to have a much better user experience with one design over the other.

Events

When we need to understand how users are responding to a particular design or feature on the application, we can use the events tool to see the telemetry information that is collected when the user makes some actions like clicking on tabs, links, dropdowns to change selections. The collected insights from these actions can reveal if a particular feature is relevant to users. This can help determine that perhaps a feature is not needed at all or if a design is too confusing to our users.

Custom events not only track user actions, but they can also be used to track some data and or integration telemetry. For example, we can track events about data variations that comes from an external API. The application may not have any control about the source of the data, but custom events can help us track those variations, which leads into creating some countermeasures to handle them.

Other areas that can be tracked with custom events can include input validation, timeouts from user inactivity, chat or help request from specific areas of the application. All these leads to better insights for the improvement of the overall user experience.

Cohorts

Cohorts enable us to create a specific group of users which have completed a specific goal metric like signing for newsletters, completed a purchase or landed on a particular area of the app. By predefining groups of users with a particular criterion, we can use that group as a filter on the users, sessions, and events tools. This enables us to continuously analyze the same criteria and compare performance metrics.

The advantage of using Cohorts is that we can use custom logs query expressions to select the information we need from the customEvents and pageViews log tables. The customEvents table has all the events that are sent from the app, while the pageViews table contains all the page visit information. Combining these tables with a particular criterion can generate an excellent filter which can enable us to analyze the data in more detail.

Funnels

Most apps have a particular workflow that we would ideally like our users to follow. This however may not always be the case, and users may not follow the steps as expected. Therefore, we require a tool that can help us analyze the data to verify how are the users running each step of the workflow. Funnels represent a set of steps on the application and the percentage of users who follow such steps.

For example, an app workflow may consist of several pages/steps to allow the user to register. Since each page visit is tracked, we can create a funnel and select each page visit as a separate step, thus creating a workflow. The output should indicate to us which step the users are not completing or when they stop or abandon the workflow. This is an indication that a particular step may have some design issues that are causing our users to drop off and not complete the workflow. This information should help identify design improvements on those pages to help guide the user and improve the completion percentage.

User Navigation

Whereas Funnels can help us understand the percentage of users completing certain application steps, it does not provide to us enough information to clearly see where the remaining percentage of users are going.

User Navigation visualization tool provides this insight. The tool provides a page view visualization that can help us track how users are navigating the site. Ideally, the workflow should be a sequential flow, but if we see that users are flowing/going into other areas of the app or stopping at a particular step, we can analyze that information further and make some design changes that can help increase the completion percentage.

To use the tool, an initial event like a page visit can be selected as the starting point, then custom events and other page views can be included to see a flow diagram of the steps before and after the selected target event.

When it comes to user visiting pages, this is by far the most useful tool for us to examine, as this can lead us into better understanding of our application and make design decisions on how to improve the user experience and app navigation which help improve the page visit goals for our apps.

Conclusion

When an application development life cycle starts, several decisions are made based on the information that is available during the design phase of the app. It is very important to validate those design decisions by instrumenting our application, so the necessary telemetry information can be gathered and analyzed post deployment. It is then that we can better understand the app users to help validate the design decisions or make changes to improve both the user experience and adoption of our apps. In addition, this is an ongoing process as user behavior can change over time, so ongoing iteration of this process is required.

Add AppInsights to Single Page Apps

Thanks for reading!

Originally published by ozkary.com

After spending several months of software requirements, scrum and design meetings, hours of implementation and testing efforts, our applica...

Read Article →

Application Insights for Single Page Applications

    Application monitoring is a fundamental service that any application should have to understand the performance and health of it. When it comes to Single Page Applications (SPA) written on Angular, React or similar frameworks, monitoring becomes crucial because the application runs on the user’s browser.  Ideally, we want to be able to log errors and track custom events to better understand the application performance without having to code an API which consumes the telemetry information.

Application Insights

    Application Insights (AppInsights) is an Application Performance Management (APM) service part of the Azure Monitor services. It is used to monitor running applications.  It is widely used on different platforms like .Net, Node.js, Python and client-side applications written with JavaScript frameworks like React, Angular and others. It is also used by mobile application to help manage crash reporting from all the devices where the application is running from.

    On the cloud, AppInsights provides data analytics tools that are used to understand user behavior and application performance.  The analysis of the data leads to the continuous improvement of the application usability and quality. In addition, visualization tools like PowerBI can be used to tap into the data and create dashboards that can provide insights to the DevOps and Development teams as well as UX designer for usability cases.

How does it work on a SPA?

    At the application level, there is an NPM package that must be installed in the Single Page application to help use the AppInsights services to track events, errors, and API calls. Those events are sent to the Azure monitor service in the cloud via API calls. The API is provided by the monitor service on Azure, and the location of the endpoint is defined in the NPM package.

Note: AppInsights automatically tracks telemetry data like page views, request performance, user sessions and unhandled exceptions for crash reporting. For custom error and event handling, continue to read this article.  

    For the Azure monitor service to resolve the tenant and AppInsights instance information, we need to get the instrumentation key from the application insights instance. This information can be found on the overview blade of the instance associated to your application. To create the instance, visit the resource that is hosting the SPA, click on the Application Insights link and enable the integration. That should provision the AppInsights instance for the application.

Client configuration

    On the client application, open Visual Studio Code and open a terminal console. On the console, install the AppInsights NPM package by entering this command:

npm i –save @microsoft/applicationinsights-web

 

    Once the package is installed, we can add the instrumentation key to the application as an environment variable. The application environment file (.env) is the right place to add this key. This file uses a key=value format to set those variables.  Most SPAs have an environment file to host application-level variables which can be accessed by using the process object.  If the project does not have this file, one can be created manually. For the variables to be loaded properly, the application needs to be restarted.  Also depending on the current framework and version, like React or Angular, the NPM package env-cmd maybe installed. This package handles the parsing and loading of the variables from the file when the application first loads.

Note: In newer versions of the JavaScript framework, there is no need to add the NPM package.

Note:  Depending on the framework, the variable names should follow a particular naming convention. For example, React requires that the variables are prefixed with the tag REACT_APP

As an example, the instrumentation key should be set with the following format:

REACT_APP_INSIGHTSKEY=key-value-here

     The variable value can then be accessed from anywhere in the code by using the process object.

const key = process.env.INSIGHTSKEY;

Build the logger

    After setting the configuration, we can now implement a service where we can centralize the logging of errors and events. Usually, the logger or exception manager service on the application is the right place for that. This way anywhere in the app, we can import the logger and use it to log errors and events to the cloud.  Review a simple implementation of how this service could be implemented using TypeScript.

Logger Gist

    After reviewing the code, we can notice all the steps taken to initialize the service and what is exported for other components to call. The code first imports the ApplicationInsights dependency. It then instantiates the service with the instrumentation key, which is read from the environment variables. The service exports three functions, init, error, track.

    The init function initializes or bootstrap the AppInsights service. This allows it to track and send telemetry information like page visits and performance metrics automatically. The error function is used to send exception and custom error messages. The track function sends custom events. It uses generics for the data parameter, so it can support events with primitive and complex types.

How to log events

    We should now be ready to look at our application to figure out what we need to log.  For example, we could log handled errors and some important telemetry about our app. For telemetry, we can log the navigation, click events and other custom events that are important to track.

    Each component and/or service of the application, should be handling errors and custom events. The custom events should use a tag name and some measure or message that you want to track.  It is important to define this information properly, so it can be shown on the analytic tools hosted on Azure.

Custom errors

    Custom errors are handled exceptions or unexpected results by the application. These errors are usually handled on a try/catch block or some business rule validation. To log the error, just use the logger service and call the error function, passing the Error object as parameter.

Custom Errors Gist

Custom events

    Custom events are the business events that track application critical messages that can be measured as goal or conversion on the application. Some examples may include customer registration, profile changes and other measurable events that should be reported on the analytical tools. Use the track function of the logger service to log events. Send a tag, for grouping, and a JSON document with some information about the event.

Custom Events Gist

Verifying the data

    After deploying the application and running some test that can trigger some errors or custom events, verify that the messages are sent correctly.  The first verification is to use the browser console, network tab.  We should see some traffic with the track request and VisualStudio endpoint. We are looking for the status to be 200 which should indicate that the message made it home.

    Next, head over to the Azure Portal and open the Application Insights associated with the application. There are multiple tools to use there, so experiment and learn from them. A tool to use and query data is available from the Logs link. This tool list all the tables that are available. To query the custom events, use the custom events table and query the data with a SQL like script.

    For visual statistical analysis, we can use the Events tool. This presents the data on charts, which enables us to visualize the data from the application.

Conclusion

    It is very valuable for our client-side apps to be able to report telemetry information to the cloud. This can enable teams to learn about the application performance and usability. Azure Application Insights provides a solution that enables all applications, built on different platforms, to easily integrate with the service. It is a complete solution because it provides the pipeline to send telemetry data from the applications as well as the analytical tools to view, monitor and learn from the telemetry data.

Thanks for reading.

Originally published by ozkary.com

     Application monitoring is a fundamental service that any application should have to understand the performance and health of it. When ...

Read Article →