Edit

Integrate Google Tag Manager to API Management developer portal

  • Article

APPLIES TO: Developer | Basic | Basic v2 | Standard | Standard v2 | Premium

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 - 3 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