Zenn
🧪

ReactベースのA/Bテストライブラリreact-ab-testで超簡単にUIのA/Bテストを実現する！

2023/01/11に公開
npm
yarn
Test
tech

A/Bテストするぞ！
と意気込んだはいいものの、専門のツールを探して、ツールの導入合意とり、決済降りてようやく導入したかと思えば、ツールの使い方が難しい...といったことになっていませんか？

または、Aパターンを検証して、その後Bパターンを検証して、ようやく効果検証ダァー！
と長い検証期間を確保して時間を溶かしていませんか？

実が、A/Bテストを実現するライブラリあります！

A/Bテストライブラリ@marvelapp/react-ab-test

今回紹介するのはこちらのライブラリです！
https://github.com/marvelapp/react-ab-test

以下のをフォークして作成されています。
https://github.com/pushtell/react-ab-test

こちらは、React古いバージョンにしか対応していないため、「@marvelapp/react-ab-test」の利用を推奨します！

活用方法

使い方は丁寧にGitHub上に書かれているので、ここで詳しく紹介するまでもないかもしれませんが、一応流れを記載しておきます。

インストール

yarn add @marvelapp/react-ab-test

出し分けるUIの定義

<Experiment>コンポーネントで検証するパターンのUIをラップするだけです！nameには、検証する検証名を設定します。

<Variant>コンポーネントで検証するUIをラップします。nameにはUIパターンの名称などを設定しておきます。

index.jsx
import React from 'react'
import { Experiment, Variant } from '@marvelapp/react-ab-test'

export default function Ab(){
  return (
    <div>
      <Experiment name="My Example">
        <Variant name='A'>
          <h1>Type A</h1>
        </Variant>
        <Variant name='B'>
          <h1>Type B</h1>
        </Variant>
      </Experiment>
    </div>
  )
}

これだけで、UIの出しわけが可能です！

Next.jsで利用する上での注意

今回、Next.jsで検証を行ってみたのですが、以下のエラーが発生してしまいました。

Next content does not match server-rendered HTML

SSRを適応していた関係で、サーバーサイド側で呼び出された内容と、実際にレンダリングされた内容に差があることから発生していたようでした。

回避策として、A/Bテストのライブラリによる出しわけが発生したことが原因であるため、ここでは、suppressHydrationWarning={true}を出しわけているDOM部分に記述することで回避しました。
https://weev.media/article/717

index.jsx
・・・省略

export default function Ab(){
  return (
    <div>
      <Experiment name="My Example">
        <Variant name='A'>
          <h1 suppressHydrationWarning={true}>Type A</h1>
        </Variant>
        <Variant name='B'>
          <h1 suppressHydrationWarning={true}>Type B</h1>
        </Variant>
      </Experiment>
    </div>
  )
}

表示されたUI情報はローカルストレージに保存される

AパターンとBパターンのどちらかが1度呼び出されると、その内容がローカルストレージに保存され、それ以降は保存されたパターンのUIだけが表示対象となります。

Wrap components in <Variant /> and nest in <Experiment />. A variant is chosen randomly and saved to local storage.

表示比率の調整

UIの表示比率を調整したい場合は、emitter.defineVariantsを利用します。

以下の通り、第1引数に検証名、第2引数にUIパターン名、第3引数に表示比率を設定します。
（比率通りになっているかまでは確認できてはいませんが、8:2に設定すると、確かに表示確率が上がった気はしました。笑）

index.jsx
import { Experiment, Variant, emitter } from '@marvelapp/react-ab-test'

emitter.defineVariants("My Example", ["A", "B"], [50, 50]);

・・・省略

計測ログの蓄積

さすがに、このライブラリには計測機能までは持ち合わせていません。別途ログAPIを開発したり、GAのイベント設定等を使って計測を行う必要があります。

とは言え、かなり簡単にUIの出しわけが可能になるのでありがたいのではないでしょうか。

しかし、いろんなライブラリがあるんだなぁとびっくりしました。

Discussion