[解決済み] ReactGA.initializeを最初に呼び出す必要があります。

質問

アプリのルートで初期化したにもかかわらず、以下の警告が何度も（複数のページで）表示されます。 これでは、googleアナリティクスが正しく動作しているのかどうかさえも疑問です。 [react-ga] ReactGA.initialize must be called first or GoogleAnalytics should be loaded manually

私はReactGAを使ってgoogle analyticsのタグを処理していますが、うまくいきません。 ドキュメントとオンライン上の他の質問によると、私はこれを私のアプリケーションルートに挿入する必要があるだけです。

App.js。

import ReactGA from 'react-ga';
ReactGA.initialize('G-xxxxxxxxxx');

const app = () => (
    // Root level components here, like routing and navigation
)

私はサーバーサイドレンダリングを使っているので、トラッキングの前にウィンドウオブジェクトが存在することを確認しています。 この行は、各ページのimportsの末尾に記述しています。

例 page.js:

import ReactGA from 'react-ga';
if (typeof(window) !== 'undefined') {
    ReactGA.pageview(window.location.pathname + window.location.search);
}

function page() {
    return(<div className="page">Hello, World</div>)
}

export default page;

現時点では、SSRアプリのGoogle Analyticsの設定方法についてあまり情報がなく、何をすれば動作するのかが全くわかりません。 何か情報があれば教えてください。

どのように解決するのですか？

解決策になりそうなことをいろいろといじった結果、ようやく解決策を見つけました。 初期化が完了する前にページビューが発生していたので、私はページビューをできるだけ遅らせて componentDidMount() . その実装は次のようなものです。

App.jsです。

//imports
import ReactGA from 'react-ga';
ReactGA.initialize('UA-xxxxxxxxx-x');

const App = () => (
  <div className="App">
    <Navigation />
            
    <AppRouting />
  </div>
);

Page.jsです。

import ReactGA from 'react-ga';

class MyPage extends React.Component {
    componentDidMount() {
        ReactGA.pageview(window.location.pathname + window.location.search);
    }

    render() {
        return(
            <Component />
        );
    }
}