astro-gtm
v0.1.0
Published
Astro plugin to easily integrate Google Tag Manager (GTM) into your astro site
Maintainers
mhdcodesReadme
🚀 Astro Google Tag Manager
This Astro plugin makes it easy to integrate Google Tag Manager into your project, letting you manage marketing and analytics tags directly from your Astro website.
📋 Requirements
- Astro 4.0 or higher
- A Google Tag Manager account and container ID
📦 Installation
Install using pnpm:
pnpm add astro-gtmOr using npm:
npm install astro-gtmOr using yarn:
yarn add astro-gtm🥑 Usage
Add the GoogleTagManager component to your layout or page:
---
import { GoogleTagManager } from 'astro-gtm';
---
<html lang="en">
<head>
<!-- Your head content -->
</head>
<body>
<GoogleTagManager gtmId="GTM-XXXXXXX" />
<slot />
</body>
</html>📖 API Reference
<GoogleTagManager>
| Name | Required | Default | Example | Description |
| :---------------- | :------: | :-----------: | :----------------------------- | :--------------------------------------------------------------------------------------- |
| gtmId | Yes | - | 'GTM-XXXXXXX' | Google Tag Manager container ID. |
| dataLayer | No | - | { userId: '123', page: '/' } | Object that contains all of the information that you want to pass to Google Tag Manager. |
| dataLayerName | No | 'dataLayer' | 'customDataLayer' | Custom name for dataLayer object. |
| includeNoScript | No | true | false | Whether to include the noscript iframe. |
| enableInDevMode | No | false | true | Whether to enable Google Tag Manager in development mode. |
| auth | No | undefined | 'WFcfQBD6HDw' | Set preview auth for GTM workspace previews. |
| preview | No | undefined | 'env-XXX' | Set preview environment ID for GTM workspace previews. |
All props except gtmId are optional. The component will not render in development mode unless enableInDevMode is set to true.
🔍 How It Works
This package adds the necessary Google Tag Manager scripts to your page's <body> tag. It:
- Creates a data layer with your custom data
- Injects the GTM script in the head of your document
- Adds a noscript fallback (optional)
- Automatically disables itself in development mode (unless explicitly enabled)
📝 Changelog
Please see the changelog for more information on what has changed recently.