3527e732d4
Production-ready Next.js boilerplate with: - Runtime env validation (fail-fast on missing vars) - Feature-gated config (S3, Stripe, email, OAuth) - Docker + Coolify deployment pipeline - PostgreSQL + pgvector, MinIO S3, Better Auth - TypeScript strict mode (no ignoreBuildErrors) - i18n (en/es), AI modules, billing, monitoring Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
93 lines
4.4 KiB
Markdown
93 lines
4.4 KiB
Markdown
---
|
|
title: Configuration
|
|
description: Learn how to configure extension analytics in TurboStarter.
|
|
url: /docs/extension/analytics/configuration
|
|
---
|
|
|
|
# Configuration
|
|
|
|
The `@turbostarter/analytics-extension` package offers a streamlined and flexible approach to tracking events in your TurboStarter extension using various analytics providers. It abstracts the complexities of different analytics services and provides a consistent interface for event tracking.
|
|
|
|
In this section, we'll guide you through the configuration process for each supported provider.
|
|
|
|
Note that the configuration is validated against a schema, so you'll see error messages in the console if anything is misconfigured.
|
|
|
|
## Providers
|
|
|
|
Below, you'll find detailed information on how to set up and use each supported provider. Choose the one that best suits your needs and follow the instructions in the respective accordion section.
|
|
|
|
<Accordions>
|
|
<Accordion title="Google Analytics" id="google-analytics">
|
|
To use Google Analytics as your analytics provider, you need to [create a Google Analytics account](https://analytics.google.com/) and [set up a property](https://support.google.com/analytics/answer/9304153).
|
|
|
|
Next, add a data stream in your Google Analytics account settings:
|
|
|
|
1. Navigate to [Google Analytics](https://analytics.google.com/).
|
|
2. In the *Admin* section, under *Data collection and modification*, click on *Data Streams*.
|
|
3. Click *Add stream*.
|
|
4. Select *Web* as the platform.
|
|
5. Enter the required details for the stream (at minimum, provide a name and website URL).
|
|
6. Click *Create stream*.
|
|
|
|
After creating the stream, you'll need two pieces of information:
|
|
|
|
1. Your [Measurement ID](https://support.google.com/analytics/answer/12270356) (it should look like `G-XXXXXXXXXX`):
|
|
|
|
|
|
|
|
2. Your [Measurement Protocol API secret](https://support.google.com/analytics/answer/9814495):
|
|
|
|
|
|
|
|
Set these values in your `.env.local` file in the `apps/extension` directory and in your CI/CD provider secrets:
|
|
|
|
```dotenv
|
|
VITE_GOOGLE_ANALYTICS_MEASUREMENT_ID="your-measurement-id"
|
|
VITE_GOOGLE_ANALYTICS_SECRET="your-measurement-protocol-api-secret"
|
|
```
|
|
|
|
Also, make sure to activate the Google Analytics provider as your analytics provider by updating the exports in:
|
|
|
|
```ts title="index.ts"
|
|
// [!code word:google-analytics]
|
|
export * from "./google-analytics";
|
|
export * from "./google-analytics/env";
|
|
```
|
|
|
|
To customize the provider, you can find its definition in `packages/analytics/extension/src/providers/google-analytics` directory.
|
|
|
|
For more information, please refer to the [Google Analytics documentation](https://developers.google.com/analytics).
|
|
|
|
|
|
</Accordion>
|
|
|
|
<Accordion title="PostHog" id="posthog">
|
|
<Callout type="info" title="You can also use it for monitoring!">
|
|
PostHog is also one of pre-configured providers for [monitoring](/docs/extension/monitoring/overview) in TurboStarter. You can learn more about it [here](/docs/extension/monitoring/posthog).
|
|
</Callout>
|
|
|
|
To use PostHog as your analytics provider, you need to configure a PostHog instance. You can obtain the [Cloud](https://app.posthog.com/signup) instance by [creating an account](https://app.posthog.com/signup) or [self-host](https://posthog.com/docs/self-host) it.
|
|
|
|
Then, create a project and, based on your [project settings](https://app.posthog.com/project/settings), fill the following environment variables in your `.env.local` file in `apps/extension` directory and your CI/CD provider secrets:
|
|
|
|
```dotenv
|
|
VITE_POSTHOG_KEY="your-posthog-api-key"
|
|
VITE_POSTHOG_HOST="your-posthog-instance-host"
|
|
```
|
|
|
|
Also, make sure to activate the PostHog provider as your analytics provider by updating the exports in:
|
|
|
|
```ts title="index.ts"
|
|
// [!code word:posthog]
|
|
export * from "./posthog";
|
|
export * from "./posthog/env";
|
|
```
|
|
|
|
To customize the provider, you can find its definition in `packages/analytics/extension/src/providers/posthog` directory.
|
|
|
|
For more information, please refer to the [PostHog documentation](https://posthog.com/docs/advanced/browser-extension).
|
|
|
|
|
|
</Accordion>
|
|
</Accordions>
|