GA4 探索のディメンション「時間」の午前1時は「01」じゃなくて「1」だから、24時間の昇順が並べられない問題

GA4 探索のディメンション「時間」の午前1時は「01」じゃなくて「1」だから、24時間の昇順が並べられない問題についての解決策を提案します。

午前1時が「01」の2桁表示だったらいいのにな、と思っている方もいらっしゃるのではないでしょうか。

前回の記事に続いて、今回も

GTMでカスタムJavaScript変数「時間(hh)」を追加する

という方法で解決しますので、設定の手順は、こちらの記事と全く同じになります。

https://and-aaa.com/report/ga4

ということで、設定の手順は、上記の記事でご確認頂くとしまして、この記事では、カスタムJavaScriptのコードを掲載させていただきます。

実は難問

JavaScript自体は下記のように難しくないのですが、なぜ難問なのか、順を追って解説します。

実は下記のスクリプトはJavaScriptとしてはOKですが（間違った記述ではありませんが）、GA4側でデータとして格納される際に問題が発生します。

まず、カスタムJavaScriptを見てみましょう。

function getHour() {
  // 日本の日付と時刻を直接取得
  var japanTimeOptions = { timeZone: "Asia/Tokyo", hour: '2-digit', hour12: false };
  var japanDateStr = new Date().toLocaleString("ja-JP", japanTimeOptions);

  // 'hh時mm:ss' 形式から 'hh' 部分だけを取得
  var hour = japanDateStr.split("時")[0];

  // 明示的に2桁に変換
  hour = ("0" + hour).slice(-2);

  return hour;
}

この関数は、日本の現在の時間を取得し、その「時」の部分をhh形式で返します。hour: '2-digit' のオプションを使用することで、2桁の数字形式で時間を取得し、必要に応じて0で埋めることができます。

日本の toLocaleString のデフォルトの動作で、時間の後に「時」という文字が付いてきますので、「時」は付かないようにしました。

変数名は、「Get Hour of Day(hh)」、

パラメータ名とカスタムディメンションの名称は、「時間_hh」

とします。

午前8時にCromeブラウザのペイロードで確認すると、確かに、8時は「08」として取得されています。

ところが、このイベントパラメータをカスタムディメンションに登録して、「探索」で試していただくと分かるのですが、レポートを作ると、「08」ではなく「8」と表示されてしまいます。

何故、取得できたはずの「08」が「8」になるのか

その理由は、BigQueryにエクスポートしてみると、明確になります。

イベントパラメータ、「時間_hh」で取得された値は、

event_params.value.int_value

とういカラムに入っています。

上記を日本語に平たく訳すと、イベントパラメータの値のINTEGER（インテジャー）型の値を入れる箱、という意味になります。

INTEGER（インテジャー）型には整数しか入りません。

「08」

だって整数だ、と思われるかもしれませんが、

「8」

に強制的に変更されて格納されます。これと同じことが、GA4の探索でも起きており、取得時は「08」だったけど、探索で呼び出される時は整数に修正されてしまいます。

文字列として送信する

既存のカスタムJavaスクリプトで生成されるデータが数字のように見える場合、GA4はそのデータを数値として解釈しやすいです。その結果、せっかく付けた「0」が取れてしまいます。

ですので、返される値に何らかの文字を追加して、明示的に文字列として認識させるという方法が考えられます。

例えば、09を09hのようにしてみることで、この値は数字ではないとGA4に伝えることができます。

具体的には、下記のようなコードになります。

function getHour() {
  // 日本の日付と時刻を直接取得
  var japanTimeOptions = { timeZone: "Asia/Tokyo", hour: '2-digit', hour12: false };
  var japanDateStr = new Date().toLocaleString("ja-JP", japanTimeOptions);

  // 'hh時mm:ss' 形式から 'hh' 部分だけを取得
  var hour = japanDateStr.split("時")[0];

  // 明示的に2桁に変換
  hour = ("0" + hour).slice(-2);

  // "h"を追加して、明示的に文字列として認識させる
  return hour + "h";
}

このようにすることで、探索でカスタムディメンションとして使用すると、余計な文字列、hが付いてしまいますが、昇順に並べる時などに、便利になります。