A seamless integration for injecting Google Tag Manager snippets into Astro projects, supporting popular web analytics tools.
To install the package, use npm or yarn:
npm install @digi4care/astro-google-tagmanageror
yarn add @digi4care/astro-google-tagmanagerThis package provides components for easily adding Google Tag Manager (GTM) and Site Verification snippets to your Astro project.
---
import { GoogleTagmanager, GoogleTagmanagerNoscript, SiteVerification } from '@digi4care/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>---
import { GoogleTagmanagerPartytown, SiteVerification } from '@digi4care/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>-
GoogleTagmanager Component:
This component injects the Google Tag Manager script into your Astro project. Pass your GTM measurement ID as the
idprop. If needed, you can specify a custom domain using thedomainprop and a custom container path using thecontainerprop. -
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 theidprop. You can also specify a custom domain using thedomainprop. -
GoogleTagmanagerPartytown Component:
This component enables Partytown for offloading GTM script execution to a web worker. Pass your GTM measurement ID as the
idprop. -
SiteVerification Component:
Use this component to add site verification meta tags. Pass your verification ID as the
idprop. You can also specify thenameprop to use different site verification names for various vendors.
- Do not use
GoogleTagmanagerandGoogleTagmanagerNoscripttogether withGoogleTagmanagerPartytown. If you want to use Partytown, useGoogleTagmanagerPartytownwithSiteVerification, but without the standardGoogleTagmanagerorGoogleTagmanagerNoscriptcomponents. - The
GoogleTagmanagerNoscriptcomponent should always be placed directly after the opening<body>tag for correct functionality.
- 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.
- id (string): Your GTM measurement ID.
- domain (string): Custom domain for the Google Tag Manager script. Default is
https://www.googletagmanager.com.
- id (string): Your GTM measurement ID.
- 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-verificationfor Google.yandex-verificationfor Yandex.bing-site-verificationfor Bing.pinterest-site-verificationfor Pinterest.facebook-domain-verificationfor Facebook.baidu-site-verificationfor Baidu.apple-site-verificationfor Apple.alexaVerifyIDfor Alexa.norton-safeweb-site-verificationfor Norton Safe Web.twitter-site-verificationfor Twitter.linkedin-site-verificationfor LinkedIn.adobe-site-verificationfor Adobe.mail.ru-verificationfor Mail.ru.myspace-site-verificationfor MySpace.tumblr-site-verificationfor Tumblr.shopify-site-verificationfor Shopify.weebly-site-verificationfor Weebly.webmaster-site-verificationfor Generic Webmaster Tools.whatsapp-site-verificationfor WhatsApp Business.stripe-site-verificationfor Stripe.
This flexibility makes it easy to add verification for various platforms by using the same component with different name and id values.