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. Thedomainprop is particularly important for:- Cross-domain tracking: When you want to track user behavior across multiple domains
- Subdomain tracking: When you want to track across subdomains of your main domain
- Custom domain configurations: When using a custom domain for the Google Analytics script
For most standard implementations, you can omit the domain parameter unless you specifically need cross-domain or subdomain tracking.
-
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.