セッションリプレイやA/Bテストを簡単に導入できオープンソースでセルフホストも可能な「PostHog」を使ってみた

リンクの色や余白の大きさがわずかに異なるだけでウェブサイトの滞在時間やコンバージョン数が変化することがありますが、そうした要素の最適化に役立つのが2つのページをランダムに表示して変化を計測する「A/Bテスト」です。PostHogは簡単にA/Bテストが導入できるだけでなく、ユーザーがどのようにページを閲覧しているのかというセッションリプレイ機能についてもあっという間に使用可能になるアクセス解析サービスな上、オープンソースでセルフホストも可能とのことなので、実際に使って試してみました。

PostHog - The open source Product OS
https://posthog.com/

PostHogのトップページにアクセスし、「Get started - free」をクリックします。

アカウント登録を求められます。今回はGoogleアカウントを利用して登録するので「Google」をクリック。

ログインに利用するアカウントを選択します。

「組織」の作成を求められるので、組織名を記入して「Create organization」をクリック。

これで登録が完了しました。自分でコードを追加するか、チームメンバーを招待するかという選択肢が出ます。今回は自分でコードを追加する方を選択しました。

イベントをどこから集計するかを選択します。今回は「web」を選択。

コードが表示されるので、コピーしてウェブサイトの「head」タグ内に配置します。

スクロールして「Continue」をクリック。

イベントを待ち受ける状態になるので、コードを設置したページを開きます。

コードが正常に動いていればページを開いたときにイベントが送信され、下図の通り送信成功画面に切り替わります。「Continue」をクリック。

セッションの録画やユーザーの操作のキャプチャについての設定画面が表示されます。初期状態でオンになっているので、今回は特に設定を変更せず「Continue」をクリック。

有料プランにアップグレードするとどんな機能が利用できるのかという案内画面になりました。

最下部までスクロールし、「Skip for now」をクリックします。

プロジェクトの「Event Explorer」のページに切り替わります。このページではページビューやクリックなどのイベント情報を一覧できる模様。

「Dashboards」から「My App Dashboard」をクリックしてみます。

デイリーアクティブユーザー数やウィークリーアクティブユーザー数、新規ユーザー数、リテンションなどの指標をグラフ形式で確認できました。

上記のそれぞれの指標について詳しく見たい場合は「Insights」から目的のものをクリックすればOK。「Pageview funnel, by browser」をクリックしてみます。

ブラウザごとのページビューや、サイトに複数回アクセスした人数などの情報を確認できました。

「Session Replay」ではユーザーがどんなアクションを取っていたかを確認できます。左に並んでいるセッションをクリックすると、そのセッションでユーザーが行ったマウスの動きやスクロール・クリックなどのアクションをムービーで確認可能です。さらに右上のメニューにカーソルを持って行ってみます。

するとページのロードにかかった時間の指標やコンソールへの出力内容、発生したイベントなどがタイムスタンプ付きで表示されました。初期状態では「All」が選択されており、全ての情報が表示されますが、「イベントのみ」「コンソール出力のみ」「ネットワーク情報のみ」を表示することもできます。

PostHogにはA/Bテストを行う機能があるので試してみます。「Experiments」をクリックするとプランのアップグレードを求められるので「Upgrade now to get Experimentation」をクリック。

さまざまな機能が表示されるので、「Feature flags & A/B testing」の項目の「Upgrade」をクリックします。

メールアドレスやクレジットカードの情報を入力して「支払う」をクリック。カードに0.5ドル(約73円)の請求が行われますが、これはカードの有効性を確かめるための請求ですぐに返金されます。

クレジットカード情報の登録に成功すると下図の通り料金表が表示されます。毎月最初の100万アクセスまでは無料で、超過分にだけ請求される仕組み。

さっそくA/Bテストの設定を行っていきます。「Experiments」をクリックし、「Create Experiments」をクリック。

実験の名前やkeyを決め、説明文を入力します。

実験のタイプは数値の上下を見る「Trend」と、コンバージョンまでの経路での脱落率を見る「Conversion Funnel」の2種類。今回は「Pageview」のトレンドを見る実験を行います。

実験結果を確定するためのしきい値を設定すると、実験終了までに必要な日数が算出されます。「Save as draft」をクリック。

下書き状態で保存されました。「Experiment details」の左にあるボタンで実験の詳細情報を閉じます。

下からコードの記述例が出てくるので、このコードを参考にテストしたいパターンをサイトに導入します。導入できたら「Launch」をクリック。

実験の状態が「RUNNING」になり、テストが始まりました。まだデータが1件も入っていないため、結果の欄は空欄になっています。

データが集まり始めると途中経過が表示されました。

セッションリプレイとABテスト以外にも、PostHogでは一部のユーザーから新機能を徐々に展開していく「Feature Flags」機能や、コンバージョンに至る経路のどの部分でユーザーが離脱しているのかを分析する「Funnels」分析、ユーザーがサイトをどのように巡回したのかを確認できる「User paths」などの機能が搭載されています。また、ドキュメントが丁寧に作り込まれているという特徴もあるので、気になった人は確認してみてください。