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が付いてしまいますが、昇順に並べる時などに、便利になります。