SMARTCAMP Engineer Blog

スマートキャンプ株式会社(SMARTCAMP Co., Ltd.)のエンジニアブログです。業務で取り入れた新しい技術や試行錯誤を知見として共有していきます。

ユーザーの行動がまるっと見えるSaaS(LogRocket、FullStory)を紹介する

スマートキャンプエンジニアの瀧川です!

本記事はスマートキャンプ Advent Calendar 2019 - Qiita の17日目の記事です。

私は前々からログ転送基盤構築やらログ分析を生業としてきたのですが、新規プロダクトを作る際などではインフラコストもかかるし、開発者が必要とするデバッグのための情報、プロダクトオーナーが必要とする定量的な情報など多彩な要望に答えるコストも高いなと感じていました。

そこで課題を解決する方法を探す中で出会った、ユーザの行動ログを収集し、様々な機能を提供するSaaSである、LogRocketとFullStoryについて調べたことを紹介しようと思います!

※ 本記事は比較記事ではないので、LogRocketとFullStory両者でできること、どちらかでしかできないことをあまり区別せずにざっくばらんに書かせていただきます。

LogRocket, FullStoryってどんなSaaS?

f:id:tkgwy:20191217185143p:plain
※ FullStoryのリプレイ画面

海外のサイトでは以下のようにカテゴライズされていました。

Conversion Rate Optimization Software > Session Replay Software

Webアプリケーションに組み込むことで、アプリケーションのログを収集し、ユーザーのアクセスしたセッションでの操作(カーソルの動きや入力、ページ遷移)を再現(リプレイ)できるのが主な特徴となります。

それに付随して以下のような機能があるようです。

  • アプリケーションのカスタムイベント(コンバージョン)の記録
  • ブラウザのDeveloperConsole(ネットワークとコンソール)を再現
  • ユーザ識別情報の記録(id, email, name, custom…)
  • ユーザのユーザエージェントや表示サイズなどの情報を自動で記録
  • ユーザセグメントや行動でフィルタリング
  • 行動ファネル分析などのアナリティクス
  • etc...

【以下公式】

logrocket.com

www.fullstory.com

※ 私が試したのは上記2つですが、海外ではHotjarSmartlookといったサービスのシェアが多いようです。

どんな使い方がある?

カスタマーサポート・サクセスが円滑になる

Webサービスを運営していると多くのお問い合わせを受けることとなります。

その際に多くはカスタマーサポート・サクセス担当者が、内容を確認し、バグ報告などで必要であればより詳細な発生状況をヒアリングするなど各社されているかと思います。

多くのセッションリプレイSaaSで、IntercomやZendeskといったカスタマーサポートサービスとも連携することができるようになっており、「このお問い合わせが来たときのセッション」を紐付けることができます。

またBugsnagやSentryといったエラートラッキングサービスとの連携も備えており、エラーをキャッチした際にエラー内容とセッション情報にもとづいてカスタマーにメッセージを送るなど迅速なフォローもできるようになると考えています。

f:id:tkgwy:20191217191630p:plain
※ BugsnagとLogRocket連携イメージ

開発者のエラー・バグ調査が円滑になる

前述した通り、BugsnagやSentryといったエラートラッキングサービスとの連携によって、エラーが発生した際の行動を見ることができるので調査コストが下がります。

また、セッションの再現動画とともに、ブラウザのデベロッパーコンソールのような機能も利用できるようになっており、コンソールログ、ネットワーク通信も見ることができます。

本番環境ではコンソールログを出さないようにされていると思いますが、カスタムログを送れる機能もあったりするのでデバッグ情報などはそちらを利用するといいかもしれません。

UI/UX改善のための分析ができる

これらのサービスには、大量のセッション情報から、ユーザー属性や行動によってフィルタをかける機能があります。

そのフィルタをかけたセグメントに対して様々な分析を行うことで、UI/UXの改善につなげていくことができます。

フィルタに利用できる要素は、「ユーザー識別情報」「訪問ページ」「要素クリック」「カスタムイベントの発火」etc...があり、複雑なフィルタも作ることができます(以下は例)

  • 「/app/homeを訪問」かつ「button#transition-analytics-pageをクリック」かつ「RunDailyAnalyticsカスタムイベント発火」
  • 「GoogleChrome」かつ「ログイン状態」かつ「エラー発生」

用意されている分析として代表的なものに「ファネル分析」と「ヒートマップ」があります。

ファネル分析

ファネル分析とは、目的のアクションを取るまでにユーザーがどれだけ離脱したかを可視化する手法です。

これにより、「ユーザー登録プロセスの離脱率」や「意図順序でページ遷移をしているか」などをユーザーセグメントによって比較するなどして改善していくことができます。

ユーザー識別情報やカスタムイベントなど、自由度が高いため、ファネル分析はできることが多そうに感じました。

f:id:tkgwy:20191217190121p:plain
※ FullStoryのファネル分析機能

ヒートマップ

ヒートマップとはユーザーのカーソルの動きやクリック数などを、Webページの上に色の強弱で表現したものです。

Web分析では定番のヒートマップですが、セッションリプレイと組み合わせることで、「もしかすると押し間違えてるかもしれない」というヒートマップから出た仮説を、セッションリプレイをサンプリングすることで確証を得るような使い方もできるかなと感じています。

その他

個人情報など隠せる

お客様や契約によっては当然セッションを記録することが問題になる場合もあるかなと思います。

一部情報(個人情報やコンフィデンシャルな内容)をサービス側で記録しないようにできるため、状況に応じてそちらを対応し導入することも検討するとよさそうです。

(特定のclassがついているDOM要素は記録せず、マスキングするなどの機能がある)

料金

最大Session数によるプラン選択が多いですが、$100~$500/月 程度のようです。

Webサービスの定性面を評価したい場合は、少ないSession数でも価値があるのでサンプリングして導入するのもありかなと思っています。

(アナリティクス機能がメインであれば別のサービスのほうが適しているかなと感じています)

まとめ

ユーザーの行動ログを収集し、アクセスしたセッションでの操作を再現するSaaSについて紹介させていただきました。

なかなか導入事例は聞かないですが、これらサービスで提供するデータでカスタマーサポートや開発の効率が飛躍的に上がると感じています。

カスタムイベントやユーザー属性付与など拡張性もあるので、ABテストの効果測定などでも利用できるかなと思っています。

また、アナリティクスはUI/UXに基づいた分析が容易にできる印象があり、そういった改善でも効果を発揮しそうです。

このようなサービスを利用してよりよいアプリケーション、顧客体験を提供していきましょう!

(再三となりますが、今回どのサービスにどの機能があるかは明言していないので、導入検討する際は公式ドキュメントなど参考に改めて調査をお願いします)