如果您对如何在React中使用GoogleAnalytics和分析？感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解如何在React中使用GoogleAnalytics的各种细节，并对分析？进行

如果您对如何在React中使用Google Analytics和分析？感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解如何在React中使用Google Analytics的各种细节，并对分析？进行深入的分析，此外还有关于Google Analytics（分析）API-如何创建新帐户、Google Analytics（分析）View ID问题、Google Analytics（分析）使用GTag，如何在JavaScript中为自定义细分添加代码？、Google Analytics（分析）如何查看所有用户的列表的实用技巧。

• 如何在React中使用Google Analytics（分析）？（react开发chrome插件）
• Google Analytics（分析）API-如何创建新帐户
• Google Analytics（分析）View ID问题
• Google Analytics（分析）使用GTag，如何在JavaScript中为自定义细分添加代码？
• Google Analytics（分析）如何查看所有用户的列表

如何在React中使用Google Analytics（分析）？（react开发chrome插件）

在我的react应用程序中，我有一些页面：

1. 主要
2. 服务
3. 联系
4. 个人资料（私人）
5. 等等..

我需要跟踪用户使用Google Analytics（分析）的活动。我在react-ga上搜索了一下，一切都很好。但是，有了这个库，我必须在使用的每条路线上初始化我的GA。例如：

路线“ /”-主页：

class Main extends Component {    componentDidMount() {        initGA();    }    render() {        return (            <div>                <Component1 />                <Component2 />            </div>        )    }}

我的initGA()样子是：

import ReactGA from ''react-ga'';export const initGA = () => {    ReactGA.initialize(''UA-00000000-1'');    ReactGA.pageview(window.location.pathname + window.location.search);    console.log(window.location.pathname + window.location.search);}

我的App class样子是：

class App extends Component {    render() {        return (            <BrowserRouter>                <div className="App">                    <Switch>                        <Route exact path="/" component={Main} />                        <Route exact path="/signup" component={SignupLayout} />                        <Route component={PublicLayout} />                    </Switch>                </div>            </BrowserRouter>        );    }}

在使用方式上，react-ga我initGA()在每个组件上添加了功能，这些功能会在路线响应中呈现。我认为initGA()在每个组件中重复都是不正确的。拜托，伙计们，您如何使用react-ga？什么是使用react-ga的正确方法？

答案1

要使其工作，需要使用Router功能。因此在App组件中import { Router } from ''react-router-dom''。它必须是路由器而不是BrowserRouter。

然后 import createHistory from ''history/createBrowserHistory''

const history = createHistory()ReactGA.initialize(''UA-000000-1'');history.listen((location, action) => {    ReactGA.pageview(location.pathname + location.search);    console.log(location.pathname)});

此代码将在每次更改路线时触发！

比给路由器组件一个历史属性。

完整的代码：

import React, { Component } from ''react'';import { Router, Route, Switch } from ''react-router-dom'';import createHistory from ''history/createBrowserHistory''import Main from ''./components/pages/Main'';import ReactGA from ''react-ga'';const history = createHistory()ReactGA.initialize(''UA-00000000-1'');history.listen((location, action) => {    ReactGA.pageview(location.pathname + location.search);    console.log(location.pathname)});class App extends Component {    render() {        return (            <Router history={history}>                <div className="App">                    <Switch>                        <Route exact path="/" component={Main} />                        <Route exact path="/signup" component={SignupLayout} />                        <Route component={PublicLayout} />                    </Switch>                </div>            </Router>        );    }}export default App;

Google Analytics（分析）API-如何创建新帐户

您无法做到。管理API仅允许对帐户https://developers.google.com/analytics/devguides/config/mgmt/v3/account-management#account_summaries

唯一的解决方案是使用Provisioning API。它可用于创建新的Google Analytics（分析）帐户，并为您的客户大规模启用Google Analytics（分析）：https://developers.google.com/analytics/devguides/config/provisioning/v3/

无论如何，Provisioning API当前仅可通过邀请使用。

Google Analytics（分析）View ID问题

function queryAccounts() {
  // Load the Google Analytics client library.
  gapi.client.load('analytics','v3').then(function() {

    // Get a list of all Google Analytics accounts for this user
    gapi.client.analytics.management.accountSummaries.list().then(handleAccounts);
  });
}