One npm package for TanStack Router apps
GoogleAnalytics once in your root route
A page_view per pathname change
Typed events from one hook
Beyond page views
From the first visit
to the next conversion.
Recommended events such as sign_up and login are typed, and custom events accept any name. The same hook sets user properties and sends consent updates from your own consent interface, so there is no separate analytics wrapper to maintain.
import { useGoogleAnalytics } from 'tanstack-router-ga4';
export function SignupButton() {
const { event } = useGoogleAnalytics();
return (
<button onClick={() => event('sign_up', {
method: 'email',
})}>
Record signup
</button>
);
}
Fits your app shell
Client only.
Out of the way.
The component renders nothing during server rendering and initializes GA4 in the browser. By default it waits for browser idle time, and you can turn that off to load immediately.
<GoogleAnalytics
measurementId="G-XXXXXXXXXX"
deferred={false}
consentDefaults={{ analytics_storage: 'denied' }}
/>
Documentation
Find what you need.
Guides for setup and behavior, plus an API reference generated from the source on every build.
Start here
Getting started
Install the package, mount GoogleAnalytics in your root route, and confirm the first page view.
Read more →Recipes
Examples
Track signups and leads, set user IDs, and read the client ID with the useGoogleAnalytics hook.
Read more →Concepts
Behavior and consent
When page views fire, how loading is deferred, what happens during server rendering, and where consent fits.
Read more →Reference
API reference
Component props, hook commands, and exported types, generated from the TSDoc comments in the source.
Read more →Add it to your app
One package. One component.
npm install tanstack-router-ga4