Google Analyticsアプリケーション

1.序曲
 
🤔反応の中でどのように流量を追跡すればいいのでしょうか.
私を悩ませたのは.
状況は次のとおりです.
(全体会議中)
CEO:今回ΔΔ企業は私たちのサービスを買収したいですか?
CTO:そちらも流量を要求できます.
CEO:難しい仕事ですか.
CTO:簡単😙
トラフィックトラッキング機能を提供するプラットフォームを通じて、
実際に開発者が扱う内容は簡単です
2.流量追跡
私たちのサービスはグーグルが提供したGoogle Analyticsを利用しています.
トラッキングフローの決定
 
Google Analyticsを使う前に、
従来のマルチページ環境では、既存の機能をどのように使用していますか?
起動したか確認すべきだ
2-1. マルチページ環境でのトラフィック追跡
複数ページ環境でのトラフィック追跡には、次のものが含まれます.
Google Analyticsで属性を作成すると、
トレースコードの自動生成
📁 public/index.html

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XXXXXXXX"></script>
<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());

 gtag('config', 'XXXXXXXX');
</script>

トレースコードをHEADタグに入れたら完成!
このとき注意しなければならないのは
ローカルまたはテストサーバにもコードが含まれている場合は、ID値が自動的に認識されます.
実サーバのみに適用する必要があります
2-1. 1ページ環境でのトラフィックの追跡
react-gaライブラリは、1ページ環境のトラフィック追跡をサポートします.
積極的に運用してみることができます
📁 src/Analytics.js

import {useEffect} from "react";
import ReactGA from "react-ga";

const Analytics = () => {
  const pathName = window.location.pathname;
  useEffect(() => {
    if(process.env.NODE_ENV === "production") {
      ReactGA.initialize("UA-XXXXXXX-1");
      ReactGA.set({page: pathName});
      ReactGA.pageview(pathName);
    }
 }, [pathName]);
  return <></>;
}

export default Analytics;

初期化:トレースIDの初期化と適用
ページの設定
pageview:設定されたページで、ユーザーが送信したリクエスト数を統計する
ローカル環境ではカウントできない条件が与えられています
if(process.env.NODE_ENV === "production")
📁 src/App.js

import {Switch, Route} from "react-router-dom";
import Analytics from "./Analytics";

const App = () => {
  return (   
    <>
      <Analytics />  
      <Switch>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />    
      </Switch>  
    </> 
  );  
}

export default App;

ページ全体を追跡するには、次の手順に従います.
Windowsオブジェクトを使用してアプリケーションに一度宣言できます.
特定のパスまたはページにのみ適用する場合
Routeとして指定された構成部品から履歴オブジェクトを受信します.
あなたにも連絡できます.
3.活動
サービス内で活動すると、
ユーザーがボタンをクリックするかどうかを知りたい場合.
ユーザーの動作を追跡するイベントを直接保留することもできます.
📁 src/Event.js

import ReactGA from "react-ga";
import Button from "./Button";

<Button onClick={()=>{
  ReactGA.event({
    category: "Event",
    action: "Press play button",
    label: "Watch Video",
  });
}}>

左メニューの[アクション-アクティビティ-サマリー-アクティビティカテゴリ]で確認!
4.整理
✔Google Analyticsでトラフィック追跡が可能
✔1ページ環境のサービスでは、現在位置を直接転送する必要があります
✔ReactGA直接操作可能イベント