Google アナリティクス 4（GA4）パラメータをJSON配列形式にして飛ばす方法

こんにちは、私はREADYFORでプロダクトマネージャー（PdM）をしているまっきーです！

この記事は「READYFOR Advent Calendar 2022」の2日目の記事です

qiita.com

昨日（1日目）の記事は、ミノ駆動さんのこちら

qiita.com

明日（3日目）の記事はksssさんのこちら

qiita.com

概要

Google アナリティクス 4（GA4）のパラメータの値が以下のように表示されてしまう問題を解消します

解決したい課題

GA4はイベント・パラメータを個別に設定する必要があるのですが、大量の入力フォームの入力完了イベントをまとめて飛ばそうとすると、 パラメータの数がどんどん増えてしまいます。

その数を減らすために、あるイベントでは以下のようにパラメータを飛ばしていました。

{
    "input_fields": [
        { "field_name": "card_number", "is_filled": true },
        { "field_name": "expiration_month", "is_filled": true  },
        { "field_name": "expiration_year", "is_filled": true },
        { "field_name": "cvv", "is_filled": false }
    ]
}

Google Tag Manager（GTM）でタグの発火を確認したときは、うまく飛んでいました！

しかし、GA4にはうまく飛んでいなかったのです

{
    "key": "input_fields",
    "value": {
      "string_value": "[object Object],[object Object],[object Object],[object Object]",
      "int_value": null,
      "float_value": null,
      "double_value": null
}

課題の原因

パラメータの値はJSON配列形式でDataLayer→GTMにデータ送信しています。

それをさらにGTMからGA4に送信される際、JSON配列形式が認識されていないのが原因と考えられます

課題を解決する技術、手法

このような場合はJSON配列をそのままでなく、JSON.stringify() などで囲って、文字列の型（String型やChar型など）にしてDataLayerに送ることで、GA4でもうまく表示されるはずです。

（弊社でも修正予定ですが、まだ対応できておらず、これから解消予定となっています）

（2023年5月18日追記） 実際に以下のように修正しました

修正前

input_fields: Object.entries(inputFields).map(([key, value]) => ({
  field_name: snakeCase(key),
  is_filled: value,
})),

修正後

input_fields: JSON.stringify(
  Object.entries(inputFields).map(([key, value]) => ({
    field_name: snakeCase(key),
    is_filled: value,
  }))
),

課題がどう解決されるか

今後解消した際に、この記事も更新していく予定です

（2023年5月18日追記）

上記の方法で文字列をGA4に認識させることができました！

しかし、パラメータの文字数が100文字までという制限があり、結局この後データの構造は変更しました..！

留意点、デメリット

GA4やBigQueryで分析する際は、テキスト形式にしたデータを再度JSON配列形式に変換する必要があるので、 分析の手間は少し増えます。

本記事はコードを書けないプロダクトマネージャーが書いているため、内容に誤りがある可能性があります。

不備がありましたら、ご指摘いただけると幸いです。

なお、本記事執筆にあたってksssさんにご協力いただきました！ ありがとうございます！