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

# プロローグ

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

# 前提条件

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

# 大きな流れ

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/0918d4f3-2d53-af20-5f5f-2bd3d44def41.png)

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

```js: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` で「年」の変数を設定します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/20e1bda6-4f64-6151-0ef1-a1ff3518fcc4.png)

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

```js:GTM > 変数 > カスタム JavaScript
/** 年　*/
function(){
  return {{getDate}}.year;
}
```
- （補足）コード中の `{{getDate}}` は、（Step１-１）で設定した変数のことです。GTMでは `{{波括弧・二重の中かっこ}}` で、設定した変数を呼び出すことができます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/53e02a1f-ec66-2f31-4211-bcdd3dd5bc16.png)

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

```js:GTM > 変数 > カスタム JavaScript
/** 月　*/
function(){
  return {{getDate}}.month;
}

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

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/20e4cdbd-2ec7-dc68-e006-25a8a45cb0b5.png)



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


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/ea79c8d1-57a3-cb88-7343-cbe195b3d8cf.png)


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

```
// 構成パラメータ
event_firing_timestamp_full_gtm

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

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

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

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


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


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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/90e14159-4515-4878-b1e4-02aba7064693.png)


- （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] 基数](https://support.google.com/analytics/answer/12226705?hl=ja) より

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

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

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

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

## 「曜日」で集計する方法

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/ea551d3c-cfb4-18f4-aacc-da494c40a6c0.png)



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

```js: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でカスタムディメンション）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/bb932b63-c85e-e1a8-c615-0af6ce1ee96f.png)


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

```js: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
```

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


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/090f78d9-70de-159d-c716-6cc86d645294.png)

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

https://chrome.google.com/webstore/detail/debugger-for-google-analy/nomnoimacbncclfbnfaingniikblfbji?hl=ja

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/4b9ba89f-5f8e-7008-1a87-37300668699a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/5df5dc45-80d1-2459-f16a-16e9afa38068.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/838b6126-d95f-ed91-3a1c-e18bbd9422fe.png)




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