通过

你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

将 Google Tag Manager 集成到 API 管理开发人员门户

适用范围：开发人员 | 基本 | 基本 v2 | 标准 | 标准 v2 | 高级 | 高级 v2

Google Tag Manager 是 Google 创建的标记管理系统。 你可以使用它来管理 JavaScript 和 HTML 标记以便在网站上进行跟踪和分析。 例如，可以使用 Google Tag Manager 来集成 Google Analytics、热图或 LiveChat 等聊天机器人。

按照本文中的步骤在 Azure API 管理中将 Google Tag Manager 插入托管的或自承载的开发人员门户。

将 Google Tag Manager 添加到门户

按照以下步骤将 Google Tag Manager 插入托管的或自承载的开发人员门户。

重要

托管门户不需要执行步骤 1 - 3。 如果有托管门户，请跳到步骤 4。

  1. 为最新版本的开发人员门户设置本地环境。

  2. 安装 npm 包以添加用于 Google Tag Manager 的 Paperbits：

    npm install @paperbits/gtm --save

  3. 在 src 文件夹的 startup.publish.ts 文件中导入并注册 GTM 模块：

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

  4. 检索门户的配置：

    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. 使用 Google Tag Manager 配置来扩展上一步中的站点配置：

    PUT /contentTypes/document/contentItems/configuration

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

后续步骤