How to integrate with Google Analytics?

[wong2]

I'd like to use GA to track page viewed.

[vijaypushkin]

This is how I currently do it

const router = getRouter(queryClient);

const Root = (
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  </StrictMode>
);

root.render(Root);

router.history.subscribe(() => {
  const url = router.history.location.href
  // your Favorite Analytics code here
});

[bzvyagintsev]

Doesn't it skip the first page view?

[airtonix]

@bzvyagintsev shouldn't that be taken care of by the original load of the GA sdk?

[em843]

@airtonix Yes, but if you're using hash routing GA will not save anything after the hash

[em843]

Here is my solution for hash routing. Configure Google Analytics to turn off sending page views automatically, and instead send the first page view manually:

__root.tsx:

// Send initial load page view event to Google Analytics
  useEffect(() => {
    const hash = window.location.hash;
    ReactGA.send({
      hitType: 'pageview',
      page: hash,
    });
  }, []);

main.tsx:

ReactGA.initialize('your-id-here', {
  gtagOptions: { send_page_view: false }, // IMPORTANT
});

router.history.subscribe((url) => {
  const href = url.location.href;
  ReactGA.send({
    hitType: 'pageview',
    page: href,
    title: href,
  });
});