# @digi4care/astro-google-tagmanager 中文文档

规范地址：https://npmcn.com/package/%40digi4care/astro-google-tagmanager/

版本：2\.1\.0
npm 元数据更新时间：2026-10-21T13:42:43.244Z
中文译文更新时间：2026-11-12T08:00:47.261Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40digi4care/astro-google-tagmanager
原文对照：https://npmcn.com/package/%40digi4care/astro-google-tagmanager/?lang=original
项目主页：https://github.com/digi4care/astro-google-tagmanager
源码仓库：https://github.com/digi4care/astro-google-tagmanager

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

- 包体积（解压后）：8.8 kB，7 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：astro ^6\.0\.0 \|\| ^7\.0\.0
- 首次发布：2024-07-04T19:38:31.508Z
- 最新版本发布：2026-10-21T13:42:43.039Z
- 近 30 天下载量：12118（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：12（近 12 个月 2 个）

## 中文简介

Astro 6 和 7 组件, 用于向 Google Tag 管理器插入带 View Transitions 支持的片断

## 安装

```sh
npm install @digi4care/astro-google-tagmanager
```

也可以使用：`pnpm add @digi4care/astro-google-tagmanager`、`yarn add @digi4care/astro-google-tagmanager`、`bun add @digi4care/astro-google-tagmanager`

## README

# @digi4care/astro-google-tagmanager (英语)

用内置插入 Google 标签管理器( GTM) 片段的 Astro 组件 **查看过渡/ 客户端路透社** 支助。 兼容 **天体6和7**。 。 。 .

## 安装

```bash
npm install @digi4care/astro-google-tagmanager
```

## 使用量

### 基本示例(与 `<ClientRouter />`(中文(简体) )

```astro
---
import { ClientRouter } from 'astro:transitions';
import {
  GoogleTagmanager,
  GoogleTagmanagerNoscript,
  SiteVerification
} from '@digi4care/astro-google-tagmanager';
---
<!doctype html>
<html lang="en" dir="ltr">
  <head>
    <ClientRouter />
    <SiteVerification id="SITE_VERIFICATION_ID" />
    <GoogleTagmanager id="GTM-XXXXXX" />
  </head>

  <body>
    <GoogleTagmanagerNoscript id="GTM-XXXXXX" />
    <slot />
  </body>
</html>
```

### 自动托管/服务器侧 GTM

```astro
<GoogleTagmanager
  id="GTM-XXXXXX"
  domain="https://analytics.yourdomain.com"
  container="custom-container.js"
/>
```

### 党城 (网络工人)

```astro
---
import {
  GoogleTagmanagerPartytown,
  SiteVerification
} from '@digi4care/astro-google-tagmanager';
---
<!doctype html>
<html lang="en" dir="ltr">
  <head>
    <SiteVerification id="SITE_VERIFICATION_ID" />
    <GoogleTagmanagerPartytown id="GTM-XXXXXX" />
  </head>

  <body>
    <slot />
  </body>
</html>
```

> **说明:** 党城需要安装 `@astrojs/partytown` 在您的项目中 :
> 
> ```bash
> npx astro add partytown
> ```
> 
> 这个 `GoogleTagmanagerPartytown` 组件向 GTM 脚本注入 `type="text/partytown"`,但党城图书馆本身必须另行设置. 这样做 **没有** 组合 `GoogleTagmanagerPartytown` 与 `GoogleTagmanager` 或者说 `GoogleTagmanagerNoscript`。 。 。 .

## 查看过渡/ 客户端路透社

这个 `GoogleTagmanager` 组件自动处理 Astro 客户端侧导航 :

-   在初始页面装入时, 标准的 GTM 片段点火 a `gtm.start` 活动.
-   每个客户端导航(通过 `<ClientRouter />`页:1 `astro:after-swap` 听者推着一个 **虚拟页面视图** 转到数据Layer:
    
    ```js
    {
      event: 'virtualPageview',
      'gtm.start': new Date().getTime(),
      virtualPagePath: window.location.pathname,
      virtualPageTitle: document.title
    }
    ```
    
-   当内置脚本在过渡期间重新执行时,守护者可以防止重复的收听者注册.

### 虚拟页面视图配置 GTM

在您的 GTM 容器中创建触发器 `virtualPageview` 事件,并使用它来发射您的 GA4 页面视图标签或其他跟踪标签。 这保证了分析在全页载荷和客户端导航两方面的起火.

## 道具

### Google 管理器

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `id` | `string` | —— 说 | GTM 容器标识(例如:. `GTM-XXXXXX`) (中文(简体) ). **要求.** |
| `domain` | `string` | `https://www.googletagmanager.com` | 自定义服务器侧 GTM 域 . |
| `container` | `string` | `gtm.js` | 自定义容器脚本路径 . |

### Google Tagmanager 标记

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `id` | `string` | —— 说 | GTM集装箱标识. **要求.** |
| `domain` | `string` | `https://www.googletagmanager.com` | 必须匹配所使用的域 `GoogleTagmanager`。 。 。 . |

> **必须** 打开后直接放置 `<body>` 标签.

### Google Tagmanager 聚会镇

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `id` | `string` | —— 说 | GTM集装箱标识. **要求.** |

### 站点验证

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `id` | `string` | —— 说 | 核实身份. **要求.** |
| `name` | `string` | `google-site-verification` | Meta标签名称属性. |

所支持的核查服务有:谷歌,Bing,Yandex,Pinterest,Facebook,Baidu,苹果,LinkedIn等. 使用相同的组件 : `name` 财务报告和审定财务报表 `id` 数值.

## 重要

-   执行 **没有** 使用情况 `GoogleTagmanager` 财务报告和审定财务报表 `GoogleTagmanagerNoscript` 合并 `GoogleTagmanagerPartytown`选择一种方法.
-   这个 `GoogleTagmanagerNoscript` 组件应始终直接放在打开后 `<body>` 标签.

## 许可证

麻省理工学院

## 常见问题

### @digi4care/astro-google-tagmanager 是什么？

Astro 6 和 7 组件, 用于向 Google Tag 管理器插入带 View Transitions 支持的片断

### 如何安装 @digi4care/astro-google-tagmanager？

在项目目录运行 npm install @digi4care/astro-google-tagmanager，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：astro（^6\.0\.0 \|\| ^7\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @digi4care/astro-google-tagmanager 支持 TypeScript 吗？

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

### @digi4care/astro-google-tagmanager 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @digi4care/astro-google-tagmanager 可以商用吗？

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

### @digi4care/astro-google-tagmanager 的下载量有多少？

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

### @digi4care/astro-google-tagmanager 还在维护吗？

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