@picoo-studio/astro-google-tagmanager NPM

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:

npm install @picoostudio/astro-google-tagmanager

yarn add @picoostudio/astro-google-tagmanager

Usage

This package provides components for easily adding Google Tag Manager (GTM) and Site Verification snippets to your Astro project.

Example

---
import { GoogleTagmanager, GoogleTagmanagerNoscript, SiteVerification } from '@picoostudio/astro-google-tagmanager';
---
<!doctype html>
<html lang="en" dir="ltr">
  <head>
    <SiteVerification id="SITE_VERIFICATION_ID" />
    <GoogleTagmanager id="GTM_MEASUREMENT_ID" domain="https://www.some-custom-domain.com" container="custom-container.js" />
  </head>

  <body>
    <GoogleTagmanagerNoscript id="GTM_MEASUREMENT_ID" domain="https://www.some-custom-domain.com" />
    <slot />
  </body>
</html>

Partytown Example

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

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

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 <body> 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 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 <body> tag for correct functionality.

Props

GoogleTagmanager

id (string): Your GTM measurement ID.
domain (string): Custom domain for the Google Tag Manager script. Default is https://www.googletagmanager.com.
container (string): Custom container path for the Google Tag Manager script. Default is gtm.js.

GoogleTagmanagerNoscript

id (string): Your GTM measurement ID.
domain (string): Custom domain for the Google Tag Manager script. 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.

astro-component astro analytics tagmanager google-tagmanager gtm astro-integration web-analytics SEO website-tracking web-analytics-integration

1.4.1

7 months ago

1.4.0

7 months ago