将 React Router 页面视图发送到 Firebase Analytics

Posted 2023-02-24

【中文标题】将 React Router 页面视图发送到 Firebase Analytics

【英文标题】：Sending React Router Page Views to Firebase Analytics

【发布时间】：2020-04-09 11:59:12

【问题描述】：

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

【参考方案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;

【参考方案2】：

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

const analytics = firebase.analytics;