Settings
Ga4 settings
The manage pane for a Google Analytics 4 integration, covering the connect/disconnect flow, the connected-account banner, and a configuration card for website domain and measurement ID.
Available
Ports as-is
Examples
Rendered live from the maintained Storybook story. Lantern stores only the story id and embeds Storybook rather than duplicating the component or its demo.
Ga4 settings
Rendered live from Storybook
Storybook must be running for this to load — bun run start:storybook from the monorepo root, or set NEXT_PUBLIC_STORYBOOK_URL to a deployed instance.
Props
The component's public API, read from its TypeScript source. Descriptions come from TSDoc on the prop, so this table cannot drift from the component.
| Prop | Type | Default | Description |
|---|---|---|---|
platformName | string | "Google Analytics 4" | Header and heading name. |
logoSrc | string | — | Logo image source. Defaults to the neutral placeholder. Never remote. |
logoAlt | string | — | Undocumented — add TSDoc to the prop in the library. |
logoClassName | string | "w-5 h-5" | GA4's mark is a fuller square than the ad-platform glyphs — `w-5 h-5` in the header chip. |
logo | React.ReactNode | — | A rendered mark (inline SVG) instead of an image — wins over `logoSrc`. |
onBack | () => void | — | Undocumented — add TSDoc to the prop in the library. |
connectDescription | React.ReactNode | "Connect your Google Analytics 4 account to import property data and forward Space events for unified reporting." | Pitch shown on the disconnected card and inside the connect modal. |
connectedAccountLabel | React.ReactNode | "Google Analytics (506-***-549)" | The authenticated Google login — `Google Analytics (506-***-549)`. |
accounts | AnalyticsAdAccount[] | GA4_DEFAULT_ACCOUNTS | GA4 properties available under that login. |
selectedAccountId | string | — | Undocumented — add TSDoc to the prop in the library. |
defaultSelectedAccountId | string | "ga4_506134549" | Undocumented — add TSDoc to the prop in the library. |
onSelectedAccountIdChange | (id: string) => void | — | Undocumented — add TSDoc to the prop in the library. |
onCreateAccount | () => void | — | Shows the "Create account" row inside the property picker. |
connected | boolean | — | Controlled connection state. |
defaultConnected | boolean | true | Undocumented — add TSDoc to the prop in the library. |
onConnectedChange | (connected: boolean) => void | — | Undocumented — add TSDoc to the prop in the library. |
onDisconnect | () => void | — | Undocumented — add TSDoc to the prop in the library. |
onReconnect | () => void | — | Undocumented — add TSDoc to the prop in the library. |
connectModalOpen | boolean | — | Undocumented — add TSDoc to the prop in the library. |
defaultConnectModalOpen | boolean | false | Opens the connect modal on mount — the shipped `autoConnect` deep link. |
onConnectModalOpenChange | (open: boolean) => void | — | Undocumented — add TSDoc to the prop in the library. |
connecting | boolean | — | Drives the connect modal's in-flight spinner. |
configurationTitle | React.ReactNode | "Configuration" | Undocumented — add TSDoc to the prop in the library. |
configurationDescription | React.ReactNode | "Property and domain for imports; measurement ID forwards Space events to GA4 when set." | Undocumented — add TSDoc to the prop in the library. |
domains | GA4DomainOption[] | GA4_DEFAULT_DOMAINS | Domains selectable for traffic attribution. |
domain | string | — | Controlled domain selection. |
defaultDomain | string | "myspace.bts.app" | Undocumented — add TSDoc to the prop in the library. |
onDomainChange | (domain: string) => void | — | Undocumented — add TSDoc to the prop in the library. |
domainLabel | React.ReactNode | "Website" | Undocumented — add TSDoc to the prop in the library. |
domainDescription | React.ReactNode | "Domain used to filter and attribute traffic" | Undocumented — add TSDoc to the prop in the library. |
measurementId | string | — | Controlled measurement ID. Supply with `onMeasurementIdChange`. |
defaultMeasurementId | string | "" | Uncontrolled initial measurement ID — seeds the "configured" story. |
onMeasurementIdChange | (value: string) => void | — | Undocumented — add TSDoc to the prop in the library. |
measurementIdPlaceholder | string | "G-XXXXXXXXXX" | Undocumented — add TSDoc to the prop in the library. |
measurementIdDescription | React.ReactNode | "Forward Space events to GA4 when a measurement ID is set" | Undocumented — add TSDoc to the prop in the library. |
disconnectTitle | React.ReactNode | — | Undocumented — add TSDoc to the prop in the library. |
disconnectDescription | React.ReactNode | "This will remove all GA4 property configuration | Undocumented — add TSDoc to the prop in the library. |
disconnectActionLabel | React.ReactNode | "Disconnect" | Undocumented — add TSDoc to the prop in the library. |
className | string | — | Undocumented — add TSDoc to the prop in the library. |
Reference
Transcribed from the component audit. If this disagrees with the source, the source is right.
- Source
src/components/settings/analytics/GA4Settings.tsx- Portability
- Copies across unchanged — only the utils import path moves.
- Notes
- Use as the GA4 screen in analytics settings; unlike the ad-platform panes it has no event-sync matrix, its property picker adds a "Create account" action, and the measurement ID is optional and independent from the domain selection (imports vs. forwarding).