@digi4care/astro-google-tagmanager (英语)
用内置插入 Google 标签管理器( GTM) 片段的 Astro 组件 查看过渡/ 客户端路透社 支助。 兼容 天体6和7。 。 。 .
安装
npm install @digi4care/astro-google-tagmanager
使用量
基本示例(与 <ClientRouter />(中文(简体) )
---
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
<GoogleTagmanager
id="GTM-XXXXXX"
domain="https://analytics.yourdomain.com"
container="custom-container.js"
/>
党城 (网络工人)
---
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在您的项目中 :npx astro add partytown这个
GoogleTagmanagerPartytown组件向 GTM 脚本注入type="text/partytown",但党城图书馆本身必须另行设置. 这样做 没有 组合GoogleTagmanagerPartytown与GoogleTagmanager或者说GoogleTagmanagerNoscript。 。 。 .
查看过渡/ 客户端路透社
这个 GoogleTagmanager 组件自动处理 Astro 客户端侧导航 :
- 在初始页面装入时, 标准的 GTM 片段点火 a
gtm.start活动. - 每个客户端导航(通过
<ClientRouter />页:1astro:after-swap听者推着一个 虚拟页面视图 转到数据Layer:{ 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>标签.
许可证
麻省理工学院