【Next.js】Server Side RenderingでABテスト(Google Optimize)を実装した話

はじめに

初めまして、レバレジーズ株式会社の小林といいます。
私は2022年4月に開発未経験でエンジニアとして中途入社し、teratailというサービスのフロントエンド開発とマーケティング周りの業務に携わっています。

teratailでは、昨年末にリプレイスを行ったこともあり分析基盤がきちんと整備されておらず、各種分析ツール(Google Analytics4やBigQuery、Google Optimizeなど)を導入する必要がありました。

中でも今回は、導入に特に苦労した「Next.jsのServer Side RenderingでABテストを実装した方法」について紹介したいと思います。

使用技術

今回の実装で使用する主な技術は以下の通りです。

  • Next.js
  • TypeScript
  • Recoil, React Context (状態管理)
  • Google Optimize (ABテスト)

背景

■なぜこの記事を書いたのか

  • 参考文献が少なかった
    通常のReactアプリ(SPA)のOptimize導入については参考文献が豊富ですが、Next.jsのServer Side Rendering時などにサーバー側からABテストを制御する方法に関しては文献が多くありませんでした。公式リファレンスを読んでも「???」な部分が多くあり、予想以上に詰まったため、同じような苦労をされている方は多いのではないかと思い記事にしました。

  • 今回の苦労を残しておきたかった
    このタスクを担当したときは入社3〜4ヶ月目の頃でしたが、開発経験ほぼゼロで入社した私にとっては難易度が高かったです。入社早々に今回のような貴重な経験ができたので、この苦労をここぞとばかりに共有したく、記事にしました。

■なぜ分析基盤を整備するのか

プロダクト自体は月間PV数が1,000万を超えており十分なデータが存在するにも関わらず、分析基盤が整っていないために、データドリブンに施策の立案や効果の検証が行えていないという課題がありました。 今後teratailが更にグロースしていく上で、データドリブンに意思決定を行える体制を作ることが必須だと考え、そのための分析基盤構築の一環としてABテスト環境を整えることとなりました。

■対象の読者

特に以下のような方々の参考となれば嬉しいです。

  • Next.js(SSR)でABテストを実装したいエンジニア
  • フロントエンドエンジニア
  • ABテスト担当者、マーケター等

前提知識

■Next.jsについて

プリレンダリング(ページにアクセスがあったときにサーバー側でJavaScriptを実行してHTMLを生成する)機能の一つで、SEO対策や高速なコンテンツ表示が可能となります。

  • 通常のReactアプリ(SPA)との違い
    通常のReactアプリ(Single Page Application)はブラウザ側でHTMLを生成するのに対し、SSRではサーバー側でHTMLを生成します。後述しますが、サーバー側で生成されるという点が、本記事の大きなポイントとなります。

■Google Optimizeについて

  • Google Optimizeとは
    Googleが提供する無償のABテストツールです。専用のタグをサイトに埋め込むだけで簡単にエクスペリエンス(=ABテスト)を実施することできます。エクスペリエンスやデータの集計は_gaexpというcookieで管理されます。

  • 管理画面でエクスペリエンスの実施が可能
    Google Optimizeの特徴として、ブラウザの管理画面で各種設定を行うことで簡単にABテストを実施することができる、という点が挙げられます。ノーコードでテストパターンの要素変更ができるため、非エンジニアでも気軽に操作することが可能です。

今回の問題点

通常、Google OptimizeのABテストはクライアント側で処理される仕様のため、サーバー側で機能を切り替えることができません。クライアント側でページの読み込み後に処理されるため、ABテストの実行(要素の変更)時にはどうしてもちらつき(ページフリック)が発生してしまいます。

今回、このちらつきを避けることや、管理画面側では設定できないようなABテストをプログラム側で実装することを考慮し、通常の方法ではなくサーバー側でOptimizeを使用する環境を整える必要がありました。

それではここから、本題の「Server Side RenderingとGoogle OptimizeでABテストを実装する方法」について説明していきます。

Server Side Rendering×OptimizeでABテストを実装する方法

■結論

Server Side RenderingでGoogleOptimizeのABテストを実装するためには、Optimizeのサーバーサイドテストの機能を使い、プログラム側とOptimize管理画面側でそれぞれ以下の項目を実装・設定する必要があります。

【プログラム側での実装】
1) テストパターンの割り当て
2) Optimize(GA)側にテストパターンを送信
3) テストパターンのグローバル管理、取得
4) コンテンツの出しわけ

【Optimize管理画面側での設定】
1)テストパターンの作成
2)ページターゲティング
3)その他

それぞれ説明していきます。

■プログラム側での実装

1) テストパターンの割り当て
まず、ABテストのseed値がCookieにあればCookieから取得、なければ生成する関数を定義します。
(※seed値にはuserIdを用いてもOKですが、今後「ログアウト⇨ログイン状態」をまたいだABテストを行うことも考慮し、userIdを利用せずにABテスト用にseed値を生成してパターンの振り分けを行うように実装しています。)

【abTestSeed.ts】

import { NextPageContext } from 'next';
import nookies, { parseCookies } from 'nookies';
 
export interface AbTestSeed {
 seed: string;
}
export const COOKIE_KEY_AB_TEST_SEED = 'abTestSeed';
 
const genRandomString = () => {
 return Math.random().toString(36).substring(2) + Math.random().toString(36).substring(2);
};
 
export const getOrCreateAbTestSeed = async (context: Pick<NextPageContext, 'req' | 'res'>): Promise<AbTestSeed> => {
 const cookies = parseCookies(context);
 
 if (COOKIE_KEY_AB_TEST_SEED in cookies && cookies[COOKIE_KEY_AB_TEST_SEED]) {
   return {
     seed: cookies[COOKIE_KEY_AB_TEST_SEED],
   };
 }
 
 const seed = genRandomString();
 nookies.set(context, COOKIE_KEY_AB_TEST_SEED, seed, {
   maxAge: 5 * 365,
   path: '/',
   httpOnly: false,
   sameSite: 'lax',
 });
 return {
   seed,
 };
};

次に、今回のエクスペリエンスをSAMPLE_TESTとし、以下の項目を設定します。

  • テストを開始するページ: トップページ
  • テストパターンの数: 2
  • テスト対象の割合: 全てのユーザー

【abTestSetting.ts】

export interface AbTestSetting {
 experimentId: string; // OptimizeのエクスペリエンスID
 triggerPaths?: RegExp[]; // テスト開始をトリガーするPathを指定
 numOfVariants?: number; // テストパターンの数
 targetRatio?: number; // 対象とするユーザーの割合。0~1で設定
}
 
// 全てのクエリを含む、トップページが対象
const TopPageRegex = /^\/(\?.*)?$/;
 
export const SAMPLE_TEST = {
 experimentId: 'XXXXXXXXXXXXXXXX',
 numOfVariants: 2,
 targetRatio: 1,
 triggerPaths: TopPageRegex;
};
 
export const ABTests: AbTestSetting[] = [SAMPLE_TEST];

今後複数のエクスペリエンスを実行することを考慮し、ABTestsという変数に配列で格納しておきます。

次に、abTestSeedを受け取ってテストパターンを返す関数を定義します。
OptimizeABテスト用のReact Contextも作成しておきます(詳細は後述します)。

【abTestState.ts】

import { createContext } from 'react'; 
import { ABTests, AbTestSetting } from './ABTestSettings';
import * as crypto from 'crypto';
import * as hashSha256 from 'sha256-uint8array';
 
export type ABTestVariant = {
 experimentId: string;
 variant: number;
};
 
// テストパターンを決定する
export const determineVariantsForPath = (path: string, seed: string): ABTestVariant[] => {
 const abTests = ABTests.filter((setting) => {
   if (!setting.triggerPaths) {
     return true;
   }
   return setting.triggerPaths.some((pattern) => pattern.test(path));
 });
 return _determinVariants(abTests, seed);
};
 
const _determinVariants = (abTests: AbTestSetting[], seed: string): ABTestVariant[] => {
 const variants = abTests
   .map((setting) => {
     return {
       experimentId: setting.experimentId,
       variant: determineVariant(setting, seed),
     };
   })
   .filter((variant) => variant.variant !== NO_VARIANTS);
 return variants;
};
 
const UINT_MAX = 4294967295;
export const NO_VARIANTS = -1;
 
export const determineVariant = (setting: AbTestSetting, seed: string) => {
 //Seed値をハッシュ化させてパターンを割り振る
 const digest = hashSha256.createHash().update(`${setting
.experimentId}-${seed}`).digest().buffer;
 const patternBase = new DataView(digest.slice(0, 4)).getUint32(0);
 const numOfPatterns = setting.numOfVariants || 2;
 const targetRatio = setting.targetRatio || 1;
 const pattern = patternBase % numOfPatterns;
 
 if (targetRatio >= 1) {
   return pattern;
 } else {
   // 比率が1ではない場合は、4~8byte目を使用する
   const ratioBase = new DataView(digest.slice(4, 8)).getUint32(0) / UINT_MAX;
   if (ratioBase < targetRatio) {
     return pattern;
   } else {
     return NO_VARIANTS;
   }
 }
};
 
//グローバルで状態管理するためにReact Contextを使用
export const ABTestContext = createContext({
 seed: 'empty',
});
 
//テストパターンを取得。実際にABテストを実施するコンポーネントで使用する
export const getVariant = (setting: AbTestSetting): number => {
 const seed = useContext(ABTestContext).seed;
 const variant = determineVariant(setting, seed);
 if (variant !== NO_VARIANTS) {
   return variant;
 } else {
   return undefined;
 }
};

2) Optimizeにテストパターンを送信
abTestSeedを取得する関数を_app.tsx内で実行し、メタ要素を管理するMetadataコンポーネントに渡します。

【_app.tsx】

import { NextPageContext } from 'next';
import { useRouter } from 'next/router';
import Metadata from './Metadata';
import { determineVariantsForPath } from './ABTestState';
 
const App = ({ Component, pageProps, abTestSeed }) => {
 const router = useRouter();
 return (
   <>
     <Metadata
       abTestVariants={determineVariantsForPath(router.asPath, abTestSeed)}
     />
     <Component {...pageProps} />
   </>
 );
};
 
App.getInitialProps = async (appContext: AppContext) => {
 const abTestSeed = await getOrCreateAbTestSeed(appContext.ctx);
 
 return { abTestSeed: abTestSeed.seed };
};
 
export default App;

【Metadata.tsx】

import React from 'react';
import Script from 'next/script';
import { ABTestVariant } from './ABTestState';
 
const googleAnalyticsTrackingId = 'YYYYYYYYYYYYYYY'
const googleOptimizeTrackingId = 'ZZZZZZZZZZZZZZZ'
 
interface MetadataProps {
 abTestVariants: ABTestVariant[];
}
 
const Metadata: React.FC<MetadataProps> = (props) => {
 return (
   <>
     <Script src={`https://www.googletagmanager.com/gtag/js?id=${googleAnalyticsTrackingId}`}
     />
     <Script
       id="gtag-snippet"
       strategy="afterInteractive"
       dangerouslySetInnerHTML={{
         __html: `
           window.dataLayer = window.dataLayer || [];
           function gtag(){dataLayer.push(arguments);}
           gtag('js', new Date());
           gtag('config', '${googleAnalyticsTrackingId}', {
            page_path: window.location.pathname,
            experiments: [${props.abTestVariants
       .map((variant) => {
         return `{ id:'${variant.experimentId}', variant:'${variant.variant}' 
      }`;
       })
       .join(',')}],
     });
       `,
       }}
     />
   </>
 );
};
 
export default Metadata;

これで、トップページにアクセスがあったタイミングでOptimizeにデータが送信されるようになります。

3) テストパターンのグローバル管理、取得
(2)で記述した_app.tsxのコンポーネントをReact Contextでラップすることで、テストパターンをグローバルで状態管理します。

【_app.tsx】

import { ABTestContext} from './ABTestState';
 
//...省略...
 
return (
   <ABTestContext.Provider value={{ seed: abTestSeed }}>
     <GoogleAnalyticsMetadata
       abTestVariants={determineVariant(abTestSeed)}
     />
     <Component {...pageProps} />
   </ABTestContext.Provider>
 );
};
 
//...省略...

私たちのプロダクトでは状態管理にRecoilを使用していますが、Recoilの場合、RecoilRootごと(各ページごと)に状態が分割しているためテストパターンを全体で共有できず、React Contextを使用するようにしました。

4) コンテンツの出し分け
最後は実際の表示部分です。
テストパターンを取得し、表示を出しわけます。

【SampleComponent.tsx】

import React from 'react';
import { getVariant } from './ABTestState';
import { SAMPLE_TEST } from './ABTestSettings';
 
const pattern = ['オリジナル','パターンA']
 
const SampleComponent: React.FC = (props) => {
 const variant = getVariant(SAMPLE_TEST);
 
 return (
   <>
     <p>{pattern[variant]}</>
   <>
 );
};
 
export default SampleComponent;

上記のコンポーネントでは、テストパターンが0だと「オリジナル」、1だと「パターン1」が表示されるようになります。

※実施するABテストの内容によっては、コンポーネント自体を別で作って表示を出し分けるような実装でもいいかと思います。テスト内容に応じて調整ください。

以上がプログラム側で必要な実装となります。

■Optimize側での実装

Optimize側で必要な設定は主に以下の2つです。

1) テストパターンの作成
ABテストに必要な数だけパターンを作成します。 テストの実装は全てプログラム側で行っているため、編集ボタンでの操作は一切不要です。パターンを作成するだけでOKです。

2)ページターゲティングの設定
存在しないサイトのURLを入力してください。正式なURLを入力してしまうとエクスペリエンスがOptimize側で自動的に開始されてしまい、プログラム側で実装した処理よりも優先して開始されてしまいます。ここでは公式リファレンスを参考にして「SERVER_SIDE」と入力しています。画像のようなWarningが出ますが、無視でOKです。

その他
それ以外に必要な設定は特にありません。管理画面にはトラフィックの割り当てやアクティベーションイベントなどを設定する項目がありますが、今回のサーバーサイドでのABテストの場合、それらは全てプログラム側で設定することになるため管理画面側での設定は不要です。

あとは、GAとの連携やOptimizeのインストールが済んでいればエクスペリエンスの開始が可能なので、「開始」ボタンをクリックしてエクスペリエンスを開始させてください。プログラム側からデータが正常に送られているとデータが集計されます。

設定は以上となります。

■ハマった点

  • gtag.jsでのデータ送信
    Googleの測定サービスにデータを送信するにはgtag.jsというフレームワークを使いますが、公式のサンプルコードではgtag.jsの’set’ディレクティブが記述されているものの、今回の実装だとデータが送信されませんでした。結局’config’ディレクティブに変更して上手くいきましたが、かなり詰まりました。

  • 管理画面側で必要な設定項目
    通常のReactアプリ(SPA)でのOptimize実装の文献を読むと「アクティベーションイベントを設定してプログラム側でuseEffectで呼び出す〜」といった説明がありますが、サーバーサイドでのテストの場合はこれらの設定は一切不要です。 上述の通り、管理画面側で必要な設定は主に2つのみです。管理画面はあくまでABテストを行うためだけの土台作りのイメージ、ということを認識する必要がありました。

  • 状態管理
    状態管理にはRecoilを使用していますが、私たちのプロダクトでは各ページごとにRecoil Rootで状態を分割しているため、テストパターンの値を全体で共有できませんでした。React Contextを使うことで解決しました。

  • ABTestSeed生成のタイミング
    該当ページにアクセスした時にseed値を生成するようにすると、複数ページにまたがるABテストを実行する場合に矛盾が生じてしまいます。
    例)/hogeと/fugaで同一のテストを行いたい場合、/hogeにアクセス(オリジナル) ⇨ /fugaに遷移(テスト発火) ⇨ /hogeにアクセス(パターンA) のように、同じユーザーに対して/hogeの表示内容が変わってしまう可能性があります。
    なのでABTestSeedの生成を_app.tsxで実行することで、全てのページにアクセスがあったタイミングでseed値の生成をするようにしています。

■懸念点

  • ブラウザ(Optimize管理画面)側でテストの稼働を制御できない
    ABテストを中断するにはプログラムを修正する必要があります。管理画面でエクスペリエンスを停止すると結果の集計はされなくなりますが、テスト自体はプログラム側で実装しているため、プログラムを修正しない限り継続して稼働し続けてしまいます。 対策として、DBにテストの稼働を管理するためのデータを持たせて制御するような仕組みを検討していく必要があると考えています。

最後に

いかがでしたでしょうか。

Server Side RenderingでのABテストの実装は参考文献が少なく、詰まった部分がとても多かったですが、今回無事に実装できてよかったです。これでABテストを行う基盤が整ったので、今後は実際にテストを沢山まわしてプロダクトの分析・グロースに繋げていければと思います。

レバレジーズでは、私のようにエンジニア未経験で入社した社員でも幅広くチャレンジできる環境が整っています。ご興味のある方は、以下のリンクから是非ご応募ください!

recruit.jobcan.jp