0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

はじめに

先日、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にイベントデータがプッシュされます

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に送信します
基本的な構文は以下の通りです

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

初期データのプッシュ方法

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

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で詳細なページ分析が可能になります

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にプッシュします

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にプッシュしています

トラッキングデータのカスタマイズ例

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

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、合計金額、通貨、購入アイテムの詳細を含めています

参考文献

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?