developer-portal-integrate-google-tag-manager.md

title	titleSuffix	description	author	ms.author	ms.date	ms.service	ms.topic
Integrate Google Tag Manager to developer portal	Azure API Management	Learn how to plug Google Tag Manager into your managed or self-hosted developer portal in Azure API Management.	dlepow	danlep	03/25/2021	api-management	how-to

Integrate Google Tag Manager to API Management developer portal

Google Tag Manager is a tag management system created by Google. You can use it to manage JavaScript and HTML tags used for tracking and analytics on websites. For example, you can use Google Tag Manager to integrate Google Analytics, heatmaps, or chatbots like LiveChat.

Follow the steps in this article to plug Google Tag Manager into your managed or self-hosted developer portal in Azure API Management.

Add Google Tag Manager to your portal

Follow these steps to plug Google Tag Manager into your managed or self-hosted developer portal.

Important

Steps 1 and 2 are not required for managed portals. If you have a managed portal, skip to step 4.

1. Set up a local environment for the latest release of the developer portal.

2. Install the npm package to add Paperbits for Google Tag Manager:

   npm install @paperbits/gtm --save

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

   import { GoogleTagManagerPublishModule } from "@paperbits/gtm/gtm.publish.module";
   ...
   injector.bindModule(new GoogleTagManagerPublishModule());

4. Retrieve the portal's configuration:

   GET /contentTypes/document/contentItems/configuration

   {
       "nodes": [
           {
               "site": {
                   "title": "Microsoft Azure API Management - developer portal",
                   "description": "Discover APIs, learn how to use them, try them out interactively, and sign up to acquire keys.",
                   "keywords": "Azure, API Management, API, developer",
                   "faviconSourceId": null,
                   "author": "Microsoft Azure API Management"
               }
           }
       ]
   }

5. Extend the site configuration from the previous step with Google Tag Manager configuration:

   PUT /contentTypes/document/contentItems/configuration

   {
       "nodes": [
           {
               "site": { ... },
               "integration": {
                   "googleTagManager": {
                       "containerId": "GTM-..."
                   }
               }
           }
       ]
   }

Next steps

• Automate portal deployments
• Self-host the developer portal