Skip to content
trackbridge

<TrackbridgeProvider>

The root client-side wiring for a Next.js (App Router) integration. Renders three things:

  1. A beforeInteractive <Script> that pushes gtag('consent', 'default', { ... }) so Consent Mode v2 takes effect from the very first gtag call.
  2. An afterInteractive <Script> that loads https://www.googletagmanager.com/gtag/js?id=<adsConversionId>.
  3. A React context provider holding a BrowserTracker instance created once via useRef.

Drop it into app/layout.tsx and stop thinking about gtag-loading order.

Signature

Section titled “Signature”
import { TrackbridgeProvider } from '@trackbridge/sdk/next';


<TrackbridgeProvider config={config} consentDefaults={consentDefaults}>
  {children}
</TrackbridgeProvider>;

Props

Section titled “Props”
type TrackbridgeProviderProps = {
  config: BrowserTrackerConfig;
  consentDefaults?: Partial<ConsentState>;
  children: ReactNode;
};
PropRequiredNotes
configyesThe same BrowserTrackerConfig accepted by createBrowserTracker.
consentDefaultsnoPer-field overrides for the all-denied default Consent Mode v2 snippet. Useful for non-EEA regions where you want 'granted' defaults. Merged over { ad_storage: 'denied', ad_user_data: 'denied', ad_personalization: 'denied', analytics_storage: 'denied' }.
childrenyesYour app.

Behavior

Section titled “Behavior”
  • The default gtag('consent', 'default', ...) snippet emits all four signals as 'denied', not 'unknown'. Defaults exist for the gap before the CMP loads; treating that gap as denied is the GDPR-safe choice.
  • The gtag.js loader URL uses config.adsConversionId as id= (one gtag.js script handles multiple config calls for both Ads and GA4).
  • The BrowserTracker is created inside useRef, so React strict-mode double-renders don’t re-create it.
  • <TrackbridgeProvider> is not marked 'use client' itself — the inner TrackbridgeContextProvider is. The provider component is server-renderable, only the context bridge is client-only.

Example

Section titled “Example”
app/layout.tsx
import { TrackbridgeProvider, TrackbridgePageViews } from '@trackbridge/sdk/next';


export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <TrackbridgeProvider
          config={{
            adsConversionId: process.env.NEXT_PUBLIC_GOOGLE_ADS_CONVERSION_ID!,
            ga4MeasurementId: process.env.NEXT_PUBLIC_GA4_MEASUREMENT_ID!,
            consentMode: 'v2',
            conversionLabels: {
              purchase: process.env.NEXT_PUBLIC_GOOGLE_ADS_PURCHASE_LABEL,
            },
          }}
        >
          <TrackbridgePageViews />
          {children}
        </TrackbridgeProvider>
      </body>
    </html>
  );
}

For a non-EEA deployment that wants permissive defaults:

<TrackbridgeProvider
  config={config}
  consentDefaults={{
    ad_storage: 'granted',
    ad_user_data: 'granted',
    ad_personalization: 'granted',
    analytics_storage: 'granted',
  }}
>

See also

Section titled “See also”