Configuré una cuenta de Google Analytics y creé una nueva propiedad. Sacó la identificación de seguimiento y luego la agregó con react-ga4 de esta manera.
Por ejemplo, en mi página de elementos del álbum
const ItemPage = () => { const {user} = useContext(AuthContext); let { item } = useParams(); const [album, setAlbum] = useState({}); useEffect(() => { const getAlbum = async () => { try { const res = await axios.get("/albums/find/" + item, { }); setAlbum(res.data); } catch (err) { console.log(err); } }; getAlbum(); }, []); let location = useLocation(); ReactGA.initialize("G-XXXXXXXXX"); ReactGA.send({hitType: "pageview", page: location.pathname}) return ( <> <div className={"itemPage"} style={{background: "linear-gradient(to bottom," + color + " -130%,black 90%), url(https://preview.redd.it/o0aq46bb2w111.jpg?width=640&crop=smart&auto=webp&s=6a9216cd0c400677ad95dc66d7cc10e0854aa980)"}}> <Navbar/> <Cover/> <Footer style={{marginTop: "10%"}}/> </div> </> ); } export default ItemPage;envía la ruta correcta y el título del álbum a Google Analytics, pero UN clic envía SIETE vistas. ¿Hay alguna manera de dejarlo al máximo a la vez?
Debe mover el código ReactGA a su bloque useEffect para que solo se ejecute una vez cuando se cargue la página:
const ItemPage = () => { const { user } = useContext(AuthContext); let { item } = useParams(); const [album, setAlbum] = useState({}); useEffect(() => { const getAlbum = async () => { try { const res = await axios.get("/albums/find/" + item, {}); setAlbum(res.data); } catch (err) { console.log(err); } }; getAlbum(); let location = useLocation(); ReactGA.initialize("G-XXXXXXXXX"); ReactGA.send({ hitType: "pageview", page: location.pathname }); }, []); return ( <> <div className={"itemPage"} style={{ background: "linear-gradient(to bottom," + color + " -130%,black 90%), url(https://preview.redd.it/o0aq46bb2w111.jpg?width=640&crop=smart&auto=webp&s=6a9216cd0c400677ad95dc66d7cc10e0854aa980)", }} > <Navbar /> <Cover /> <Footer style={{ marginTop: "10%" }} /> </div> </> ); };