web-dev-qa-db-ja.com

GoogleアナリティクスをReactに追加しています

GoogleアナリティクスをReact Webアプリケーションに追加しようとしています。

HTML/CSS/JSサイトでそれを行う方法を知っており、AngularJSアプリにも統合しました。しかし、私はそれが反応することになるとそれについてどうやって行くのかよく分からない。

HTML/CSS/JSを使用して、すべてのページに追加しました。

AngularJSで行ったことは、GTMおよびGAスクリプトをindex.htmlに追加し、クリックを取得するためにUAラベルをHTML div（およびボタン）に追加したことです。

Reactでどうすればいいですか？

助けてください！

reactjsgoogle-analyticsreact-ga
23
Raj

更新：2019年2月
この質問が頻繁に検索されているのを見て、説明を広げることにしました。
GoogleアナリティクスをReactに追加するには、React-GAの使用をお勧めします。
実行して追加：
npm install react-ga --save

初期化：
ルートコンポーネントで、次を実行して初期化します。

import ReactGA from 'react-ga';
ReactGA.initialize('Your Unique ID');

ページビューを報告するには：

ReactGA.pageview(window.location.pathname + window.location.search);

カスタムイベントを報告するには：

ReactGA.event({
  category: 'User',
  action: 'Sent message'
});

詳細な手順は github repo にあります

このIMOのベストプラクティスは、react-gaを使用することです。 github rep をご覧ください

30
Matan Bobi

パッケージを使用せずに、これは私がそれを行う方法です：

index.js（renderメソッド内）：

    {/* Global site tag (gtag.js) - Google Analytics */}
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"
    />
    <script>{injectGA()}</script>

そしてクラスの外：

const injectGA = () => {
  if (typeof window == 'undefined') {
    return;
  }
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    window.dataLayer.Push(arguments);
  }
  gtag('js', new Date());

  gtag('config', 'YOUR_TRACKING_ID');
};
5
cameck

パッケージを使用したくない場合は、これが反応アプリケーションでどのように機能するかです。 index.htmlに「gtag」を追加します

<!-- index.html -->

<script>
            window.dataLayer = window.dataLayer || [];
            function gtag() {
                dataLayer.Push(arguments);
            }
            gtag("js", new Date());

            gtag("config", "<GA-PROPERTYID>");
        </script>

ログインフォームの送信アクションで、イベントを発生させます

window.gtag("event", "login", {
            event_category: "access",
            event_label: "login"
        });
3
Giwan

確認できるもう1つの優れたライブラリは、 redux-beacon です。

これは、react/reduxアプリケーションと非常に簡単に統合され、優れたドキュメントを備えています。 ReactGAも優れていますが、redux-beaconを使用すると、独自のミドルウェアを介して機能するため、アプリのコードをGoogleアナリティクスコードで混乱させることはありません。

2
utkarsh

Segment script をindex.htmlに埋め込み、windowオブジェクトでアクセス可能な分析ライブラリを使用して、追加することをお勧めしますReactのイベントハンドラーへの呼び出しの追跡：

export default class SignupButton extends Component {
  trackEvent() {
    window.analytics.track('User Signup');
  }

  render() {
    return (
      <button onClick={this.trackEvent}>
        Signup with Segment today!
      </button>
    );
  }
}

私は https://github.com/segmentio/analytics-react のメンテナーです。単一のAPIを使用して顧客データを管理することでこの問題を解決し、追加のコードを記述せずに他の分析ツール（250以上の宛先をサポート）に統合できるようにする場合は、チェックアウトすることをお勧めします。 ????

0
William