web-dev-qa-db-ja.com

ReactGA.Initializeは最初と呼ばれていなければなりません

私は私のアプリのルートで初期化されているにもかかわらず、次の警告を複数回（複数ページの場合）警告しています。これはGoogle Analyticsが正しく機能しているかどうか私に不思議になりますか？ [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
)
 _

サーバーサイドレンダリングを使用しているので、トラッキングの前にウィンドウオブジェクトが存在することを確認しています。この行は私の各ページのインポートの終わりに置かれます。

例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を設定する方法については多くの情報がありませんので、この作業を受けるために何をする必要があるかは完全によくわかりません。どんな助けにかかっています！

javascriptreactjsgoogle-analyticsserver-side-renderingreact-ga
9
Matt Strom

私はついに潜在的な解決策を持つたくさんのぬいぐるみの後に解決策を見つけました。初期化が終了する前にPageViewが発行されているため、PageViewがcomponentDidMount()に配置することで、PageViewを遅らせることができます。その実装は次のようになります。

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 />
        );
    }
}
 _
4
Matt Strom