@digi4care/astro-google-tagmanager
Advanced tools
A seamless integration for injecting Google Tag Manager snippets into Astro projects, supporting popular web analytics tools.
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-tagmanager
or
yarn add @digi4care/astro-google-tagmanager
This 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 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.
GoogleTagmanager and GoogleTagmanagerNoscript together with GoogleTagmanagerPartytown. If you want to use Partytown, use GoogleTagmanagerPartytown with SiteVerification, but without the standard GoogleTagmanager or GoogleTagmanagerNoscript components.GoogleTagmanagerNoscript component should always be placed directly after the opening <body> tag for correct functionality.https://www.googletagmanager.com.gtm.js.https://www.googletagmanager.com.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.
FAQs
A seamless integration for injecting Google Tag Manager snippets into Astro projects, supporting popular web analytics tools.
We found that @digi4care/astro-google-tagmanager demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.