私が使用する方法については、このガイドを共有していますGoogle Analyticsを上ユニバーサルアナリティクスのプロパティでReactJSを。これから説明する2つの製品に関連するちょっとした紹介：

ReactJSは、ユーザーインターフェイスを構築および維持するためのSPA（シングルページアプリケーション）Javascriptライブラリです。つまり、アプリケーションは、ブラウザが新しいページ全体をロードするデフォルトの方法ではなく、サーバーまたはローカル状態からの新しいデータに基づいて現在のページを動的に書き込みます。複数ページのアプリケーション。

Google Analytics（GA）は、Googleの分析ツールであり、ユーザーがWebサイトにアクセスしているときに重要なユーザー情報を簡単に追跡できます。2020年第4四半期の時点で、Googleはより高度な追跡機能とより優れたダッシュボードを備えた新しいGoogle Analytics 4（GA4）プロパティを導入しました。この記事では、GoogleAnalyticsの古いバージョンであるUniversalAnalytics（UA）プロパティについて具体的に説明します。

準備

まず、次の簡単な手順に従って、WebサイトのトラッキングIDを取得する必要があります。

1. Google AnalyticsのWebサイトにアクセスすると、初めて使用する場合は、データ共有設定を含むアカウントを設定するように求められます。
2. 新しいプロパティを作成します— UniversalAnalyticsプロパティオプションを選択することを忘れないでください。UA、GA4、またはその両方のプロパティを作成するオプションがあります。
3. アカウントとプロパティを設定するための残りの情報を入力します。次に、追跡ID（UA-123456789–1など）を取得します。

Google AnalyticsとReactJSでUAプロパティを使用しているときは、React-GAライブラリを使用するのが最も快適です。この記事が書き出された時点で、NPMで毎週45万回以上ダウンロードされています。このコードをReactJSアプリケーションで実行することで、簡単にインストールできます。

# npm
npm i -s react-ga
# yarn
yarn add react-ga

実装

Webサイトで使用できるGAの2つの簡単な実装があります。

ページビューの追跡—追跡する各ページのcomponentDidMountでこのコード行を使用するだけで、ユーザーがWebサイトにアクセスしているときのユーザーの移動を追跡して、特定の目標到達プロセスについて詳しく理解できます。

ReactGA.pageview(window.location.pathname);

イベントの追跡—キャンペーンの目標に沿った、ウェブサイト上の重要なイベントを追跡できます。たとえば、チェックアウトの成功、ソーシャルシェアリング、特定のボタンのクリックなどです。

ReactJSアプリケーションにGoogleAnalyticsを正しく実装したことをどのように知っていますか？

シンプル！ReactJSアプリケーションを開くか、ローカルで実行して、GAダッシュボードのリアルタイムレポートの[概要]タブを開くだけです。あなたはあなたがあなたであるあなたのウェブサイト上に1人の現在アクティブな訪問者を持っているのを見るでしょう！

…そしてVoilà！

それでおしまい ！これで、GAは、ユーザーがアクセスしたページビューと、ReactJSアプリケーションで追跡する重要なイベントを追跡できるようになりました。

Google Analyticsについて詳しく知りたい場合は、次のソースから学ぶことをお勧めします。

Google Analytics Academy：初心者向けのGoogle Analytics

Google Analytics Academy：高度なGoogle Analytics

Google Analytics Academy：パワーユーザー向けのGoogle Analytics

うまくいけば、この短い記事があなたの質問のいくつかに答えるか、あなたのウェブサイトに分析を実装することを学ぶことにあなたの興味をピークにすることができるでしょう。私の記事を読んでくれてありがとう！