web-dev-qa-db-ja.com

ReactでGoogleAnalyticsを使用するにはどうすればよいですか？

私のreactアプリには、いくつかのページがあります。

  1. メイン
  2. サービス
  3. 連絡先
  4. プロファイル（プライベート）
  5. 等..

GoogleAnalyticsでユーザーのアクティビティを追跡する必要があります。私はグーグルで検索しました 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を使用する正しい方法は何ですか？

javascriptreactjsgoogle-analyticsreact-ga
3
Nastro

それを機能させるには、Router機能を使用する必要があります。したがって、アプリコンポーネントではimport { Router } from 'react-router-dom'。 BrowserRouterではなくRouterである必要があります。

次に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;
10
Nastro

これはフックでそれを行う方法です。

App.js

_import React, { useEffect } from 'react
import { Router, Route } from 'react-router-dom'
import { createBrowserHistory } from 'history'
import ReactGA from 'react-ga'

ReactGA.initialize(process.env.REACT_APP_GA_TRACKING_NO)
const browserHistory = createBrowserHistory()
browserHistory.listen((location, action) => {
  ReactGA.pageview(location.pathname + location.search)
})

const App = () => {
  useEffect(() => {
    ReactGA.pageview(window.location.pathname + window.location.search)
  }, [])

  return <div>Test</div>
}

_

クラスコンポーネントに関する上記の答えはほぼ問題ありませんが、分析で最初のページの読み込みを確認することはできません。 _history.listen_は、ルートが変更された場合にのみ起動します。これは、最初にページをロードしたときには発生しません。これを修正するために、useEffectコンポーネントにAppフックを追加しました。ユーザーがサイトをリロードすると、Appは常に再レンダリングされます。 ReactGA.pageview(window.location.pathname + window.location.search)は、ルートが_'/'_以外の場合、リロードを正しいルートに関連付けるようにします。

5
slinden

一度だけ初期化し、その後使用する必要があります

ReactGA.pageview(pagepath);

あなたのルーティングで。

デモ： https://github.com/react-ga/react-ga/tree/master/demo

1
XTOTHEL

複数のエクスポターを作成する必要があるservice.jsファイルを使用してこの問題を解決できます

import ReactGA from 'react-ga';

export const GAInit = (TrackingID) => {
   ReactGA.initialize(TrackingID)
}

export const GAEvent = (category, action) => {
ReactGA.initialize('TrackingIDHere')   
ReactGA.event({
   category,
   action
})
}

// export pageview and more...

app.jsからインポートし、毎回初期化する必要のないサービスを初期化して使用します。

または、react-gaの代わりにスクリプトを使用してこの問題を解決することもできます。

0
Asgar Ali Khachay