Ateam Group U-30 のカレンダーの8日目はエイチームフィナジーの @mizunomi32 が担当します。

TL;DR

モダンなReactJSなプロダクトでもGoogle OptimizeでストレスフルなABテストが可能！！
@react-hook/google-optimizeを使うと出し分けるコンポーネントの編集/描画をGoogle Optimizeに頼らずにできる！！

ABテストがない世界線

「ユーザーはこんな機能が欲しいはず」、「ユーザーにはこんなデザインが刺さるはず」

しかし、実際にその機能やそのデザインを実装してもユーザーは喜びますか？

数ヶ月かけて作ったけど、使われなかった
半年かけてデザイン変えたけれど、よいフィードバックがなかった

なんてこともザラにあります。
また、いい影響を与えられなかったことで、広告出稿に悪影響を与えたり事業全体の足を引っ張ることになるかもしれません。

ユーザーファーストで考えた施策でも仮設のままで動き出しては良くないですね、
そこで、ABテストが登場してきます！

じゃあ、ABテストをしよう！

ABテストとは

ABテストとは、WebマーケティングにおけるCRO（コンバージョン率を最適化）手法の一つであり、このコンバージョン率を最適化していく様々な工程の中の1つとも言えます。また現在表示されている（表示を予定している）情報＝Aパターンと、その情報に変更を加えたもの＝Bパターンを用意し、どちらのパターンをユーザーに表示するのが高いコンバージョン率を得られるかなどの検証方法として用いられています。ABテストが使われる場面としては、Webページ、広告バナー、広告文などが挙げられます。
※CROとはConversion Rate Optimizationの略
https://www.assion.co.jp/blog/guide-of-abtesting/#abtoha

ある目標に対して、
変更前後のどちらがよりよい影響を与えるかを調べる方法です。

じゃあ、どうやってABテストをするの？

ここで登場するのがGoogle Optimizeです！

Google Optimizeを使えば、実際にプロダクトに実装せずともGoogle Optimize上でテストをするパターンを用意して、それぞれのパターンの表示管理や計測を行ってくれます！
（詳しい使い方はこちらを見てみてください）

しかし、Google OptimizeでのABテストはページ単位でしか行うことができません。
もし、ユーザーが回遊するサイトで全ページで共通するようなコンポーネントでABテストを行うとき、テスト対象の1ページと他のページで別のは違うものが表示されるかもしれないです。
これでは、ページによって差異が生まれてユーザーが混同するかもしれません。
そこで、ページ単位ではなくコンポーネント単位でのABテストがしたくなってきます。

そうだ、コンポーネントベースのABテストをしよう！

Reactjsを使ったページのコンポーネント単位のABテストをGoogle Optimize活用して行うときに登場するのが@react-hook/google-optimizeです

このライブラリはGoogle Optimizeのパターンを管理しているバリアントを扱いやすくするReact hookです。
Google Optimizeにはどのパターン表示するのかの決定と効果測定、Reactはバリアントを受けて取ってコンポーネントの出し分けと役割を分ける事によってコンポーネント単位のABテストを実現することができます！

使い方

1.まず、通常通りにGoogle Optimizeを導入する

何はともあれ、通常通りサイト上にGoogle Optimizeを導入してください！
目標の設定等々のテストの用意とパターンの追加だけを行ってABテストを開始しておきましょう！

そして「測定と目標」項目のテストIDを後で使うので控えておいてください！

２. @react-hook/google-optimizeを導入する

yarn add @react-hook/google-optimizeまたはnpm install @react-hook/google-optimize等を使ってプロジェクトに@react-hook/google-optimizeを導入してください！

3. テストパターンを実装する

ABテストを行いたいコンポーネントのOriginalComponentとChallengerComponentをそれぞれ実装して、
それらを出し分けるTaegetComponentを実装していきます。
ここで、Google Optimizeを設定したときに控えておいたテストIDを使います。

import  useGoogleOptimize  from  '@react-hook/google-optimize' 

const TaegetComponent = ()　=> { 
  const variant = useGoogleOptimize('テストID', [false, true]) 
  return variant? ( 
    <OriginalComponent /> 
  ):　( 
    <ChallengerComponent /> 
  )
}

4. リリースして結果を見届ける

実装したら、あとはリリースして効果計測されているのを見守るだけです。
十分に計測されると、Google Optimize側でABテストが終了されます！

おわりに

@react-hook/google-optimizeとGoogle Optimizeを使うことで、ページ単位のABテストだけでなく、サイト全体に表示されるようなコンポーネントに対してのABテストが気軽に行うことができます。
Google Optimizeで計測やABテストの終了を管理できるので、不必要にABテストを長く実施することを防げます。

明日は @masato930 が担当します！　
ぜひAteam Group U-30 Advent Calendar 2022を定期購読して、明日の記事もご覧いただけたら幸いです。

ReactのコンポーネントのABテストってどうするの？