将 React Router 页面浏览量发送到 Firebase Analytics

Question

我的应用程序使用 React Router 的 BrowserRouter。我如何跟踪页面浏览量并将它们发送到 google firebase analytics（我已经安装 firebase-analytics.js）。

Answer 1

只需在 <BrowserRouter> 中的任意位置呈现以下组件：


import { useLocation } from "react-router-dom";
import { useEffect } from "react";

function FirebaseAnalytics() {
    let location = useLocation();
    useEffect(() => {
        const analytics = window.firebase && window.firebase.analytics;
        if (typeof analytics === "function") {
            const page_path = location.pathname + location.search;
            analytics().setCurrentScreen(page_path);
            analytics().logEvent("page_view", { page_path });
        }
    }, [location]);
    return null;
}

Answer 2

作为对 Tzach 答案的替代/额外考虑，您可能更愿意导入 firebase 并设置

const analytics = firebase.analytics;

将 React Router 页面浏览量发送到 Firebase Analytics

Sending React Router Page Views to Firebase Analytics

firebase

react-router

firebase-analytics