Google Analytics 4 (GA4)のカスタムイベントを送信する

Google Analytics 4 (GA4)のカスタムイベントを送信するコードを紹介します。

概要

こちらの記事では、 Google Analytics 4 (GA4) のトラッキングコードのタグを導入する手順を紹介しました。
この記事では、gtagを利用する方法を紹介します。

書式

カスタム部分の送信は以下のコードとなります。
(イベント名)に送信したいカスタムイベントの名称を設定します。イベントの値を、キー名と値の組み合わせで複数送信できます。

  gtag('event', '(イベント名)', {
    '(キー名1)': '(値1)',
    '(キー名2)': '(値2)',
    ...
    '(キー名n)': '(値n)'
  });

実装例

コード

以下のHTMLページを作成します。

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

    gtag('config', 'G-XXXXXXXXXX');
  </script>

  <meta charset="utf-8" />
  <title></title>

  <script language="javascript" type="text/javascript">
    function OnButton1Click() {
      gtag('event', 'click_button', {
        'app_name': 'myApp',
        'button_name': 'button1'
      });

      var elem = document.getElementById("output");
      elem.innerHTML = "Button 1がクリックされました。";
    }

    function OnButton2Click() {
      gtag('event', 'click_button', {
        'app_name': 'myApp',
        'button_name': 'button2'
      });

      var elem = document.getElementById("output");
      elem.innerHTML = "Button 2がクリックされました。";
    }
  </script>

</head>
<body>
  <h1>カスタムイベントのデモ</h1>
  <p>ボタンをクリックするとカスタムイベントを送信します。</p>

  <input type="button" value="Button 1" onclick="OnButton1Click();" /><br />
  <input type="button" value="Button 2" onclick="OnButton2Click();" /><br />
  <hr/>
  <div id="output"></div>
</body>
</html>

解説

ボタンをクリックすると以下のJavaScriptの関数を実行し、カスタムイベントを送信します。

    function OnButton1Click() {
      gtag('event', 'click_button', {
        'app_name': 'myApp',
        'button_name': 'button1'
      });

      var elem = document.getElementById("output");
      elem.innerHTML = "Button 1がクリックされました。";
    }

    function OnButton2Click() {
      gtag('event', 'click_button', {
        'app_name': 'myApp',
        'button_name': 'button2'
      });

      var elem = document.getElementById("output");
      elem.innerHTML = "Button 2がクリックされました。";
    }

今回利用する以下のコードではclick_buttonイベントを発生させ、 app_nameキーにmyAppの値を、button_nameキーにbutton2の値を設定して送信します。

  gtag('event', 'click_button', {
    'app_name': 'myApp',
    'button_name': 'button2'
  });

動作確認

上記のHTMLページをWebブラウザーで表示します。下図のページが表示されます。

ページの[Button 1]をクリックします。クリックするとページ下部にボタンがクリックされた旨のメッセージが表示されます。

[Button 2]をクリックした場合は下図の表示となります。

GA4のレポート画面を確認します。
[レポート]の画面を表示します。左側のメニューの[リアルタイム]の項目をクリックします。下図のページが表示されます。
右側のエリアの[イベント数(イベント名)]の枠を確認します。イベントの一覧に先のコードで追加した、"click_button"イベントが表示されています。 "click_button"の項目をクリックします。