https://github.com/digi4care/astro-google-tagmanager
A seamless integration for injecting Google Tag Manager snippets into Astro projects, supporting popular web analytics tools.
https://github.com/digi4care/astro-google-tagmanager
astrojs google-analytics gtm partytown
Last synced: 3 months ago
JSON representation
A seamless integration for injecting Google Tag Manager snippets into Astro projects, supporting popular web analytics tools.
- Host: GitHub
- URL: https://github.com/digi4care/astro-google-tagmanager
- Owner: digi4care
- Created: 2024-07-04T19:32:54.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-25T13:15:26.000Z (about 1 year ago)
- Last Synced: 2024-11-15T21:14:28.370Z (11 months ago)
- Topics: astrojs, google-analytics, gtm, partytown
- Language: Astro
- Homepage:
- Size: 10.7 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @digi4care/astro-google-tagmanager
A seamless integration for injecting Google Tag Manager snippets into Astro projects, supporting popular web analytics tools.
## Installation
To install the package, use npm or yarn:
```bash
npm install @digi4care/astro-google-tagmanager
```
or
```bash
yarn add @digi4care/astro-google-tagmanager
```
## Usage
This package provides components for easily adding Google Tag Manager (GTM) and Site Verification snippets to your Astro project.
### Example
```astro
---
import { GoogleTagmanager, GoogleTagmanagerNoscript, SiteVerification } from '@digi4care/astro-google-tagmanager';
---
```
### Partytown Example
```astro
---
import { GoogleTagmanagerPartytown, SiteVerification } from '@digi4care/astro-google-tagmanager';
---
```
### Notes
- **GoogleTagmanager Component**:
This component injects the Google Tag Manager script into your Astro project. Pass your GTM measurement ID as the `id` prop. If needed, you can specify a custom domain using the `domain` prop and a custom container path using the `container` prop.
- **GoogleTagmanagerNoscript Component**:
This component provides a no-script fallback for Google Tag Manager and **must be placed directly after the opening `` tag**. Pass your GTM measurement ID as the `id` prop. You can also specify a custom domain using the `domain` prop.
- **GoogleTagmanagerPartytown Component**:
This component enables [Partytown](https://partytown.builder.io/) for offloading GTM script execution to a web worker. Pass your GTM measurement ID as the `id` prop.
- **SiteVerification Component**:
Use this component to add site verification meta tags. Pass your verification ID as the `id` prop. You can also specify the `name` prop to use different site verification names for various vendors.
### Important
- Do **not** use `GoogleTagmanager` and `GoogleTagmanagerNoscript` together with `GoogleTagmanagerPartytown`. If you want to use Partytown, use `GoogleTagmanagerPartytown` with `SiteVerification`, but without the standard `GoogleTagmanager` or `GoogleTagmanagerNoscript` components.
- The `GoogleTagmanagerNoscript` component should always be placed directly after the opening `` tag for correct functionality.
## Props
### GoogleTagmanager
- **id** (string): Your GTM measurement ID (e.g., 'GTM-XXXXXX').
- **domain** (string): Custom domain for self-hosting the Google Tag Manager container. This is useful for:
- Server-side tracking implementations
- Complying with data privacy regulations
- First-party cookie tracking
Default is `https://www.googletagmanager.com`. When self-hosting, set this to your domain where the GTM container is hosted (e.g., `https://analytics.yourdomain.com`).
- **container** (string): Custom container path for the Google Tag Manager script. Default is `gtm.js`. When self-hosting, this would be the path to your container file.
### GoogleTagmanagerNoscript
- **id** (string): Your GTM measurement ID (e.g., 'GTM-XXXXXX').
- **domain** (string): Must match the domain used in the `GoogleTagmanager` component. Set this to your custom domain if you're self-hosting the GTM container. Default is `https://www.googletagmanager.com`.
### GoogleTagmanagerPartytown
- **id** (string): Your GTM measurement ID.
### SiteVerification
- **id** (string): Your site verification ID.
- **name** (string): The name attribute for the meta tag. Default is `google-site-verification`. This allows you to use different site verification names for various vendors.
You can use this component multiple times to verify your site with different services. For example:
- `google-site-verification` for Google.
- `yandex-verification` for Yandex.
- `bing-site-verification` for Bing.
- `pinterest-site-verification` for Pinterest.
- `facebook-domain-verification` for Facebook.
- `baidu-site-verification` for Baidu.
- `apple-site-verification` for Apple.
- `alexaVerifyID` for Alexa.
- `norton-safeweb-site-verification` for Norton Safe Web.
- `twitter-site-verification` for Twitter.
- `linkedin-site-verification` for LinkedIn.
- `adobe-site-verification` for Adobe.
- `mail.ru-verification` for Mail.ru.
- `myspace-site-verification` for MySpace.
- `tumblr-site-verification` for Tumblr.
- `shopify-site-verification` for Shopify.
- `weebly-site-verification` for Weebly.
- `webmaster-site-verification` for Generic Webmaster Tools.
- `whatsapp-site-verification` for WhatsApp Business.
- `stripe-site-verification` for Stripe.
This flexibility makes it easy to add verification for various platforms by using the same component with different `name` and `id` values.