Skip to content

Add c15t consent management #1009

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tannerlinsley wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add c15t consent management #1009

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@
"prepare": "husky"
},
"dependencies": {
"@c15t/react": "^2.1.0",
"@c15t/scripts": "^2.1.0",
"@fingerprintjs/fingerprintjs-pro-react": "^2.7.1",
"@floating-ui/react": "^0.27.19",
"@kapaai/react-sdk": "^0.9.10",
Expand Down
72 changes: 72 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

71 changes: 71 additions & 0 deletions src/components/ConsentManager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import * as React from 'react'
import type { ReactNode } from 'react'
import {
ConsentBanner,
ConsentDialog,
ConsentManagerProvider,
type ConsentManagerOptions,
} from '@c15t/react'
import { gtag } from '@c15t/scripts/google-tag'

const C15T_BACKEND_URL = 'https://eager-kayak-phobos-tanstack-com.inth.app'
const GOOGLE_ANALYTICS_ID = 'G-JMT1Z50SPS'
const LEGAL_LINKS: Array<'privacyPolicy' | 'termsOfService'> = [
'privacyPolicy',
'termsOfService',
]

const consentManagerOptions = {
mode: 'hosted',
backendURL: C15T_BACKEND_URL,
consentCategories: ['necessary', 'measurement'],
overrides: import.meta.env.DEV ? { country: 'DE' } : undefined,
legalLinks: {
privacyPolicy: {
href: '/privacy',
target: '_self',
},
termsOfService: {
href: '/terms',
target: '_self',
},
},
scripts: [
gtag({
id: GOOGLE_ANALYTICS_ID,
category: 'measurement',
}),
],
} satisfies ConsentManagerOptions

export function ConsentManager({
children,
showControls = true,
}: {
children: ReactNode
showControls?: boolean
}) {
const [hasMounted, setHasMounted] = React.useState(false)

React.useEffect(() => {
setHasMounted(true)
}, [])

// c15t injects runtime theme styles; mount after hydration so Start's SSR
// markup stays byte-stable.
if (!hasMounted) {
return <>{children}</>
}
Comment on lines +54 to +58

@coderabbitai coderabbitai Bot Jun 26, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🩺 Stability & Availability | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Inspect relevant files and surrounding context.
git ls-files 'src/components/ConsentManager.tsx' 'src/routes/__root.tsx' 'src/components/*Consent*' 'src/**/*Consent*' | sed -n '1,200p'

printf '\n--- ConsentManager outline ---\n'
ast-grep outline src/components/ConsentManager.tsx --view expanded || true

printf '\n--- root outline ---\n'
ast-grep outline src/routes/__root.tsx --view expanded || true

printf '\n--- ConsentManager excerpt ---\n'
nl -ba src/components/ConsentManager.tsx | sed -n '1,220p'

printf '\n--- root excerpt ---\n'
nl -ba src/routes/__root.tsx | sed -n '1,260p'

Repository: TanStack/tanstack.com

Length of output: 1290

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Search for c15t usage and any provider placement.
rg -n --hidden --glob '!node_modules' --glob '!dist' --glob '!build' 'ConsentManagerProvider|c15t|gtag|ConsentBanner|ConsentDialog|alwaysLoad' src . || true

Repository: TanStack/tanstack.com

Length of output: 6447

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Check for c15t integration docs or comments that clarify expected bootstrap timing.
rg -n --hidden --glob '!node_modules' --glob '!dist' --glob '!build' 'c15t|ConsentManagerProvider|alwaysLoad|hydration|SSR|bootstr' README* docs src package.json . || true

Repository: TanStack/tanstack.com

Length of output: 50377

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# If the repo has package metadata, identify c15t package versions to reason about runtime expectations.
cat package.json 2>/dev/null | sed -n '1,220p' || true

Repository: TanStack/tanstack.com

Length of output: 5647

🌐 Web query:

c15t React provider mount first render consent manager hydration gtag alwaysLoad docs

💡 Result:

In the c15t consent manager system, the 'alwaysLoad' option is used for third-party scripts that must be present from the start of the page load, such as Google Tag Manager or gtag.js [1][2][3]. When 'alwaysLoad' is set to true, the script is injected into the DOM immediately, regardless of the user's current consent state [1][2]. Regarding the behavior during mount and hydration: 1. Consent Initialization: When the ConsentManagerProvider mounts, it creates a cached consent runtime and reads stored consent from the browser (e.g., localStorage/cookies) [4]. 2. Google Tag Handling: For 'alwaysLoad' integrations like gtag.js, c15t automatically initializes the vendor with Consent Mode v2 defaults set to 'denied' before any user interaction occurs [2][3]. This ensures that while the script is present, data transmission is suppressed until explicit consent is granted [2][3]. 3. Hydration and First Render: To prevent hydration mismatches or consent banner flashes, it is recommended to use server-side utilities to fetch initial consent data (e.g., 'fetchSSRData' or 'fetchInitialData') and pass this as a promise to the provider's 'ssrData' option [5][6][7]. This allows the provider to initialize with the correct state on the first render rather than waiting for a client-side API fetch [4][7]. 4. Stability: Mounting the provider as high as possible in the React tree is advised to avoid remounting during client-side navigation, which keeps the consent state stable [8]. You do not need to manually wrap calls to vendor SDKs (like gtag) in consent checks if they are correctly integrated via 'alwaysLoad', as the vendor's internal Consent Mode API handles the suppression [2][3]. If the integration is not 'alwaysLoad', the script will remain blocked until the relevant consent category is granted [1][9].

Citations:

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Read the relevant file sections with a fallback that does not rely on nl.
sed -n '1,140p' src/components/ConsentManager.tsx
printf '\n---\n'
sed -n '220,320p' src/routes/__root.tsx
printf '\n---\n'
sed -n '1,140p' src/server.ts

Repository: TanStack/tanstack.com

Length of output: 8987

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Inspect c15t docs in local dependency references if present in lockfile or package metadata.
rg -n --hidden --glob '!node_modules' --glob '!dist' --glob '!build' 'alwaysLoad|ssrData|fetchSSRData|fetchInitialData|ConsentManagerProvider' pnpm-lock.yaml package.json src docs .agents || true

Repository: TanStack/tanstack.com

Length of output: 386

🏁 Script executed:

#!/bin/bash
set -euo pipefail

sed -n '320,430p' src/routes/__root.tsx
printf '\n---\n'
sed -n '1,120p' src/utils/analytics/providers/google.ts

Repository: TanStack/tanstack.com

Length of output: 2079

Keep ConsentManagerProvider mounted from the first render. The early return defers c15t initialization until after hydration, so the consent runtime and Google Tag alwaysLoad setup start late. Move only the hydration-specific workaround into ConsentBanner/ConsentDialog, or use c15t’s SSR data path.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/ConsentManager.tsx` around lines 54 - 58,
`ConsentManagerProvider` is returning early until after hydration, which delays
c15t initialization and the Google Tag `alwaysLoad` setup. Keep
`ConsentManagerProvider` mounted on the first render and move only the
hydration-stability workaround out of this path, ideally into `ConsentBanner`
and `ConsentDialog` or by using c15t’s SSR data path. Preserve the provider’s
setup logic so the runtime starts immediately while still avoiding hydration
mismatch.


return (
<ConsentManagerProvider options={consentManagerOptions}>
{showControls ? (
<>
<ConsentBanner legalLinks={LEGAL_LINKS} />
<ConsentDialog legalLinks={LEGAL_LINKS} />
</>
) : null}
{children}
</ConsentManagerProvider>
)
}
23 changes: 23 additions & 0 deletions src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import * as React from 'react'
import { ConsentDialogLink } from '@c15t/react'
import { Link } from '@tanstack/react-router'
import { Card } from './Card'

Expand Down Expand Up @@ -53,10 +55,31 @@ export function Footer() {
)}
</div>
))}
<FooterConsentSettingsLink />
</div>
<div className={`text-center opacity-60`}>
&copy; {new Date().getFullYear()} TanStack LLC
</div>
</Card>
)
}

function FooterConsentSettingsLink() {
const [hasMounted, setHasMounted] = React.useState(false)

React.useEffect(() => {
setHasMounted(true)
}, [])

if (!hasMounted) {
return null
}

return (
<div>
<ConsentDialogLink className="appearance-none border-0 bg-transparent p-0 text-left text-current [font:inherit]">
Privacy Settings
</ConsentDialogLink>
</div>
)
}
76 changes: 36 additions & 40 deletions src/routes/__root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
import { SearchProvider } from '~/contexts/SearchContext'
import { ToastProvider } from '~/components/ToastProvider'
import { LoginModalProvider } from '~/contexts/LoginModalContext'
import { ConsentManager } from '~/components/ConsentManager'

import { Spinner } from '~/components/Spinner'
import { ThemeProvider, useHtmlClass } from '~/components/ThemeProvider'
Expand All @@ -41,10 +42,6 @@ import { trackPageView } from '~/utils/analytics'
import { createPartnerPlacementSessionSeed } from '~/utils/partner-placement'
import { twMerge } from 'tailwind-merge'

const GOOGLE_ANALYTICS_ID = 'G-JMT1Z50SPS'
const GOOGLE_ANALYTICS_PROXY_PREFIX = '/_a'
const GOOGLE_ANALYTICS_SCRIPT_SRC = `${GOOGLE_ANALYTICS_PROXY_PREFIX}/gtag.js`
const GOOGLE_ANALYTICS_BOOTSTRAP = `(function(){var id='${GOOGLE_ANALYTICS_ID}';var src='${GOOGLE_ANALYTICS_SCRIPT_SRC}';window.dataLayer=window.dataLayer||[];window.gtag=window.gtag||function(){window.dataLayer.push(arguments)};window.gtag('js',new Date());window.gtag('config',id,{transport_url:window.location.origin+'${GOOGLE_ANALYTICS_PROXY_PREFIX}'});var loaded=false;var load=function(){if(loaded)return;loaded=true;var script=document.createElement('script');script.async=true;script.src=src;script.setAttribute('data-ga-loader','true');document.head.appendChild(script)};if(typeof window.requestIdleCallback==='function'){window.requestIdleCallback(load,{timeout:3000});return}if(document.readyState==='complete'){window.setTimeout(load,1500);return}window.addEventListener('load',function(){window.setTimeout(load,1500)},{once:true})})();`
const DOCUMENT_CACHE_HEADERS = {
'Cache-Control': 'public, max-age=0, must-revalidate',
'Cloudflare-CDN-Cache-Control': 'no-store',
Expand Down Expand Up @@ -223,9 +220,6 @@ export const Route = createRootRouteWithContext<{
{
children: `(function(){try{var t=localStorage.getItem('theme')||'auto';var v=['light','dark','auto'].includes(t)?t:'auto';if(v==='auto'){var a=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';document.documentElement.classList.add(a,'auto')}else{document.documentElement.classList.add(v)}}catch(e){var a=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';document.documentElement.classList.add(a,'auto')}})()`,
},
{
children: GOOGLE_ANALYTICS_BOOTSTRAP,
},
],
}
},
Expand Down Expand Up @@ -305,44 +299,46 @@ function ShellComponent({ children }: { children: React.ReactNode }) {
{hasBaseParent ? <base target="_parent" /> : null}
</head>
<body className="overflow-x-hidden">
<LoginModalProvider>
<ToastProvider>
<PageViewTracker />
{hideNavbar ? children : <Navbar>{children}</Navbar>}
{showDevtools && LazyAppDevtools ? (
<OptionalDevtoolsBoundary>
<React.Suspense fallback={null}>
<LazyAppDevtools />
</React.Suspense>
</OptionalDevtoolsBoundary>
) : null}
<div
aria-hidden="true"
className={twMerge(
'pointer-events-none fixed top-0 left-0 z-99999999 h-[320px] w-full select-none',
)}
>
<div
className={twMerge(
'absolute top-0 w-full h-80 rounded-[100%] bg-amber-500/30 blur-3xl transition-all duration-500 dark:bg-sky-400/25',
showNavigationSpinner
? '-translate-y-1/2 opacity-100'
: '-translate-y-full opacity-0',
)}
/>
<ConsentManager showControls={!hasBaseParent}>
<LoginModalProvider>
<ToastProvider>
<PageViewTracker />
{hideNavbar ? children : <Navbar>{children}</Navbar>}
{showDevtools && LazyAppDevtools ? (
<OptionalDevtoolsBoundary>
<React.Suspense fallback={null}>
<LazyAppDevtools />
</React.Suspense>
</OptionalDevtoolsBoundary>
) : null}
<div
aria-hidden="true"
className={twMerge(
'absolute top-6 left-1/2 -translate-x-1/2 rounded-full bg-white/75 p-2 shadow-lg backdrop-blur-lg transition-all duration-300 dark:bg-slate-900/40',
showNavigationSpinner
? 'translate-y-0 opacity-100'
: '-translate-y-6 opacity-0',
'pointer-events-none fixed top-0 left-0 z-99999999 h-[320px] w-full select-none',
)}
>
<Spinner className="text-4xl" />
<div
className={twMerge(
'absolute top-0 w-full h-80 rounded-[100%] bg-amber-500/30 blur-3xl transition-all duration-500 dark:bg-sky-400/25',
showNavigationSpinner
? '-translate-y-1/2 opacity-100'
: '-translate-y-full opacity-0',
)}
/>
<div
className={twMerge(
'absolute top-6 left-1/2 -translate-x-1/2 rounded-full bg-white/75 p-2 shadow-lg backdrop-blur-lg transition-all duration-300 dark:bg-slate-900/40',
showNavigationSpinner
? 'translate-y-0 opacity-100'
: '-translate-y-6 opacity-0',
)}
>
<Spinner className="text-4xl" />
</div>
</div>
</div>
</ToastProvider>
</LoginModalProvider>
</ToastProvider>
</LoginModalProvider>
</ConsentManager>
<Scripts />
</body>
</html>
Expand Down
1 change: 1 addition & 0 deletions src/styles/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import 'tailwindcss';
@import '@c15t/react/styles.css';

@plugin "@tailwindcss/typography";

Expand Down
4 changes: 2 additions & 2 deletions src/utils/analytics/providers/google.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import type { AnalyticsProvider } from '../types'

declare global {
interface Window {
dataLayer: unknown[] | undefined
gtag: ((...args: unknown[]) => void) | undefined
dataLayer: unknown[]
gtag: (...args: unknown[]) => void
}
}

Expand Down
4 changes: 4 additions & 0 deletions vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,10 @@ const useSyncExternalStoreShimIndexAlias = {
// Worker server output so the runtime never loads their raw package entries.
const serverBundledClientPackages = [
...(shouldUseRedact ? ['@tanstack/redact'] : []),
'@c15t/react',
'@c15t/scripts',
'@c15t/ui',
'c15t',
/^@radix-ui\//,
'@kapaai/react-sdk',
'@tanstack/highlight',
Expand Down
Loading