Pages Functionsを使用したA/Bテスト

このガイドでは、Pages Functionsを使用して、PagesプロジェクトでA/Bテストを行う方法を学びます。A/Bテストは、ウェブページやアプリケーションの2つ以上のバージョンを比較する際に適用されるユーザー体験の研究手法です。A/Bテストを使用すると、ユーザーにウェブページの2つ以上のバージョンを提供し、サイトへのトラフィックを分割することができます。

概要

A/Bテストのためにアプリケーションの異なるバージョンを設定することは、特定のユースケースに固有のものになります。すべての開発者にとって、A/Bテストの設定は、いくつかの役立つ原則に簡略化できます。

アプリケーションのバージョンの数に応じて（このガイドでは2つを使用）、ユーザーを実験グループに割り当てることができます。このガイドの実験グループは、基本ルート / とテストルート /test です。

ユーザーが与えられたグループに留まることを保証するために、ブラウザにクッキーを設定して保存し、設定したクッキーの値に応じて対応するルートを提供します。

Pages Functionの設定

プロジェクト内で、Pages Functionsを使用してA/Bテストのロジックを処理できます。Pages Functionsを使用すると、Pagesプロジェクト内からサーバーロジックを処理できます。

始めるには：

ローカルマシンのPagesプロジェクトディレクトリに移動します。
/functions ディレクトリを作成します。アプリケーションサーバーロジックは /functions ディレクトリ内に配置されます。

ミドルウェアロジックの追加

Pages Functionsには、ルートハンドラーの前後に実行されるロジックのチャンクを再利用できるユーティリティ関数があります。これらはミドルウェアと呼ばれます。このガイドに従うことで、ミドルウェアを使用して、サイトに到達する前にPagesプロジェクトへのリクエストを傍受できます。

/functions ディレクトリ内に _middleware.js ファイルを作成します。

Functionsの命名規則に従い、_middleware.js ファイルは、request、env、および next を引数として受け取る単一の非同期 onRequest 関数をエクスポートします。

const abTest = async ({request, next, env}) => {
  /*
  Todo:
  1. クッキーをチェックする条件文
  2. パーセンテージに基づいてクッキーを割り当て、その後提供
  */
}

export const onRequest = [abTest]

クッキーを設定するには、cookieName 変数を作成し、任意の値を割り当てます。次に、newHomepagePathName 変数を作成し、/test を割り当てます：

const cookieName = "ab-test-cookie"
const newHomepagePathName = "/test"

const abTest = async ({request, next, env}) => {
  /*
  Todo:
  1. クッキーをチェックする条件文
  2. パーセンテージに基づいてクッキーを割り当て、その後提供
  */
}

export const onRequest = [abTest]

条件ロジックの設定

URLのパス名に基づいて、クッキーの値が new と等しいかどうかを確認します。値が new の場合、newHomepagePathName が提供されます。

const cookieName = "ab-test-cookie"
const newHomepagePathName = "/test"

const abTest = async ({request, next, env}) => {
  /*
  Todo:
  1. ランダムに生成されたパーセンテージに基づいてクッキーを割り当て、その後提供
  */

  const url = new URL(request.url)
  if (url.pathname === "/") {
    // クッキー ab-test-cookie=new の場合、リクエストを /test に変更
    // クッキーが設定されていない場合、x%のトラフィックを通過させ、クッキーの値を "current" または "new" に設定

    let cookie = request.headers.get("cookie")
    // クッキーは設定されていますか？
    if (cookie && cookie.includes(`${cookieName}=new`)) {
      // リクエストを /test に変更（newHomepagePathName変数で設定された通り）
      url.pathname = newHomepagePathName
      return env.ASSETS.fetch(url)
    }
  }
}

export const onRequest = [abTest]

クッキーの値が存在しない場合は、1つを割り当てる必要があります。Math.floor(Math.random() * 100) を使用してパーセンテージ（0-99）を生成します。デフォルトのクッキーバージョンには current の値が与えられます。

生成された数のパーセンテージが 50 より低い場合、クッキーバージョンを new に割り当てます。ランダムに生成されたパーセンテージに基づいて、クッキーを設定し、アセットを提供します。条件ブロックの後で、リクエストを next() に渡します。これにより、リクエストがPagesに渡されます。これにより、50%のユーザーが /test ホームページを取得します。

env.ASSETS.fetch() 関数を使用すると、url パラメータを介して定義された修正されたパスにユーザーを送信できます。env は、環境変数とバインディングを含むオブジェクトです。ASSETS は、FunctionとPagesのアセット提供リソース間の通信を可能にするデフォルトのFunctionバインディングです。fetch() は、Pagesのアセット提供リソースへの呼び出しを行い、アセット（/test ホームページ）をウェブサイトの訪問者に返します。

const cookieName = "ab-test-cookie"
const newHomepagePathName = "/test"

const abTest = async (context) => {
  const url = new URL(context.request.url)
  // ホームページの場合
  if (url.pathname === "/") {
    // クッキー ab-test-cookie=new の場合、リクエストを /test に変更
    // クッキーが設定されていない場合、x%のトラフィックを通過させ、クッキーの値を "current" または "new" に設定

    let cookie = request.headers.get("cookie")
    // クッキーは設定されていますか？
    if (cookie && cookie.includes(`${cookieName}=new`)) {
      // リクエストを /test に渡す
      url.pathname = newHomepagePathName
      return context.env.ASSETS.fetch(url)
    } else {
      const percentage = Math.floor(Math.random() * 100)
      let version = "current" // デフォルトバージョン
      // 50%のトラフィックに対してパス名とバージョン名を変更
      if (percentage < 50) {
        url.pathname = newHomepagePathName
        version = "new"
      }
      // ASSETSから静的ファイルを取得し、クッキーを添付
      const asset = await context.env.ASSETS.fetch(url)
      let response = new Response(asset.body, asset)
      response.headers.append("Set-Cookie", `${cookieName}=${version}; path=/`)
      return response
    }
  }
  return context.next()
};

export const onRequest = [abTest];

Cloudflare Pagesへのデプロイ

プロジェクト内に functions/_middleware.js ファイルを設定した後、Pagesでデプロイする準備が整いました。プロジェクトの変更をGitHub/GitLabにプッシュします。

アプリケーションをデプロイした後、ミドルウェアFunctionを確認します：

Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
アカウントホームで、Workers & Pages を選択します。
概要で、Pagesプロジェクト > 設定 > Functions > 構成を選択します。

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings