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 });
};
onst 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?