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

Last updated at 2023-01-23Posted at 2022-12-03

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

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

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

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

Google Optimize でテスト作成

まずはエクスペリエンスを作成し、テストID(Experiment ID)を発行します。

続いて、パターンを作成します。
各パターンにはパターンIDが割り振られます。

オリジナルと実験パターンを分岐させる

フロントエンドでパターンごとに処理を分岐させたい場合、パターンIDが必要です。

そこで Optimize JavaScript API を利用して、パターン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 が返却されます。

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

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

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

参考資料

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up