|
| 1 | +--- |
| 2 | +title: Integrate Application Insights to developer portal |
| 3 | +titleSuffix: Azure API Management |
| 4 | +description: Learn how to integrate Application Insights into your managed or self-hosted developer portal. |
| 5 | +author: dlepow |
| 6 | +ms.author: danlep |
| 7 | +ms.date: 08/16/2022 |
| 8 | +ms.service: azure-api-management |
| 9 | +ms.topic: how-to |
| 10 | +--- |
| 11 | + |
| 12 | +# Integrate Application Insights to developer portal |
| 13 | + |
| 14 | +[!INCLUDE [api-management-availability-premium-dev-standard-basic-premiumv2-standardv2-basicv2](../../includes/api-management-availability-premium-dev-standard-basic-premiumv2-standardv2-basicv2.md)] |
| 15 | + |
| 16 | +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. Application Insights includes powerful analytics tools to help you learn what users actually do while visiting your developer portal. |
| 17 | + |
| 18 | +## Add Application Insights to your portal |
| 19 | + |
| 20 | +Follow these steps to plug Application Insights into your managed or self-hosted developer portal. |
| 21 | + |
| 22 | +> [!IMPORTANT] |
| 23 | +> Steps 1 -3 are not required for managed portals. If you have a managed portal, skip to step 4. |
| 24 | +
|
| 25 | +1. Set up a [local environment](developer-portal-self-host.md#step-1-set-up-local-environment) for the latest release of the developer portal. |
| 26 | + |
| 27 | +1. Install the **npm** package to add [Paperbits for Azure](https://github.com/paperbits/paperbits-azure): |
| 28 | + |
| 29 | + ```console |
| 30 | + npm install @paperbits/azure --save |
| 31 | + ``` |
| 32 | + |
| 33 | +1. In the `startup.publish.ts` file in the `src` folder, import and register the Application Insights module. Add the `AppInsightsPublishModule` after the existing modules in the dependency injection container: |
| 34 | + |
| 35 | + ```typescript |
| 36 | + import { AppInsightsPublishModule } from "@paperbits/azure"; |
| 37 | + ... |
| 38 | + const injector = new InversifyInjector(); |
| 39 | + injector.bindModule(new CoreModule()); |
| 40 | + ... |
| 41 | + injector.bindModule(new AppInsightsPublishModule()); |
| 42 | + injector.resolve("autostart"); |
| 43 | + ``` |
| 44 | + |
| 45 | +1. Retrieve the portal's configuration using the [Content Item - Get](/rest/api/apimanagement/current-ga/content-item/get) REST API: |
| 46 | + |
| 47 | + ```http |
| 48 | + GET https://management.azure.com/subscriptions/{subscription-id}/resourceGroups/{resource-group-name}/providers/Microsoft.ApiManagement/service/{api-management-service-name}/contentTypes/document/contentItems/configuration?api-version=2021-08-01 |
| 49 | + ``` |
| 50 | + |
| 51 | + Output is similar to: |
| 52 | + |
| 53 | + ```json |
| 54 | + { |
| 55 | + "id": "/contentTypes/document/contentItems/configuration", |
| 56 | + "type": "Microsoft.ApiManagement/service/contentTypes/contentItems", |
| 57 | + "name": "configuration", |
| 58 | + "properties": { |
| 59 | + "nodes": [ |
| 60 | + { |
| 61 | + "site": { |
| 62 | + "title": "Microsoft Azure API Management - developer portal", |
| 63 | + "description": "Discover APIs, learn how to use them, try them out interactively, and sign up to acquire keys.", |
| 64 | + "keywords": "Azure, API Management, API, developer", |
| 65 | + "faviconSourceId": null, |
| 66 | + "author": "Microsoft Azure API Management" |
| 67 | + } |
| 68 | + } |
| 69 | + ] |
| 70 | + } |
| 71 | + } |
| 72 | + ``` |
| 73 | + |
| 74 | +1. Extend the site configuration from the previous step with Application Insights configuration. Update the configuration using the [Content Item - Create or Update](/rest/api/apimanagement/current-ga/content-item/create-or-update) REST API. Pass the Application Insights instrumentation key in an `integration` node in the request body. |
| 75 | + |
| 76 | + |
| 77 | + ```http |
| 78 | + PUT https://management.azure.com/subscriptions/{subscription-id}/resourceGroups/{resource-group-name}/providers/Microsoft.ApiManagement/service/{api-management-service-name}/contentTypes/document/contentItems/configuration?api-version=2021-08-01 |
| 79 | + ``` |
| 80 | + |
| 81 | + ```json |
| 82 | + { |
| 83 | + "id": "/contentTypes/document/contentItems/configuration", |
| 84 | + "type": "Microsoft.ApiManagement/service/contentTypes/contentItems", |
| 85 | + "name": "configuration", |
| 86 | + "properties": { |
| 87 | + "nodes": [ |
| 88 | + { |
| 89 | + "site": { ... }, |
| 90 | + "integration": { |
| 91 | + "appInsights": { |
| 92 | + "instrumentationKey": "xxxxxxxx-xxxx-xxxx-xxxxxxxxxxxxxxxxx" |
| 93 | + } |
| 94 | + } |
| 95 | + } |
| 96 | + ] |
| 97 | + } |
| 98 | + } |
| 99 | + ``` |
| 100 | + |
| 101 | +1. After you update the configuration, [republish the portal](developer-portal-overview.md#publish-the-portal) for the changes to take effect. |
| 102 | + |
| 103 | +## Next steps |
| 104 | + |
| 105 | +Learn more about the developer portal: |
| 106 | + |
| 107 | +- [Azure API Management developer portal overview](api-management-howto-developer-portal.md) |
| 108 | +- [Automate portal deployments](automate-portal-deployments.md) |
| 109 | +- [Self-host the developer portal](developer-portal-self-host.md) |
0 commit comments