🚀 Astro Google Tag Manager

[![version][version-badge]][npm]
[![downloads][downloads-badge]][npm]
[![github actions][github-actions-badge]][github-actions]
[![typescript][typescript-badge]][typescript]
[![makepr][makepr-badge]][makepr]
[![Built with Astro][astro-badge]][astro]

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:

``bash
pnpm add astro-gtm
`

Or using npm:

`bash
npm install astro-gtm
`

Or using yarn:

`bash
yarn add astro-gtm
`

🥑 Usage

Add the GoogleTagManager component to your layout or page:

`astro
---
import { GoogleTagManager } from 'astro-gtm';
---






`

📖 API Reference

$3

| 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 ` tag. It:

1. Creates a data layer with your custom data
2. Injects the GTM script in the head of your document
3. Adds a noscript fallback (optional)
4. Automatically disables itself in development mode (unless explicitly enabled)

📝 Changelog

Please see the changelog for more information on what has changed recently.

[npm]: https://npmjs.com/package/astro-gtm
[version-badge]: https://img.shields.io/npm/v/astro-gtm.svg
[downloads-badge]: https://img.shields.io/npm/dt/astro-gtm
[github-actions]: https://github.com/codiume/orbit/actions
[github-actions-badge]: https://github.com/codiume/orbit/actions/workflows/node.js.yml/badge.svg
[typescript]: https://npmjs.com/package/astro-gtm
[typescript-badge]: https://img.shields.io/npm/types/astro-gtm
[makepr]: https://makeapullrequest.com
[makepr-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg
[astro]: https://astro.build
[astro-badge]: https://astro.badg.es/v2/built-with-astro/tiny.svg