JavaScript 直書きでGA4にカスタムイベントを発行する方法

留意点

• 本記事の情報は 2022 年 5 月 23 日時点の情報を元に記載しています
• Web での GA4 利用を前提に記載しています

背景

GTM を用いた GA4 のイベントハンドリングの方法は数多くネットに落ちていますが、何らかの事情によって GTM を使用できない場合は（ビジネス上の制約であることが多いように感じます）、どのようにイベントハンドリングするかという観点では情報が少ない印象だったので、JavaScript で直接任意のイベント情報を GA4 に送る方法について、簡単ではありますが情報を載せておこうと思います。

カスタムイベントのリファレンス情報

GA4 のカスタムイベントリファレンスはこちらになります。

UA では「イベント カテゴリ」、「イベント アクション」、「イベントラベル」、「イベント値」の各フィールドがありましたが、GA4 では「イベント名」と「パラメータ」で構成されます。パラメータには send_to プロパティを含めることで、特定の GA4 プロパティのみにイベントを送信することが出来ます。

gtag('event', event_name, {
  parameter_1: parameter_1_value,
  parameter_2: parameter_2_value,
  parameter_3: parameter_3_value,
  // ...
  send_to: ga4_property_id,
})

サンプルコード

或る入力欄を有するスマートフォンサイトの入力欄のタップ回数を、各欄それぞれの id 名によって個別に計測したい。そしてそのイベントを特定の GA4 プロパティ G-xxxxxxxxx のみに送信したい場合は下記のようになります。（jQuery で書いてしまいました）

<input type="text" id="name1" name="name1" placeholder="山田" />
<input type="text" id="name2" name="name2" placeholder="太郎" />
<!-- ・・・ -->

$('input').on('touchstart', (e) => {
  gtag('event', `touch_${e.target.id}`, { send_to: 'G-xxxxxxxxx' })
})

TypeScript を使っている場合は

gtag() メソッドの型定義をする必要がありますが、@types/gtag.js が公開されているのでインストールしましょう。

npm を使っている場合は下記などになります。

npm install -D @types/gtag.js