Settings

Analytics platform settings

The manage pane for an ad-platform analytics integration, covering connection status, the linked ad account, an event-sync matrix, and the disconnect action.

Open in Storybook

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.

Analytics platform settings

Rendered live from Storybook

Open

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`	—	Display name in the header and headings — "Meta", "Google Ads", "LinkedIn", "TikTok".
`platformShortName`	`string`	—	Name used inside body copy, which is sometimes shorter than the header: the Google Ads pane says "sent to Google". Defaults to `platformName`.
`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`	—	Mark sizing inside the header chip and on the connect button.
`logo`	`React.ReactNode`	—	A rendered mark (inline SVG) instead of an image — wins over `logoSrc`.
`onBack`	`() => void`	—	Returns to the integrations list.
`connectDescription`*	`React.ReactNode`	—	The pitch shown both on the disconnected card and inside the connect modal.
`connectedAccountLabel`*	`React.ReactNode`	—	The authenticated login — `Meta Business Suite (123-***-456)`.
`accounts`	`AnalyticsAdAccount[]`	`[]`	Ad accounts under that login.
`selectedAccountId`	`string`	—	Controlled account selection.
`defaultSelectedAccountId`	`string`	—	Undocumented — add TSDoc to the prop in the library.
`onSelectedAccountIdChange`	`(id: string) => void`	—	Undocumented — add TSDoc to the prop in the library.
`connected`	`boolean`	—	Controlled connection state. Pair with `onConnectedChange`.
`defaultConnected`	`boolean`	`true`	Uncontrolled initial connection state — makes connected/disconnected static stories.
`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`	—	Controlled connect-modal open state.
`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.
`sourceOptions`	`AnalyticsSyncOption[]`	`ANALYTICS_SOURCE_OPTIONS`	Rows of the "Synced events" card, in render order.
`lifecycleEvents`	`AnalyticsSyncOption[]`	`ANALYTICS_LIFECYCLE_EVENTS`	Undocumented — add TSDoc to the prop in the library.
`fieldGroups`	`AnalyticsSyncOption[]`	—	Defaults to `buildAnalyticsFieldGroups(platformShortName)`.
`enabled`	`string[]`	—	Controlled set of enabled option ids across all three groups.
`defaultEnabled`	`string[]`	`ANALYTICS_DEFAULT_ENABLED_IDS`	Uncontrolled initial enablement. Defaults to {@link ANALYTICS_DEFAULT_ENABLED_IDS}.
`onEnabledChange`	`(enabled: string[]) => void`	—	Undocumented — add TSDoc to the prop in the library.
`eventsExpanded`	`boolean`	—	Controlled disclosure of the per-event rows.
`defaultEventsExpanded`	`boolean`	`false`	Uncontrolled initial disclosure — renders the expanded card as a static story.
`onEventsExpandedChange`	`(expanded: boolean) => void`	—	Undocumented — add TSDoc to the prop in the library.
`syncedEventsTitle`	`React.ReactNode`	`"Synced events"`	Undocumented — add TSDoc to the prop in the library.
`syncedEventsDescription`	`React.ReactNode`	—	Undocumented — add TSDoc to the prop in the library.
`allEventsLabel`	`React.ReactNode`	`"All events"`	Undocumented — add TSDoc to the prop in the library.
`allEventsDescription`	`React.ReactNode`	—	Undocumented — add TSDoc to the prop in the library.
`disconnectTitle`	`React.ReactNode`	—	Undocumented — add TSDoc to the prop in the library.
`disconnectDescription`	`React.ReactNode`	—	What disconnecting destroys. Wording differs per platform (pixel vs conversion config).
`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/AnalyticsPlatformSettings.tsx
Portability: Copies across unchanged — only the utils import path moves.
Notes: Use it for any ad platform (Meta, Google Ads, LinkedIn, TikTok) whose settings follow the same connect-account-sync-events-disconnect shape; supply platformName, connectDescription, and accounts as props, and use platformShortName when body copy needs a shorter name than the header, as Google Ads does. It is not meant for GA4, whose body is a property form rather than an event matrix.