RevComm Tech Blog

コミュニケーションを再発明し 人が人を想う社会を創る

フロントエンドエンジニアの知見を活かした Google Analytics 活用方法

Google Analytics フロントエンド

はじめまして。
RevComm でフロントエンドエンジニアをしている大石と申します。

私の所属しているチームでは、Lean スタートアップの考えを基にプロダクト開発に取り組んでおり、エンジニアが機能を実装してリリースして終わりではなく、そのリリースした機能の利用実態を定量データとして収集し、プロダクト成長の方針などの検討に活かしています。
その定量データを収集する方法として Google Analytics を利用しており、今回の記事では Google Analytics で詳細なデータを収集するための実装方法を紹介します。

ユーザープロパティを設定してユーザーをセグメントで分ける

Google Analytics では、ユーザープロパティを使用してユーザーに関する任意の情報を付与することができます。
これによりユーザーを任意条件のセグメントとして分けることができ、特定のイベントのユーザーごとの実行割合をセグメント単位で算出したり、リリースした機能を使ってくれているかどうかを分析したりできます。

ユーザープロパティの設定

Google Analyticsの管理画面でユーザープロパティを設定します。
例えば、ユーザーのステータスやWebサービスにおける権限情報などを追加します。
公式ドキュメントにはいくつか方法がありますが、ここでは Google タグでの方法を紹介します。

  1. ユーザープロパティの送信
    • ユーザーがサイトにアクセスした際にユーザープロパティをGoogle Analyticsに送信します。
    • 例: gtag('set', 'user_properties', {'user_id': 'USER_ID', 'role': 'admin'});
  2. ユーザースコープのカスタムディメンションを作成
    • Google Analyticsの管理画面でユーザースコープのカスタムディメンションを作成します。
    • カスタムディメンションの範囲を「ユーザー」に設定し、先ほど送信したユーザープロパティに対応するディメンションを作成します。
    • 例: user_id や role などのカスタムディメンションを作成します。

ユーザープロパティの活用例

既存UIに対する大規模な変更を加える場合、いきなり新UIを適用するのではなく新旧両方のUIを切り替えられるようにして提供することでユーザーの混乱を抑えることができます。
この場合に、新UIがどれだけユーザーに受け入れられているのかをGoogle Analyticsのユーザープロパティを利用して調査することができます。

例として、サービス全体のリデザインに伴う新UIを提供する場合に切り替えボタンを用意しておき、そのボタンをクリックしたら新旧UIを切り替えられるような機能を想定します。 その際にブラウザリロードしても新旧どちらを選択しているのかを保持しておきたいため、ローカルストレージなどに {is_new_ui: true || false} のような形で保存しておきます。
前述したユーザープロパティとしてこのローカルストレージの値を送ることで、どれくらいのユーザーが新UIを使っているのかをGoogle Analytics上で調査することができ、これにより新UIが受け入れられているのかどうかが判断できます。
一例ではありますが、こういった活用を通じてユーザーの行動やニーズをより深く理解し、プロダクトの改善戦略の最適化に役立てることができます。

カスタムプロパティを追加しイベント実行時の詳細なデータを送る

Google Analytics ではイベントをトラッキングする際にカスタムプロパティを追加することができます。
これにより、特定のイベントに関連する詳細な情報を収集することが可能です。
公式ドキュメント

カスタムプロパティを使ってイベントの詳細を確認する方法

  1. カスタムイベントの設定
    • フロントエンドのコードで、イベントが発生した際にカスタムプロパティを含むイベントをGoogle Analyticsに送信します。
    • 例: gtag('event', 'action_name', {'custom_property': 'xxx'});
  2. イベントスコープのカスタムディメンションを作成

カスタムプロパティの活用例

大量のデータを分析するための機能としてダッシュボードがあります。
一般的にダッシュボードにはデータを絞り込むためのフォームが用意されていますが、そのフォームをサブミットした際に「サブミットした」ことだけをイベントとして収集していても絞り込み機能が使われたことしかわかりません。
ユーザーがダッシュボードで何を見ているのかを知るためには、どういう条件で絞り込みをしているのかの詳細情報まで知る必要があり、その詳細情報はカスタムプロパティとして収集することができます。

例えば、複数の選択肢から期間を選択するセレクトボックスがあり、その選択肢は以下のように定義されているとします。

const periods = [
    {
        value: 1,
        label: '今日',
    },
    {
        value: 2,
        label: '先週',
    },
    {
        value: 3,
        label: '先月',
    },
    {
        value: 4,
        label: '過去30日',
    },
]

フォームがサブミットされた時点でユーザーがどの期間を選択していたのかを把握するために、以下のような形で選択された期間の値をカスタムプロパティとして収集することができます。

gtag('event', 'form_submit', {'selected_period': `${periods[].value}`});

これにより、ユーザーはどの期間のデータをよく見ているのかを分析することができます。
また、ユーザーで絞り込んでデータを見ることができる場合に、「自分自身」を絞り込み条件に含めているかどうかを収集するような使い方もできます。

const own = {
    id: 1,
    label: '山田 太郎',
}
const users = [
    {
        id: 1,
        label: '山田 太郎',
    },
    {
        id: 2,
        label: '鈴木 一郎',
    },
    {
        id: 3,
        label: '佐藤 花子',
    },
]
const selectedUsers: typeof users = []

ユーザーの絞り込みにユニークなid情報を利用している場合、そのユーザー自身のidが絞り込み条件の中に含まれているかどうかを判定し、以下のような形でカスタムプロパティを送ることで、ユーザーが自分自身のデータを見る目的でダッシュボードを利用しているのかどうか、という分析をすることができます。

gtag('event', 'form_submit', {'is_selected_own': selectedUsers.some(u => u.id === own.id)});

エンジニアならではの提案でプロダクトを改善していきましょう

ユーザーにとって価値あるプロダクトを作るためにはユーザーのことをより深く知る必要があり、そのための方法は実際のコードレベルで実装ができるエンジニアだからこそ提案できることがあります。
この記事で紹介した Google Analytics の活用方法が、実際のプロダクト改善のための分析のお役に立てれば幸いです。