{"_id":"@astro-kits/google-analytics","name":"@astro-kits/google-analytics","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@astro-kits/google-analytics","version":"0.1.0","description":"Google Analytics integration for Astro with Partytown","type":"module","exports":{".":"./index.ts"},"keywords":["astro","astro-component","google-analytics","partytown","analytics","performance"],"author":{"name":"HandyStudio"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/handystudio/astro-google-analytics.git"},"bugs":{"url":"https://github.com/handystudio/astro-google-analytics/issues"},"homepage":"https://github.com/handystudio/astro-google-analytics#readme","peerDependencies":{"@astrojs/partytown":"^2.1.4","astro":"^4.0.0 || ^5.0.0"},"_id":"@astro-kits/google-analytics@0.1.0","gitHead":"9cf46a00d9f3e25b9c8aad5da0e4886f646ee5dc","_nodeVersion":"20.15.0","_npmVersion":"10.8.3","dist":{"integrity":"sha512-OqgAEaEG9DSoete2YKjEntJMarasUkGLccZADsZsuna3VExQ8qrCsRebMXvGI4LGKN+1oDEKnyarnA5rZE1bHA==","shasum":"ad252f3bb64f8924a8bbd543b40a68215e04c23a","tarball":"https://registry.npmjs.org/@astro-kits/google-analytics/-/google-analytics-0.1.0.tgz","fileCount":4,"unpackedSize":8004,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEoovwBRa/E5fAx2l5mSiq208pcmNaNScu1D4ftZSvFpAiAhTGcKMIV198mY97y5NZ0tiKY8BNZAHzZkffrfq+BDRA=="}]},"_npmUser":{"name":"handystudio","email":"panda@handystudio.app"},"directories":{},"maintainers":[{"name":"handystudio","email":"panda@handystudio.app"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/google-analytics_0.1.0_1741844577872_0.41819307880611056"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-13T05:42:57.779Z","0.1.0":"2025-03-13T05:42:58.050Z","modified":"2025-03-13T05:42:58.325Z"},"maintainers":[{"name":"handystudio","email":"panda@handystudio.app"}],"description":"Google Analytics integration for Astro with Partytown","homepage":"https://github.com/handystudio/astro-google-analytics#readme","keywords":["astro","astro-component","google-analytics","partytown","analytics","performance"],"repository":{"type":"git","url":"git+https://github.com/handystudio/astro-google-analytics.git"},"author":{"name":"HandyStudio"},"bugs":{"url":"https://github.com/handystudio/astro-google-analytics/issues"},"license":"MIT","readme":"# @astro-kits/google-analytics\n\nA performance-optimized Google Analytics integration for Astro that leverages Partytown to run analytics scripts in a web worker.\n\n[![npm version](https://img.shields.io/npm/v/@astro-kits/google-analytics.svg)](https://www.npmjs.com/package/@astro-kits/google-analytics)\n[![license](https://img.shields.io/npm/l/@astro-kits/google-analytics.svg)](https://github.com/yourusername/google-analytics/blob/main/LICENSE)\n\n## Features\n\n- 🚀 **Web Worker Powered**: Offloads Google Analytics to a web worker using Partytown\n- 🔄 **Simple Integration**: Drop-in component for any Astro project\n- 🔧 **Configurable**: Options for development/production behavior\n- 📦 **Lightweight**: Minimal implementation with no unnecessary features\n- ⚡ **Performance First**: Improves main thread performance\n- 🔐 **Environment Variables**: Automatically use GA ID from environment variables\n\n## Installation\n\n```bash\n# npm\nnpm install @astro-kits/google-analytics @astrojs/partytown\n\n# yarn\nyarn add @astro-kits/google-analytics @astrojs/partytown\n\n# pnpm\npnpm add @astro-kits/google-analytics @astrojs/partytown\n```\n\n## Setup\n\n### 1. Configure Partytown in your Astro config\n\n```js\n// astro.config.mjs\nimport { defineConfig } from \"astro/config\";\nimport partytown from \"@astrojs/partytown\";\n\nexport default defineConfig({\n  integrations: [\n    partytown({\n      config: {\n        forward: [\"dataLayer.push\", \"gtag\"],\n      },\n    }),\n  ],\n});\n```\n\n### 2. Set up environment variables (optional)\n\nCreate a `.env` file in your project root:\n\n```\nGA_ID=G-XXXXXXXXXX\n```\n\n### 3. Import and use the component\n\n```astro\n---\n// src/layouts/Layout.astro\nimport GoogleAnalytics from '@astro-kits/google-analytics';\n---\n\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <title>My Astro Site</title>\n\n    <!-- Add Google Analytics -->\n    <GoogleAnalytics />  <!-- Will use ID from environment variables -->\n  </head>\n  <body>\n    <slot />\n  </body>\n</html>\n```\n\n## Configuration Options\n\n| Option       | Type      | Default     | Description                                                                                                       |\n| ------------ | --------- | ----------- | ----------------------------------------------------------------------------------------------------------------- |\n| `id`         | `string`  | `undefined` | Your Google Analytics measurement ID (G-XXXXXXXXXX). If not provided, will use `GA_ID` from environment variables |\n| `partytown`  | `boolean` | `true`      | Whether to use Partytown to run GA in a web worker                                                                |\n| `production` | `boolean` | `true`      | Only load analytics in production environment                                                                     |\n\n## Examples\n\n### Basic Usage (with ID from environment variables)\n\n```astro\n<GoogleAnalytics />\n```\n\n### Explicitly Providing Measurement ID\n\n```astro\n<GoogleAnalytics id=\"G-XXXXXXXXXX\" />\n```\n\n### Without Partytown (run on main thread)\n\n```astro\n<GoogleAnalytics partytown={false} />\n```\n\n### Load in Development Environment\n\n```astro\n<GoogleAnalytics production={false} />\n```\n\n## How It Works\n\nThis component:\n\n1. Loads the Google Analytics gtag.js script\n2. Gets the GA ID from props or falls back to the `GA_ID` environment variable\n3. Initializes Google Analytics with the provided ID\n4. Uses Partytown to run the scripts in a web worker (by default)\n5. Conditionally loads only in production environments (by default)\n\n## Component Implementation\n\nThe component automatically checks for the Google Analytics ID in this order:\n\n1. From the `id` prop if provided\n2. From the `GA_ID` environment variable\n3. Logs a warning if no ID is found\n\n```astro\n---\n// Example of component implementation\nexport interface Props {\n  id?: string; // Google Analytics measurement ID (G-XXXXXXXXXX)\n  partytown?: boolean; // Whether to use Partytown\n  production?: boolean; // Only load in production environment\n}\n\n// Get the Google Analytics ID from the .env file\nconst GA_ID = import.meta.env.GA_ID;\n\nconst {\n  id = GA_ID,\n  partytown = true,\n  production = true\n} = Astro.props;\n\n// Component logic...\n---\n```\n\n## Performance Benefits\n\nBy running Google Analytics in a web worker:\n\n- Reduces main thread execution time\n- Improves page load performance\n- Reduces impact on Core Web Vitals\n- Better user experience with less main thread blocking\n\n## Browser Compatibility\n\nThis component is compatible with all modern browsers. Partytown provides fallbacks for browsers that don't support web workers.\n\n## License\n\nMIT\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## Credits\n\n- [Astro](https://astro.build)\n- [Partytown](https://partytown.builder.io)\n","readmeFilename":"README.md","_rev":"1-e93a770411df3c2123af6467dbaecc8b"}