簡単？GA4｜GTMでイベントのパラメータにタイムスタンプを入れる方法

プロローグ

• GA4の各イベントは発生した日時情報（タイムスタンプ）を持っています
• GA4のレポートでもディメンションを「日時」や「時間」にして表示することもできます
• しかし、例えば「曜日」や「時間帯」で表示させたいこともあるかもしれません
• そんな時に、本稿の内容がお役に立つかもしれません

前提条件

• GA4のプロパティをGTMを使ってサイト（ページ）に設置済みであること （GA4タグをサイトへ直接設置している場合、GTMを使っていない場合などは本稿の対象外です）
• 本稿では、全てのイベントにタイムスタンプを付与する方法を記載します

大きな流れ

• Step１） GTMで『変数』を設定する
• Step２） GTMで『タグ』を設定する
• Step３） GA4で『カスタム定義』を設定する

Step１） GTMで『変数』を設定する

Step１-１） 日時取得の変数を設定する

• GTMの 変数 > ユーザー定義変数 > 新規 > カスタム JavaScript で日時を取得する変数を設定します

• （A-1）GTMの管理画面の左側にある『変数』をクリック
• （A-2）「ユーザー定義変数」の枠の右上にある『新規』をクリック
• （A-3）「無題の変数」となっているところに getDate と入力する
• （A-4）「変数タイプを選択して〜」の部分をクリック
• （A-5）リスト中から『カスタム JavaScript』をクリック
• （A-6）下記のコードをコピペする

GTM > 変数 > カスタム JavaScript

function(){
    var leadingZeros = function(v){return v<10 ? '0'+v : v}; // 数字が10未満なら先頭に0を付与（例） 5 → 05
    var date = new Date();
    var object = new Object();
    object.year = date.getFullYear();
    object.month = leadingZeros(date.getMonth()+1);
    object.date = leadingZeros(date.getDate());
    object.hour = leadingZeros(date.getHours());
    object.minutes = leadingZeros(date.getMinutes());
    object.second = leadingZeros(date.getSeconds());
    object.week = [ "日", "月", "火", "水", "木", "金", "土" ][date.getDay()];
    return object;
}

Step１-2） 「年」「月」「日」「時」「分」「秒」の変数を設定する

• ※ここでは「年」の設定方法を記載しますが、「月」「日」「時」「分」「秒」も同様の設定方法です
• GTMの 変数 > ユーザー定義変数 > 新規 > カスタム JavaScript で「年」の変数を設定します

• （B-1）「変数のタイプ」の設定までは上記の（A-1）〜（A-5）と同様に進める
• （B-2）「無題の変数」となっているところに 年 と入力する
• （B-3）　下記のコードをコピペする

GTM > 変数 > カスタム JavaScript

/** 年　*/
function(){
  return {{getDate}}.year;
}

• （補足）コード中の {{getDate}} は、（Step１-１）で設定した変数のことです。GTMでは {{波括弧・二重の中かっこ}} で、設定した変数を呼び出すことができます

• （B-4）　「月」「日」「時」「分」「秒」も同様の手順で設定する

GTM > 変数 > カスタム JavaScript

/** 月　*/
function(){
  return {{getDate}}.month;
}

/** 日　*/
function(){
  return {{getDate}}.date;
}

/** 時　*/
function(){
  return {{getDate}}.hour;
}

/** 分　*/
function(){
  return {{getDate}}.minutes;
}

/** 秒　*/
function(){
  return {{getDate}}.second;
}

『変数』の設定は以上です

Step２） GTMで『タグ』を設定する

• 本稿では、全てのイベントにタイムスタンプを付与する方法を記載しています（任意のイベントに付与したい場合は、任意のイベントパラメータに設定してください）
• GTMの タグ をクリックし、設定済みであろうGA4のGoogleタグを開いてください

• （C-1）GTMの管理画面の左側にある『タグ』をクリック
• （C-2）設定済みであろうGA4のGoogleタグを開く
• （C-3）「設定」を開く
• （C-4）「パラメータを追加」をクリック
• （C-５）下記の通りに「構成パラメータ」と「値」を入力する

// 構成パラメータ
event_firing_timestamp_full_gtm

// 値
{{年}}-{{月}}-{{日}} {{時}}:{{分}}:{{秒}}

• （補足）GA4タグ（Googleタグ）の構成パラメータへ設定したパラメータは、GA4へ送る全てのイベントに反映されます

なぜ「年」「月」「日」「時」「分」「秒」を変数として分けたのか？

• 「タイムスタンプをパラメータにセットする」という目的だけなら、変数は１つ（「カスタム JavaScript」が１つ）で実現可能です。しかし、本稿ではあえて「年」〜「秒」の変数と分けました
• その理由は...「JavaScriptを知らないユーザーでも、タグの設定を簡単に行えるようにするため」です
• 例えば、JavaScriptを知らないクライアントの運営担当者が、タイムスタンプの表記を「年と月だけ」にするかもしれません。海外のように「日→月→年」の並びに変更するかもしれません
• 「年」〜「秒」を変数で分けておけば、運営担当者は「タグ」の部分だけの編集で済みますし、変更も簡単にできるよなぁ、なんて事を考えながら、あえて分けてみました

GTMでの設定作業は以上です。プレビューで発火を確認し、GTMの「公開」を行ってください。

Step３） GA4で『カスタム定義』を設定する

• GTMで追加したイベントパラメータを、GA4のディメンションと紐付ける工程です
• この工程を忘れると、GA4がディメンションとしてレポート処理をしてくれません。必ずしましょう！

• （D-１）GA4の管理画面の左下にある『管理』をクリック
• （D-２）「カスタム定義」をクリック
• （D-３）「カスタムディメンションを作成」をクリック
• （D-４）ディメンション名を入力（例） タイムスタンプ_フル_GTM
• （D-５）説明を入力（例） イベント発火時のタイムスタンプ。GTMで設定 ※この項目は未入力でもOK
• （D-６）イベント パラメータを入力 event_firing_timestamp_full_gtm ※この項目はGTMのイベントパラメータ名と一致させる必要があります
• （D-７）「保存」をクリック

以上で、タイムスタンプの設定は完了です。
24時間以上経過後に、例えばイベント「page_view」のディメンション「タイムスタンプ_フル_GTM」に日時が入っているかを確認しましょう。

高基数ディメンションに注意しましょう！

• 高基数ディメンションとは...

高基数ディメンションとは、1 日あたりの固有の値の数が 500 を超えるディメンションです。高基数ディメンションではレポートの行数が多くなるため、行数の上限に達する可能性が高くなります。上限を超えたデータはすべて「（other）」行に集約されます。
[GA4] 基数 より

• 本稿では「全てのイベントにタイムスタンプを付与する」という条件で記載しています
• タイムスタンプは「秒単位」で取得しています
• もしアクセス数が多ければ、タイムスタンプが高基数ディメンションになり、上限を超えたものが「（other）」となるかもしれません
• 高基数ディメンションにならない様にするには、どうしたらいいのか...？
• 例えば、計測する単位を「時間単位」にするとかです（「分」とか「秒」とか要りますか？）
• あとは...

「曜日」とか「時間帯」の計測ではダメですか？

• 何を計測したいかにもよりますが、「曜日」とか「時間帯」とか、制限のある枠で集計するのはいかがでしょうか？

「曜日」で集計する方法

• お気づきかもしれませんが、既にGTMへ設定した変数 {{getDate}} には曜日を取得する部分が入っています
• (E-１)GTMの変数 > 新規
• (E-２)変数名を「曜日」と入力
• (E-３)下記のコードをコピペ

GTM > 変数 > カスタム JavaScript

/** 曜日　*/
function(){
  return {{getDate}}.week;
}

• (E-４)GTMのタグ > GA4のGoogleタグを開く
• (E-５)下記の通りに「構成パラメータ」と「値」を追加入力する

// 構成パラメータ
event_firing_timestamp_week_gtm

// 値
{{曜日}}

• ココからはGA4側の設定です
• (E-６)GA4 > 管理 > カスタム定義 > 「カスタムディメンションを作成」をクリック
• (E-７)下記の通り「ディメンション名」「説明」「イベント パラメータ」を入力

// ディメンション名
タイムスタンプ_曜日_GTM

// 説明
イベント発火時のタイムスタンプ（曜日）。GTMで設定

// イベント パラメータ
event_firing_timestamp_week_gtm

「曜日」の設定は以上です

「時間帯」で集計する方法

• 基本的な流れは、今までと同様です（GTMで変数 → GTMでタグ → GA4でカスタムディメンション）

• (F-１)GTMの変数 > 新規
• (F-２)変数名を「時間帯」と入力
• (F-３)下記のコードをコピペ

GTM > 変数 > カスタム JavaScript

/** 時間帯　*/
function(){
  var hour = {{getDate}}.hour;
  var timezoon = "";
  switch (true) {
    case 7 <= hour && hour < 11:
      timezoon = "朝";
      break;
    case 11 <= hour && hour < 15:
      timezoon = "昼";
      break;
    case 15 <= hour && hour < 19:
      timezoon = "夕";
      break;
    case 19 <= hour && hour < 23:
      timezoon = "夜";
      break;
    default:
      timezoon = "深夜";
  }
  return timezoon;
}

• （補足）上記のコードでは、7〜10時を「朝」、11〜15時を「昼」...の様に設定しています。時間帯はお好きなように...

• (F-４)GTMのタグ > GA4のGoogleタグを開く

• (F-５)下記の通りに「構成パラメータ」と「値」を追加入力する

// 構成パラメータ
event_firing_timestamp_timezoon_gtm

// 値
{{時間帯}}

• ココからはGA4側の設定です
• (F-６)GA4 > 管理 > カスタム定義 > 「カスタムディメンションを作成」をクリック
• (F-７)下記の通り「ディメンション名」「説明」「イベント パラメータ」を入力

// ディメンション名
タイムスタンプ_時間帯_GTM

// 説明
イベント発火時のタイムスタンプ（時間帯）。GTMで設定

// イベント パラメータ
event_firing_timestamp_timezoon_gtm

「時間帯」の設定は以上です

ちゃんと発火しているか確認してみる

• 意図した通りに、ちゃんと発火してる
• 上記のスクショはchromeの拡張機能「Debugger for Google Analytics 4 (GA4)」を使ったものです
• めちゃくちゃ便利な推し拡張機能です。GA4を触る方は入れるべきかと...

• chromeの拡張機能「Debugger for Google Analytics 4 (GA4)」を使ってブラウザで発火確認！
• GTMのプレビューで発火確認！
• GA4のDebugViewで確認！
• GA4のリアルタイムレポートでも確認！
• 24時間経過後に、GA4のレポートで確認！
• お金が絡む案件は、特に念入りに確認しましょう！