A seamless integration for injecting Google Analytics snippets into Astro projects, supporting popular web analytics tools.
To install the package, use npm or yarn:
npm install @digi4care/astro-google-analyticsor
yarn add @digi4care/astro-google-analyticsThis package provides components for easily adding Google Analytics (GA4) and Site Verification snippets to your Astro project.
---
import { Analytics, AnalyticsNoScript, SiteVerification } from '@digi4care/astro-google-analytics';
---
<!doctype html>
<html lang="en" dir="ltr">
<head>
<SiteVerification id="GA_VERIFICATION_ID" />
<Analytics id="GA4_MEASUREMENT_ID" partytown={false} domain="https://www.some-custom-domain-is-also-supported.com" />
</head>
<body>
<AnalyticsNoScript id="GA4_MEASUREMENT_ID" domain="https://www.some-custom-domain-is-also-supported.com" />
<slot />
</body>
</html>-
Analytics Component: This component injects the Google Analytics script into your Astro project. Pass your GA4 measurement ID as the
idprop. If you need to support a custom domain, use thedomainprop. -
AnalyticsNoScript Component: This component provides a no-script fallback for Google Analytics. Note that there is no
partytownsupport for this component. -
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.
Be aware that the AnalyticsNoScript component does not support partytown. Do not use it if you want to enable partytown.
- id (string): Your GA4 measurement ID.
-
partytown (boolean): Enable or disable partytown. Default is
false. -
domain (string): Custom domain for the Google Analytics script. Default is
https://www.googletagmanager.com.
- id (string): Your GA4 measurement ID.
-
domain (string): Custom domain for the Google Analytics script. Default is
https://www.googletagmanager.com.
- 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.
---
export interface Props {
name?: string;
id?: string;
}
const { id, name = "google-site-verification" } = Astro.props;
---
{id && <meta name={name} content={id} />}This project is licensed under the MIT License.