GA4+GTMでdataLayerを用いたカスタムイベントの実装方法

# はじめに
先日、Googleアナリティクス4（GA4）タグの設定をGoogleタグマネージャー（GTM）を用いて行うタスクに取り組んだので、備忘録として記事にしたいと思います

この記事では、dataLayerを使用したGTM経由でのGA4タグの実装方法と、その関連性についてまとめています

今回はGA4やGTMの設定というよりは、ソースコード上でのdataLayer設定に焦点を当てています

# GA4、GTM、dataLayerの基礎知識
GA4、GTM、dataLayerは、ウェブ解析とタグ管理を効率的に行うためのツールです

- **Googleアナリティクス4（GA4）** 
ユーザーのページビューやクリック、スクロールなどの行動データを詳細に収集・分析できる解析ツールです
リアルタイムのデータ視覚化やカスタムレポート作成が可能です
　
- **Googleタグマネージャー（GTM）** 
ウェブサイトやアプリに設置する各種タグ（GA4、広告タグなど）を一元管理できるツールです
オンラインの管理画面上でタグの編集・管理を行えるようにしたツールになります
　
- **dataLayer** 
ウェブページ上のイベントやデータをGTMに送信するためのJavaScriptオブジェクトです
イベントやユーザーデータを管理・送信します

## 連携の全体像
GA4、GTM、dataLayerは連携して、ユーザーのアクションをトラッキングし、GA4にデータを送信します
具体的には、
①ユーザーの操作がdataLayerへデータプッシュされ
②GTMがそのデータを検知して
③GA4に送信します


### ①dataLayerへデータプッシュ
ウェブページ上でユーザーが特定のアクション（ボタンのクリック、フォームの送信など）を行うと、JavaScriptを通じてdataLayerにイベントデータがプッシュされます

```javascript
dataLayer.push({
  'event': 'button_click',
  'button_id': 'signup-button'
});
```

### ②GTMによるデータの受信とタグの発火
GTMはdataLayerを監視しており、特定のイベント（この場合は`button_click`）がプッシュされると、事前に設定されたトリガーに基づいて対応するタグ（GA4イベントタグ）を発火させます

### ③GA4へのデータ送信
発火したGA4イベントタグは、dataLayerから取得したイベントデータをGA4に送信し、分析データとして蓄積されます
これによって、ユーザーの行動やサイトのパフォーマンスを詳細に分析することが可能になります

# dataLayerを使ったイベントトラッキングの種類
dataLayerへのデータプッシュによって、どのようなイベントトラッキングができるかを少し詳しく見ていきます

### dataLayerにイベントをプッシュする基本構文
dataLayer.pushメソッドを使用して、イベントやデータをdataLayerに送信します
基本的な構文は以下の通りです

```javascript
dataLayer.push({
  'event': 'イベント名',
  'キー': '値'
});
```

### 初期データのプッシュ方法
ページロード時に初期データをdataLayerにプッシュすることで、基本的なページ情報やユーザー属性をトラッキングできます

```react
import React, { useEffect } from 'react';

const App = () => {
  useEffect(() => {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'event': 'page_load',
      'pageCategory': 'ホーム',
      'visitorType': '新規'
    });
  }, []);

  return (
    <div>
      <h1>ホームページ</h1>
      {/* 他のコンポーネントや要素 */}
    </div>
  );
};

export default App;

```
`useEffect`を使用して、コンポーネントのマウント時にデータをプッシュする例です
ここでは、dataLayerが存在しない場合に初期化し、ページロード時のイベントと関連データをプッシュしています

### ページビューイベントのプッシュ方法
特定のページビューをトラッキングするために、dataLayerにページビューイベントをプッシュします
これにより、GA4で詳細なページ分析が可能になります

```react
import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

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

  useEffect(() => {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'event': 'page_view',
      'pagePath': location.pathname,
      'pageTitle': document.title
    });
  }, [location]);

  return null;
};

export default PageViewTracker;

```
このコンポーネントでは、ルートが変更されるたびに`page_view`イベントをdataLayerにプッシュしています

### カスタムイベントのプッシュ方法
特定のユーザーアクション（ボタンのクリック、フォームの送信など）をトラッキングするために、カスタムイベントをdataLayerにプッシュします

```react
import React from 'react';

const DownloadButton = () => {
  const handleDownloadClick = () => {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'event': 'download_click',
      'fileName': 'report.pdf'
    });
    // ダウンロード処理など
  };

  return (
    <button id="download-button" onClick={handleDownloadClick}>
      ダウンロード
    </button>
  );
};

export default DownloadButton;
```
イベントハンドラー内でdataLayerにプッシュしています
ボタンがクリックされた際に`download_click`イベントとファイル名をdataLayerにプッシュしています

### トラッキングデータのカスタマイズ例
カスタムイベントでは、ユーザーの行動に関する詳細なデータを追加で送信できます
例えば、購入完了イベントをトラッキングする場合、以下のように複数のデータポイントを含めることができます

```react
import React from 'react';

const PurchaseButton = () => {
  const handlePurchase = () => {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'event': 'purchase',
      'transaction_id': '12345',
      'value': 99.99,
      'currency': 'USD',
      'items': [
        {
          'itemName': 'Tシャツ',
          'itemCategory': '衣料',
          'itemPrice': 29.99,
          'itemQuantity': 2
        },
        {
          'itemName': '帽子',
          'itemCategory': 'アクセサリー',
          'itemPrice': 39.99,
          'itemQuantity': 1
        }
      ]
    });
    // 購入処理など
  };

  return (
    <button onClick={handlePurchase}>
      購入完了
    </button>
  );
};

export default PurchaseButton;

```
このコンポーネントでは、購入ボタンがクリックされた際に`purchase`イベントをdataLayerにプッシュし、取引ID、合計金額、通貨、購入アイテムの詳細を含めています

# 参考文献

https://support.google.com/analytics/answer/10089681?hl=ja

https://giginc.co.jp/blog/giglab/ga4-gtm

https://note.com/japan_d2/n/n20f0fe4d8659