The API Management developer portal is an automatically generated, fully customizable website with the documentation of your APIs. It is where API consumers can discover your APIs, learn how to use them, and request access.

A popular feature of Azure Monitor is Application Insights. It's an extensible Application Performance Management (APM) service for developers and DevOps professionals. Use it to monitor your developer portal and detect performance anomalies.

Use Case:

This guide walks through every step of Integrating Application Insights to API Management developer portal. Application Insights includes powerful analytics tools to help you learn what users actually do while visiting your developer portal.

Prerequisites

To follow this guide, you need to have an Azure API Management instance. If you don't have one, please create an instance

2. Before you can use Application Insights, you first need to create an instance of the service. For steps to create an instance using the Azure portal, see Workspace-based Application Insights resources.

Add Application Insights to your portal

Follow these steps to plug Application Insights into your managed or self-hosted developer portal.

Set up a local environment for the latest release of the developer portal.
Install the npm package to add Paperbits for Azure:

Console:

npm install @paperbits/azure --save

In the startup.publish.ts file in the src folder, import and register the Application Insights module:

Typescript:

import { AppInsightsPublishModule } from "@paperbits/azure";

...

injector.bindModule(new AppInsightsPublishModule());

Retrieve the portal's configuration:

Request URL:

=========
GET https://<APIM Management endpoint hostname>/subscriptions/<APIM SubscriptionID>/resourceGroups/<APIMResource group>/providers/Microsoft.ApiManagement/service/<APIM Service name>/contentTypes/document/contentItems/configuration?api-version=2021-01-01-preview

Response:
=======

Note:

=====

For getting - <APIM Management endpoint hostname>, navigate to APIManagement service in Portal -> Overview blade -> Under properties

4.3.png

<APIM SubscriptionID> , <APIMResource group> , <APIM Service name> can be found as below

4.4.png

Sample Request in Postman as below:

===========================

Send a GET Request from Postman as below—

GET https://<APIM Mangement endpoint hostname>/subscriptions/<APIM SubscriptionID>/resourceGroups/<APIMResource group>/providers/Microsoft.ApiManagement/service/<APIM Service name>/contentTypes/document/contentItems/configuration?api-version=2021-01-01-preview

4.5.png

Extend the site configuration from the previous step with Application Insights configuration using the PUT request:

5.1.png

Request URL:

============
PUT https://<APIM Management endpoint hostname>/subscriptions/<APIM SubscriptionID>/resourceGroups/<APIMResource group>/providers/Microsoft.ApiManagement/service/<APIM Service name>/contentTypes/document/contentItems/configuration?api-version=2021-01-01-preview

5.2.png

Note: Follow this document to create access token required to make calls into the Azure API Management REST API.: https://docs.microsoft.com/en-us/rest/api/apimanagement/apimanagementrest/azure-api-management-rest-api-authentication

Sample Request in Postman as below:

5.3.png

Ensure to Publish Developer portal after performing the above steps
View any pages in Developer portal. In application Insights we can observe Page view metrics as below—