ReactでGTMを使った計測方法（GA4）

備忘録
※筆者は本格的にフロントを触り始めてまだ３ヶ月目なので、間違っている可能性が高いです。

使用Ver

    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-gtm-module": "^2.0.11",
    "react-redux": "^8.0.2",
    "react-router-dom": "^5.3.0"
    .
    .
    .

npm install react-gtm-module

ページビュー取得方法

GTM側でタグを作成

usePageTracking.js

import { useEffect } from "react";
import TagManager from "react-gtm-module";
import { useLocation } from "react-router-dom";

const usePageTracking = () => {
  const location = useLocation();

  const tagManagerArgs = {
    gtmId: process.env.REACT_APP_GTM_ID,
  };

  useEffect(() => {
    TagManager.initialize(tagManagerArgs);
  }, [location]);
};

export default usePageTracking;

App.jsx

import { useLocation } from "react-router-dom";
import { useEffect } from "react";
import usePageTracking from "../helpers/useTracking";

export const Top = () => {
  //　やり方①（単純にこのページに到達した時にページビューを発火させる）
  usePageTracking();
  //　やり方②（useLocationを使って、現在ユーザーがいるページ情報を取得して、変更があった際にページビューを発火させる）
  const location = useLocation();
  useEffect(() => {
      usePageTracking();
  }, [location])  
  return (
    <div>
      AppPage
    </div>
  );
};

カスタムトリガー作成（クリックイベント）

トリガー作成

トリガー名は自分がわかりやすい名前にしておく
トリガーのタイプはクリックすべての要素
このトリガーの発生場所は、どこで発火させたいのかという部分のなので、各々設定
今回自分はClickした要素のIDが一致していたら発火するように設定しています。

タグを作成

設定タグにページビュー取得方法で作ったタグを選択
イベント名とタグ名は自分のわかりやすい名前にしておく
トリガーは上で作成したものを選択して紐づける

発火方法

export const Button = () => {
  return (
    <a id="more_">
        発火テスト
    </a>
  );
};

これで、ページビュー取得とクリックイベント発火できました。
今回ほぼ初めてフロントを触って、GA,GTM周りも初めて触っているので、諸々おかしい点があるかもしれませんが、参考になる方がいれば