# @analytics/google-tag-manager 中文文档

规范地址：https://npmcn.com/package/%40analytics/google-tag-manager/

版本：0\.6\.0
npm 元数据更新时间：2024-12-11T22:08:47.073Z
中文译文更新时间：2026-11-06T01:52:28.721Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40analytics/google-tag-manager
原文对照：https://npmcn.com/package/%40analytics/google-tag-manager/?lang=original
项目主页：https://github.com/DavidWells/analytics#readme
源码仓库：https://github.com/DavidWells/analytics

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：41.1 kB，10 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2019-10-07T05:57:28.733Z
- 最新版本发布：2024-12-11T22:08:46.908Z
- 近 30 天下载量：207669（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：15（近 12 个月 0 个）

## 中文简介

“ 分析” 模块的 Google 标签管理器插件

## 安装

```sh
npm install @analytics/google-tag-manager
```

也可以使用：`pnpm add @analytics/google-tag-manager`、`yarn add @analytics/google-tag-manager`、`bun add @analytics/google-tag-manager`

## README

# 分析的谷歌标签管理器插件

与 google 标签管理器整合 [分析](https://www.npmjs.com/package/analytics)

此分析插件会将 google 标签管理器载入您的应用程序 .

详情 [见文件](https://getanalytics.io/plugins/google-tag-manager/)。 。 。 .

单击以扩展

-   [安装](https://npmcn.com/package/%40analytics/google-tag-manager/#readme-installation)
-   [如何使用](https://npmcn.com/package/%40analytics/google-tag-manager/#readme-how-to-use)
-   [支持的平台](https://npmcn.com/package/%40analytics/google-tag-manager/#readme-platforms-supported)
-   [浏览器使用量](https://npmcn.com/package/%40analytics/google-tag-manager/#readme-browser-usage)
    -   [浏览器 API](https://npmcn.com/package/%40analytics/google-tag-manager/#readme-browser-api)
    -   [浏览器配置选项](https://npmcn.com/package/%40analytics/google-tag-manager/#readme-configuration-options-for-browser)
-   [其他例子](https://npmcn.com/package/%40analytics/google-tag-manager/#readme-additional-examples)
-   [配置 GTM](https://npmcn.com/package/%40analytics/google-tag-manager/#readme-configuring-gtm)
-   [使用多个 GTM 实例](https://npmcn.com/package/%40analytics/google-tag-manager/#readme-using-multiple-instances-of-gtm)
-   [自定义数据名称Layer-对象](https://npmcn.com/package/%40analytics/google-tag-manager/#readme-custom-name-for-datalayer-object)
-   [追踪JS是否残疾](https://npmcn.com/package/%40analytics/google-tag-manager/#readme-tracking-if-js-is-disabled)

## 安装

安装 `analytics` 财务报告和审定财务报表 `@analytics/google-tag-manager` 软件包

```bash
npm install analytics
npm install @analytics/google-tag-manager
```

## 如何使用

这个 `@analytics/google-tag-manager` 软件包在 [浏览器](https://npmcn.com/package/%40analytics/google-tag-manager/#readme-browser-usage)。要使用、安装软件包,在您的工程中包含并初始化插件 [分析](https://www.npmjs.com/package/analytics)。 。 。 .

以下为如何使用浏览器插件的例子.

```js
import Analytics from 'analytics'
import googleTagManager from '@analytics/google-tag-manager'

const analytics = Analytics({
  app: 'awesome-app',
  plugins: [
    googleTagManager({
      containerId: 'GTM-123xyz'
    })
  ]
})

/* Track a page view */
analytics.page()

/* Track a custom event */
analytics.track('cartCheckout', {
  item: 'pink socks',
  price: 20
})

```

初始化后 `analytics` 与 `googleTagManager` 插件, 数据将发送到 Google 标签管理器中 [分析. p](https://getanalytics.io/api/#analyticspage),或 [分析. track](https://getanalytics.io/api/#analyticstrack) 被调用.

见 [其他执行实例](https://npmcn.com/package/%40analytics/google-tag-manager/#readme-additional-examples) 在您的项目中使用更多细节 .

## 支持的平台

这个 `@analytics/google-tag-manager` 软件包在 [浏览器](https://npmcn.com/package/%40analytics/google-tag-manager/#readme-browser-usage)

## 浏览器使用量

Google Tag 管理器客户端浏览器插件使用这些分析的 api 方法:

-   **[分析. p](https://getanalytics.io/api/#analyticspage)** - 将页面视图发送到谷歌标签管理器
-   **[分析. track](https://getanalytics.io/api/#analyticstrack)** - 跟踪自定义事件并发送到谷歌标签管理器

### 浏览器 API

```js
import Analytics from 'analytics'
import googleTagManager from '@analytics/google-tag-manager'

const analytics = Analytics({
  app: 'awesome-app',
  plugins: [
    googleTagManager({
      containerId: 'GTM-123xyz'
    })
  ]
})

```

### 浏览器配置选项

| 选项 | 说明 |
| :-- | :-- |
| `containerId`  
**所需经费** - 绳子 | 集装箱标识专门确定GTM集装箱. |
| `dataLayerName`  
_选项_ - 绳子 | 数据Layer-对象的可选名称。 默认数据Layer. |
| `customScriptSrc`  
_选项_ - 绳子 | 从自定义源装入 Google 标签管理器脚本 |
| `preview`  
_选项_ - 绳子 | 预览模式环境 |
| `auth`  
_选项_ - 绳子 | 预览模式认证证书 |
| `execution`  
_选项_ - 绳子 | 脚本执行模式 |
| `nonce`  
_选项_ - 绳子 | 内容-安全政策非现金价值 |

## 其他例子

以下是其他执行实例.

在 HTML 中使用

以下是通过unpkg CDN导入的例子. 请注意,这将拉入该套件的最新版本.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Using @analytics/google-tag-manager in HTML</title>
    <script src="https://unpkg.com/analytics/dist/analytics.min.js"></script>
    <script src="https://unpkg.com/@analytics/google-tag-manager/dist/@analytics/google-tag-manager.min.js"></script>
    <script type="text/javascript">
      /* Initialize analytics */
      var Analytics = _analytics.init({
        app: 'my-app-name',
        plugins: [
          analyticsGtagManager({
            containerId: 'GTM-123xyz'
          })
        ]
      })

      /* Track a page view */
      analytics.page()

      /* Track a custom event */
      analytics.track('cartCheckout', {
        item: 'pink socks',
        price: 20
      })
    </script>
  </head>
  <body>
    ....
  </body>
</html>

```

通过 ES 模块在 HTML 中使用

使用 `@analytics/google-tag-manager` 在无害环境管理模块中.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Using @analytics/google-tag-manager in HTML via ESModules</title>
    <script>
      // Polyfill process.
      // **Note**: Because `import`s are hoisted, we need a separate, prior <script> block.
      window.process = window.process || { env: { NODE_ENV: 'production' } }
    </script>
    <script type="module">
      import analytics from 'https://unpkg.com/analytics/lib/analytics.browser.es.js?module'
      import analyticsGtagManager from 'https://unpkg.com/@analytics/google-tag-manager/lib/analytics-plugin-google-tag-manager.browser.es.js?module'
      /* Initialize analytics */
      const Analytics = analytics({
        app: 'analytics-html-demo',
        debug: true,
        plugins: [
          analyticsGtagManager({
            containerId: 'GTM-123xyz'
          })
          // ... add any other third party analytics plugins
        ]
      })

      /* Track a page view */
      analytics.page()

      /* Track a custom event */
      analytics.track('cartCheckout', {
        item: 'pink socks',
        price: 20
      })
    </script>
  </head>
  <body>
    ....
  </body>
</html>

```

## 配置 GTM

确定您设置了谷歌标签管理器来点燃 Page 视图 .

请在电线上看到这个示例 [google 标签管理器中的“虚拟页面浏览”](https://www.bounteous.com/insights/2018/03/30/single-page-applications-google-analytics/)。 。 。 .

如果你使用SPA,你也想听听历史的变化.

![image](https://user-images.githubusercontent.com/532272/52185417-538fe500-27d4-11e9-9500-abf702e5d802.png)

见 [分析提供者插件的完整列表](https://getanalytics.io/plugins/) 在主重播时.

## 使用多个 GTM 实例

如前所述 [GTM 文档](https://developers.google.com/tag-manager/devguide#multiple-containers),可以在页面上加载多例google标签管理器. 这个方法是 [不完全建议](https://www.simoahava.com/gtm-tips/multiple-gtm-containers-on-the-page/) 由分析专家进行,如果使用单个容器可以避免。 但是,如果你必须! 你办得到!

```js
import Analytics from 'analytics'
import googleTagManager from '@analytics/google-tag-manager'

const GTMOne = googleTagManager({ containerId: 'GTM-123xyz' })
// For instance 2, override the plugin 'name' and provide the 2nd GTM container ID
const GTMTwo = Object.assign({}, googleTagManager({ containerId: 'GTM-456abc'}), {
  name: 'google-tag-manager-two'
})

// Load up analytics
const analytics = Analytics({
  app: 'awesome-app',
  plugins: [
    GTMOne,
    GTMTwo
  ]
})

// Both instances will be loaded into the page
```

此功能已经 [已添加](https://github.com/DavidWells/analytics/pull/30) 以伟大的盟誓 [@ zobzn (英语)](https://github.com/zobzn)来啊!

## 自定义数据名称Layer-对象

数据Layer默认设置为窗口. dataLayer. 可以通过设置数据Layer来更改 插件配置中的名称 .

```js
import Analytics from 'analytics'
import googleTagManager from '@analytics/google-tag-manager'

const analytics = Analytics({
  app: 'awesome-app',
  plugins: [
    googleTagManager({
      containerId: 'GTM-123xyz',
      dataLayerName: 'customDataLayer',
    })
  ]
})
// dataLayer is initialized to window.customDataLayer
```

## 追踪JS是否残疾

这个 [分析库](https://github.com/DavidWells/analytics/) 将加载 Google Tag 管理器 Javascript。 这将为每个网站访问者提供Javascript.

对于少数可能残废了Javascript的人,您需要补充以下内容: `<noscript>` 标记到您站点的 HTML, 概述于 [GTM 安装文件](https://developers.google.com/tag-manager/quickstart)

将以下 HTML 添加到您的站点并替换 `GTM-XXXX` 带着你的集装箱身份证.

```html
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
```

如果您使用多个容器, 您需要添加一个 `<noscript>` 每个标签.

这些年,没有JS允许的应用软件一般都无法工作,用户必须打开网站。 因此,如果您想要添加附加内容,则由您和您的使用大小写决定 `<noscript>` 标签.

## 常见问题

### @analytics/google-tag-manager 是什么？

“ 分析” 模块的 Google 标签管理器插件

### 如何安装 @analytics/google-tag-manager？

在项目目录运行 npm install @analytics/google-tag-manager，或使用 pnpm add / yarn add / bun add。

### @analytics/google-tag-manager 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/analytics\_\_google-tag-manager 是否存在。

### @analytics/google-tag-manager 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @analytics/google-tag-manager 可以商用吗？

@analytics/google-tag-manager 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @analytics/google-tag-manager 的下载量有多少？

根据 npm 官方下载统计，@analytics/google-tag-manager 在 2026/10/06 – 2026/11/04 这 30 天内被下载 207,669 次，日均约 6,922 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @analytics/google-tag-manager 还在维护吗？

最新版本 0\.6\.0 发布于 2024/12/12（1\.9 年前）；至今共发布 15 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/10/07。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。