React と Google Optimize でA/Bテストする

Google Optimize ではGUI上で簡単にA/Bテストを作成できますが、
フロントエンドの処理も含めて検証したいケースもあります。

本記事では、React でオリジナルと実験パターンを分岐させる方法について説明します。

Google Optimize の導入方法や、具体的なテスト作成方法は解説しません。

:::note warn
注意
2023年9月30日を過ぎると、Googleオプティマイズは利用できなくなります🥺
https://support.google.com/optimize/answer/12979939?hl=ja
:::

# Google Optimize でテスト作成
まずはエクスペリエンスを作成し、テストID(Experiment ID)を発行します。
![オプティマイズ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516687/80ebe8ef-a34d-3af1-3b73-7efa3ca7466c.png)

続いて、パターンを作成します。
各パターンにはパターンIDが割り振られます。
![オプティマイズ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516687/04f11e74-2edf-13d7-105b-964ad35bbf98.png)



# オリジナルと実験パターンを分岐させる
フロントエンドでパターンごとに処理を分岐させたい場合、パターンIDが必要です。

そこで [Optimize JavaScript API](https://support.google.com/optimize/answer/9059383?hl=ja#zippy=%2C%E3%81%93%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%AE%E5%86%85%E5%AE%B9) を利用して、パターンIDを取得するカスタムフックを作成します。




```GoogleOptimize.tsx
import { useEffect, useState } from 'react';

declare const window: Window['window'] & {
  dataLayer: object[];
  google_optimize: {
    get: (id: string) => string | undefined;
  };
};

// パターンID('0' , '1')を取得する
export function useExperiment(experimentId: string) {
  const [variant, setVariant] = useState<string | undefined>(undefined);
  useEffect(() => {
    void (async () => {
      if (window.dataLayer) {
        await window.dataLayer.push({ event: 'optimize.activate' });
      }
      const intervalId = setInterval(() => {
        if (window.google_optimize !== undefined) {
          setVariant(window.google_optimize.get(experimentId));
          clearInterval(intervalId);
        }
      }, 100);
    })();
  });
  return variant;
}
```

戻り値は、パターンIDまたは undefined です。

`window.google_optimize.get(テストID)` をテスト対象ページで実行すると、パターンIDを取得できます。
テストIDが間違っていたり、テスト対象ページ以外だと undefined が返却されます。

以下は、上記カスタムフックを利用した例です。


```tsx
import { useExperiment } from 'utils/GoogleOptimize';    
    
export const FooForm = () => {
  const variant = useExperiment('DUMMYdummy'); // ダミーIDは置換してください
  return (
    <>
      {variant === '1' ? <ABTestingSection /> : <FooSection />}
    </>
  );
};
```

これでオリジナルと実験パターンの出し分けが可能になりました

# 参考資料
- [ウェブサイト、A/B テスト、パーソナライズのソリューション \- Google オプティマイズ](https://marketingplatform.google.com/intl/ja/about/optimize/)
- [オプティマイズのインストールの概要 \- Optimize ヘルプ](https://support.google.com/optimize/answer/7513085?hl=ja&ref_topic=6197443)
- [A／BテストツールにはGoogle Optimizeを使え　方式の選定基準は“領域の広さ”と“さっくり or かっちり” \- ログミーTech](https://logmi.jp/tech/articles/324751)
- [Google Optimize導入とA/Bテスト実施のポイント \| mediba Creator × Engineer Blog](https://ceblog.mediba.jp/post/159741659497/google-optimize%E5%B0%8E%E5%85%A5%E3%81%A8ab%E3%83%86%E3%82%B9%E3%83%88%E5%AE%9F%E6%96%BD%E3%81%AE%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88)
- [Use Google Optimize in React web for A/B Testing \- DEV Community 👩‍💻👨‍💻](https://dev.to/cloudx/use-google-optimize-in-react-web-for-ab-testing-45ok)
- [How to Add Google Optimize A/B Testing to Your React App in 10 Lines of Code \| Medium](https://medium.com/broadlume-product/how-to-add-google-optimize-a-b-testing-to-your-react-app-in-10-lines-of-code-8310b58e51f4)
- [Google オプティマイズのサポート終了 \- Optimize ヘルプ](https://support.google.com/optimize/answer/12979939?hl=ja)