1
/
5

【TECH BLOG】ZOZOFITアプリにおけるGoogle Analytics 4導入の取り組み

はじめに

こんにちは。計測プラットフォーム開発本部 計測プロデュース部の井上です。

私たちはZOZOFITZOZOMATZOZOMAT for HandsZOZOGLASSなどの計測技術に関わるプロダクトのサービス開発をしています。先日ローンチしたZOZOFITではGoogle Analytics 4(以下、GA4)を導入しました。本記事ではGA4を導入する際に工夫した点と注意点について紹介します。

目次

  • はじめに
  • 目次
  • 計測プラットフォーム開発本部 計測プロデュース部とは
  • 計測プロダクトとデータ分析
  • ZOZOFITとは
  • GA4の導入
    • 自動計測screen_viewイベントの無効化
    • 手動計測screen_viewイベントの実装
    • GA4のDebugView設定
  • GA4とBigQueryの連携
  • Looker Studio
    • Looker Studioのフィルタ機能
    • Looker Studioの関数
    • Looker Studioの正規表現
  • まとめ
  • おわりに

計測プラットフォーム開発本部 計測プロデュース部とは

計測プラットフォーム開発本部は、計測技術の活用を通して、「世界中に計測技術を通じて、新しい価値をプラスする」ことをミッションとしています。その中で計測プロデュース部は、計測サービスを企画、開発するチームです。

計測プロダクトとデータ分析

私たちが提供している計測プロダクトではGoogle Analytics(以下、GA)を活用してUI/UX向上に役立てています。例えば、GAから取得する指標に離脱数があります。計測フローの中でユーザーの離脱数が多い箇所に関して、チュートリアル動画の内容の見直すなどサービスをより使いやすくする施策を日々行っています。その他にも地域、年齢、性別、端末の種類など様々な角度から取得したデータを切り取ることで属性の違いによる傾向を分析し、サービスの強みと弱みを見出す努力をしています。

これらの分析の積み重ねが最終的にサービス全体の今後の方向性や優先順位を決める意思決定につながっています。また、データの全社的な使用性と加工性を考えて、GAで取得したデータは会社アカウントのBigQueryに連携しています。その結果、他部署のスタッフであってもデータにアクセスできる上、好きなツールでシームレスに連携が可能なので、部を跨いだ活用がなされています。最終的に収集したデータはLooker Studio(旧GoogleDataStudio)を用いて可視化し、データから得られた気付きを分かりやすい形でチームに共有しています。

ZOZOFITとは

ZOZOFITは2022年に発表した体型管理を目的としたフィットネスアプリです。現在は北米のみのローンチ展開となっています。

これまで計測プロダクトではUniversal Analytics(以下、UA)を用いて計測していましたが、Google社から2023年7月にUAクローズのアナウンスがされていることから、GA4でZOZOFITを設計する必要がありました。

GA4はGoogle社が提供するアクセス解析ツールで第4世代のものになります。特徴としてはウェブとアプリを統合したイベントを計測単位とし、プライバシーに配慮した分析(Cookieレス)ができます。以下では私たちがGA4を導入する際に工夫した点と注意点について紹介します。GA4は公式ドキュメントを参考に導入しました。

GA4の導入

ここからはGA4の導入に際して、躓いた点や最初から知っていれば作業が捗った点などを紹介します。

自動計測screen_viewイベントの無効化

GA4では初めから自動収集イベントが設定されています。自動収集イベントのscreen_viewイベントはデフォルトでパラメータ値(スクリーン名)が送られないため、後で分析する際にスクリーンを特定することが難しくなってしまいます。そのため、screen_viewイベントの自動計測を無効化し、任意のスクリーン名が送られるように各スクリーンにコードを実装しました。以下は自動計測screen_viewイベントの無効化の設定方法になります。

iOSの場合は、Info.plistFirebaseAutomaticScreenReportingEnabledfalseに設定します。

  <key>FirebaseAutomaticScreenReportingEnabled</key>
  <false/>

Androidの場合は、AndroidManifest.xmlでタグ内のFirebaseAutomaticScreenReportingEnabledfalseにします。

  <meta-data
  android:name="google_analytics_automatic_screen_reporting_enabled"
  android:value="false" />

手動計測screen_viewイベントの実装

UAではページビュー、イベント(ユーザーのアクション)という概念が存在しましたが、GA4からは全てイベントを指標とする計測に変わりました。そのためUA時代のスクリーンビューはスクリーンビューイベント、イベントはアクションイベントとして設計する対応としました。例えばZOZOFITの計測結果では、計測結果の画面が表示された時はページビューイベント、ユーザーによるトレンドチャートのタッチ時はアクションイベントが発火されるよう実装しました。


ZOZOFITの肩の計測結果の画面。画面下のトレンドチャートをタッチするとアクションイベントが発火される。


以下はコードの実装例となります。

  • iOS(Swift)
    • ページビューイベント
  Analytics.logEvent("ScreenView", parameters: [
  AnalyticsParameterScreenName: "ShoulderScreen",
  "ScreenCategory": "Results"])
  • アクションイベント
  Analytics.logEvent("Action", parameters: [
  "ActionName": "ShoulderTrendChartTouchAction"])
  • Android(Kotlin)
    • ページビューイベント
  firebaseAnalytics.logEvent("ScreenView") {
  param(FirebaseAnalytics.Param.SCREEN_NAME, "ShoulderScreen")
  param("ScreenCategory", "Results")}
  • アクションイベント
  firebaseAnalytics.logEvent("Action") {
  param("ActionName", "ShoulderTrendChartTouchAction")}

これらをiOSの場合はonAppear(SwiftUI)もしくはviewDidAppear(UIKit)メソッド、Androidの場合はonResumeメソッドで呼び出せばイベントが発火されます。また、パラメータはGA4のデフォルトパラメータとScreenCategoryのようなカスタムパラメータを設定できます。


GA4のDebugView設定

DebugViewはGA4から新しく追加された機能で、端末を絞ってリアルタイムにトラッキング情報を確認できます。私たちは設定した内容が正しくトラッキングできるかテストするためにDebugViewを使っています。

これまでUAではリアルタイムレポートの項目からページやイベントの確認はできましたが、端末(ユーザー)を絞って確認することができませんでした。そのため、テストの際は確認用の環境を作って、確認中はなるべくテスターだけがアクセスするなどの配慮が必要でした。

また、GA4にはリアルタイムレポートの機能が引き続き存在し、その中にユーザースナップショットというDebugViewと似た機能があります。 ユーザースナップショットは候補となるユーザーがランダムに選ばれる仕様で確認したい端末を選択できない場合がありました。

以上の2つの理由からトラッキング確認にはDebugViewを採用しました。

以下はDebugViewの設定方法になります。iOSの場合は、以下のコードでデバッグモードを有効にしてDebugViewを見れるようにします。

 var args = ProcessInfo.processInfo.arguments
 args.append("-FIRDebugEnabled")
 ProcessInfo.processInfo.setValue(args, forKey: "arguments")

Androidの場合は、以下の設定をします。

  1. Android検証端末の開発者向けオプションとUSBデバッグを有効化します。
  2. Android検証端末を繋ぐPCでAndroid Debug Bridge(以下、adb)コマンドのパスを通します。
  3. Android検証端末とPCを接続し、PCで以下のコマンドを実行します。
 $ adb shell setprop debug.firebase.analytics.app PACKAGE_NAME

設定ができたら、GA4プロパティからDebugViewを確認します。

続きはこちら

株式会社ZOZO's job postings
1 Likes
1 Likes

Weekly ranking

Show other rankings
Invitation from 株式会社ZOZO
If this story triggered your interest, have a chat with the team?