I have a React + React Router + Vite
application working in production. Now I'm trying to integrate it with Google Analytics.
This is my code:
import { getAnalytics, logEvent } from 'firebase/analytics';
import { initializeApp } from 'firebase/app';
const app = initializeApp({
apiKey: String(import.meta.env.VITE_FIREBASE_API_KEY),
authDomain: String(import.meta.env.VITE_FIREBASE_AUTH_DOMAIN),
projectId: String(import.meta.env.VITE_FIREBASE_PROJECT_ID),
storageBucket: String(import.meta.env.VITE_FIREBASE_STORAGE_BUCKET),
messagingSenderId: String(import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID),
appId: String(import.meta.env.VITE_FIREBASE_APP_ID),
measurementId: String(import.meta.env.VITE_FIREBASE_MEASUREMENT_ID),
});
const analytics = getAnalytics(app);
export const logPageView = (pageTitle: string, pagePath: string): void => {
logEvent(analytics, 'page_view', { page_title: pageTitle, page_path: pagePath });
};
const withPageTitle = (component: JSX.Element, pageTitle: string): JSX.Element => {
return (
<>
<PageTitle title={pageTitle} />
{component}
</>
);
};
const routes = createRoutesFromElements(
<Route path="/" element={<Index />} errorElement={withPageTitle(<UnexpectedError />, 'Erro Desconhecido')}>
<Route element={<AppPages />}>
<Route index element={<div />} />
<Route path="login" element={withPageTitle(<SignIn />, 'Login')} />
<Route path="sign_up" element={withPageTitle(<SignUp />, 'Crie sua Conta')} />
<Route path="verify" element={withPageTitle(<VerifyEmail />, 'Verifique sua Conta')} />
...
</Route>
<Route path="logout" element={<SignOut />} />
<Route path="*" element={withPageTitle(<NotFound />, 'Página Não Encontrada')} />
</Route>,
);
export function PageTitle({ title }: PageTitleProps): null {
const location = useLocation();
useEffect(() => {
document.title = title;
logPageView(title, location.pathname);
}, [location, title]);
return null;
}
Everything is working fine on http://localhost:3000
. I can see the collect
request being sent to Google. It also works when I generate and run the production docker image locally.
But, when I push the image to production and deploy the application behind my domain, I don't see any collect
request being sent.
I tried adding the website URL to the data stream and restricting the API to the website URL, but nothing worked.
Why Firebase Analytics is not working only on my production website? Is there anything I can do to debug and check what is wrong? Am I missing anything here?
I discovered that the issue was with my browser settings. I was using the Brave browser, which blocks analytics data by default. When I tried using a different browser, everything worked perfectly. If you're experiencing similar issues, consider checking your browser's privacy settings or trying another browser.