← Cloudflare Pages / pages / how-to

Использование Pages Functions для A/B-тестирования

В этом руководстве вы узнаете, как использовать Pages Functions для A/B-тестирования в ваших проектах Pages. A/B-тестирование представляет собой метод исследования пользовательского опыта, применяемый при сравнении двух или более версий веб-страницы или приложения. С помощью A/B-тестирования можно показывать пользователям несколько версий страницы и распределять трафик сайта между ними.

Настройка разных версий приложения для A/B тестирования всегда будет зависеть от вашего конкретного случая использования. Но для любого разработчика её можно свести к нескольким полезным принципам.

В зависимости от количества версий приложения (в этом руководстве используются две), вы можете распределить пользователей по экспериментальным группам. Экспериментальные группы в этом руководстве являются базовым маршрутом / и тестовый маршрут /test.

Чтобы пользователь оставался в заданной группе, установите и сохраните cookie-файл в браузере: в зависимости от его значения будет обслуживаться соответствующий маршрут.

В своём проекте вы можете реализовать логику A/B-тестирования с помощью Pages Functions. Pages Functions позволяет обрабатывать серверную логику прямо в проекте Pages.

Для начала:

1. Перейдите в каталог проекта Pages на локальном компьютере.
2. Создайте /functions директория. Логика серверной части приложения будет находиться в /functions каталог.

У Pages Functions есть служебные функции, позволяющие повторно использовать фрагменты логики, выполняемые до и/или после обработчиков маршрутов. Они называются промежуточное ПО. Следуя этому руководству, вы настроите middleware, которое позволит перехватывать запросы к проекту Pages до того, как они достигнут вашего сайта.

В вашем /functions директории создайте _middleware.js файл.

Следуя соглашению об именовании Functions, _middleware.js файл экспортирует единственную асинхронную onRequest функция, которая принимает request, env и next в качестве аргумента.

const abTest = async ({ request, next, env }) => {
	/*
  Todo:
  1. Conditional statements to check for the cookie
  2. Assign cookies based on percentage, then serve
  */
};

export const onRequest = [abTest];

Чтобы задать cookie-файл, создайте cookieName переменную и присвоить ей любое значение. Затем создайте newHomepagePathName переменную и присвойте ей /test:

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

const abTest = async ({ request, next, env }) => {
	/*
  Todo:
  1. Conditional statements to check for the cookie
  2. Assign cookie based on percentage then serve
  */
};

export const onRequest = [abTest];

На основе пути URL проверьте, что значение cookie равно new. Если значение new, затем newHomepagePathName будет обслуживаться.

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

const abTest = async ({ request, next, env }) => {
	/*
  Todo:
  1. Assign cookies based on randomly generated percentage, then serve
  */

	const url = new URL(request.url);
	if (url.pathname === "/") {
		// if cookie ab-test-cookie=new then change the request to go to /test
		// if no cookie set, pass x% of traffic and set a cookie value to "current" or "new"

		let cookie = request.headers.get("cookie");
		// is cookie set?
		if (cookie && cookie.includes(`${cookieName}=new`)) {
			// Change the request to go to /test (as set in the newHomepagePathName variable)
			url.pathname = newHomepagePathName;
			return env.ASSETS.fetch(url);
		}
	}
};

export const onRequest = [abTest];

Если значение cookie отсутствует, его нужно будет присвоить. Сгенерируйте процент (от 0 до 99), используя: Math.floor(Math.random() * 100). Версии cookie по умолчанию присваивается значение current.

Если процент от сгенерированного числа меньше, чем 50, вы назначите версию cookie для new. На основе случайно сгенерированного процента вы установите cookie и предоставите ресурсы. После условного блока передайте запрос в next(). Это передаст запрос в Pages. В результате 50% пользователей получат /test домашняя страница.

env.ASSETS.fetch() функция позволит перенаправить пользователя на измененный путь, заданный через url параметр. env является объектом, который содержит ваши переменные окружения и привязки. ASSETS это привязка Function по умолчанию, обеспечивающая связь между вашей Function и ресурсом Pages, отвечающим за раздачу статических файлов. fetch() вызовы к ресурсу Pages, отвечающему за раздачу статических файлов, и возвращает ресурс (/test домашняя страница) посетителю вашего сайта.

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

const abTest = async (context) => {
	const url = new URL(context.request.url);
	// if homepage
	if (url.pathname === "/") {
		// if cookie ab-test-cookie=new then change the request to go to /test
		// if no cookie set, pass x% of traffic and set a cookie value to "current" or "new"

		let cookie = request.headers.get("cookie");
		// is cookie set?
		if (cookie && cookie.includes(`${cookieName}=new`)) {
			// pass the request to /test
			url.pathname = newHomepagePathName;
			return context.env.ASSETS.fetch(url);
		} else {
			const percentage = Math.floor(Math.random() * 100);
			let version = "current"; // default version
			// change pathname and version name for 50% of traffic
			if (percentage < 50) {
				url.pathname = newHomepagePathName;
				version = "new";
			}
			// get the static file from ASSETS, and attach a cookie
			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];

После того как вы настроите functions/_middleware.js файл в проекте, всё готово для развёртывания через Pages. Отправьте изменения проекта в GitHub или GitLab.

После того как вы развернёте приложение, проверьте middleware Function:

1. На панели управления Cloudflare перейдите к разделу Workers & Pages страницу.

   Перейдите в Workers & Pages ↗

2. Выберите проект Pages > Настройки > Функции > Конфигурация.