gpt4 book ai didi

reactjs - React 应用程序上的 Google Analytics(分析)不起作用

转载 作者:行者123 更新时间:2023-12-03 17:09:26 28 4
gpt4 key购买 nike

我在 github 页面上托管了我的作品集(仍在开发中)。它只是一个具有静态内容的网络应用程序。我需要将 Google Analytics 添加到我的投资组合中并获取访问次数(主要是为了熟悉流程)。我发现react-ga可用于在 React Apps(使用 create-react-app 创建)上配置 Google Analytics 的模块。

并关注 this教程并对其进行配置和托管。我用 检查了网站测试流量但谷歌分析仪表板没有更新。可能是什么情况?它应该按照教程工作。由于我是 Google Analytics 的新手,我很难弄清楚这个问题。

这是我的应用.js

import React, { Component } from "react";
import HeaderList from "./components/Header";
import "./App.css";
import { Layout } from "antd";
import { Router, Route, Switch } from "react-router-dom";
import createHistory from "history/createBrowserHistory";
import ReactGA from 'react-ga';
import Keys from './config/keys';

import AboutMe from "./components/AboutMe";
import Skills from "./components/Skills";
import Contact from "./components/Contact";
import Projects from "./components/Projects";

const { Content } = Layout;
ReactGA.initialize(Keys.GOOGLE_TRACKING_ID); //Unique Google Analytics tracking number

function fireTracking() {
ReactGA.pageview(window.location.hash);
}

class App extends Component {
render() {
return (
<Router onUpdate={fireTracking} history={createHistory({ basename: process.env.PUBLIC_URL })}>
<div>
<Layout>
<HeaderList />
<Content className="Content">
<div className="RouteContent">
<Switch>
<Route exact path="/" component={AboutMe} />
<Route path="/skills" component={Skills} />
<Route path="/projects" component={Projects} />
<Route path="/Contact" component={Contact} />
</Switch>
</div>
</Content>
</Layout>
</div>
</Router>
);
}
}

export default App;

最佳答案

React v16.8 或更高版本

可以在 useEffect 中生成综合浏览量功能; withRouter用于在路由更改时注入(inject) Prop :

import React, { useEffect }          from 'react';
import { Switch, Route, withRouter } from 'react-router-dom';
import ReactGA from 'react-ga';
import Keys from './config/keys';

//Unique Google Analytics tracking number
ReactGA.initialize(Keys.GOOGLE_TRACKING_ID);

const App = () => {

useEffect( () => {

// This line will trigger on a route change
ReactGA.pageview(window.location.pathname + window.location.search);

});

return (/* Code here */);

}

export default withRouter(App);

在 React v16.8 之前

你需要在componentDidMount和componentDidUpdate中生成一个pageview:
componentDidMount  = () => ReactGA.pageview(window.location.pathname + window.location.search);
componentDidUpdate = () => ReactGA.pageview(window.location.pathname + window.location.search);

所以,最终代码:
import React, { Component } from "react";
import HeaderList from "./components/Header";
import "./App.css";
import { Layout } from "antd";
import { Router, Route, Switch } from "react-router-dom";
import createHistory from "history/createBrowserHistory";
import ReactGA from 'react-ga';
import Keys from './config/keys';

import AboutMe from "./components/AboutMe";
import Skills from "./components/Skills";
import Contact from "./components/Contact";
import Projects from "./components/Projects";

const { Content } = Layout;
ReactGA.initialize(Keys.GOOGLE_TRACKING_ID); //Unique Google Analytics tracking number

class App extends Component {

componentDidMount = () => ReactGA.pageview(window.location.pathname + window.location.search);
componentDidUpdate = () => ReactGA.pageview(window.location.pathname + window.location.search);

render() {
return (
<Router>
<div>
<Layout>
<HeaderList />
<Content className="Content">
<div className="RouteContent">
<Switch>
<Route exact path="/" component={AboutMe} />
<Route path="/skills" component={Skills} />
<Route path="/projects" component={Projects} />
<Route path="/Contact" component={Contact} />
</Switch>
</div>
</Content>
</Layout>
</div>
</Router>
);
}
}

export default App;

关于reactjs - React 应用程序上的 Google Analytics(分析)不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49398355/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com