ろご
画面から出たい人

Server Side Rendering (SSR)を利用したReactのSPAにおけるGoogle OptimizeのABテストの実装方法

累計閲覧数 615 PV

ここで紹介するのはサーバーサイド テストとしてドキュメント化されている内容を React で書き起こしたものである。

事前準備

  • Google Optimize のコンテナ ID
  • Google Analytics のテスト ID

実装

以下の技術スタックで再現する

  • express
  • React

実装すべき項目

サーバーサイド

  1. AB テストのターゲット初めて流入したとき、A/B/n のテストケースのいずれかに割り当てる
  2. ターゲットの AB テストを 2 回目以降流入したときに前回のテストケース  に割り当てられるように状態を復元する
  3. 復元したテストケースの情報が正しい情報か確認し、正しくない場合は破棄し、再度割り当てる
  4. AB テスト期間外にターゲットが流入してきたとき、どのテストケースにも割り当てられないようにする。もしくはデフォルト値にする。
  5. クライアントサイドに割り当てられたテストケースの情報を伝える
cookieでリストアするパターン

クライアントサイド

  • analytics.jsもしくはgtag.jsで割り当てられたテストケースの情報をセットする
  • Google Optimize の Container ID をセットする

gtag.jsで Google Optimize のテストケースを設定する

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag("js", new Date());
  gtag("config", "UA-...", {
    optimize_id: "OPT-...", // https://support.google.com/optimize/answer/7513085?hl=ja
    send_page_view: true, // https://support.google.com/optimize/answer/7513085?hl=ja
    /**
     * @see https://support.google.com/optimize/thread/36142685?hl=en&msgid=36785067
     * @see https://stackoverflow.com/questions/50686295/gtag-js-optmize-server-side-implementation-not-working
     */
    experiments: [
      {
        id: "TEST_ID",
        variant: 1,
      },
    ],
  });
</script>

gtag.js で Google Optimize のエクスペリエンスの情報をセットする方法は、公式のリファレンスでなかなか見当たらないが、気合で探すと StackOverflow と Support に存在した。

@types/gtag.jsの型情報に明確に存在しないが、gtag("config", "UA-", [CONFIG])の第三引数は次のような型で拡張可能である。

interface Config {
  optimize_id?: string;
  send_page_view?: boolean; // default: true
  experiments?: {
    id: string;
    variant: number;
  }[];
}

analytics.jsでテストパターンを報告するのはドキュメントにある

動作確認する

サーバーの準備

Google Optimize は Cookie を利用して機能を提供するため、ローカルホストで行う動作確認を行う場合は、 /etc/hostsを書き換えて、適当なドメインで Optimize を調整すると良い。判定できるように指定してくと良い。

また、簡易に他のユーザーなどに動作確認してもらいたい場合は、ngrokやinletsを利用するとよい。

テストケースがGAに送信されていることを確認する

計測するonClickなどを適当に用意し、GA 上に送信すると、以下のようにexpが QueryString Params として送信されていれば成功だ。

expが送信されていること

参考

BlueSkyHatena Bookmark