← Cloudflare Pages / pages / how-to

Použití Pages Functions pro A/B testování

V tomto průvodci se naučíte používat Pages Functions pro A/B testování ve vašich projektech Pages. A/B testování je výzkumná metoda uživatelské zkušenosti, která se používá při porovnávání dvou nebo více verzí webové stránky nebo aplikace. Díky A/B testování můžete uživatelům zobrazovat dvě nebo více verzí stránky a rozdělovat mezi ně provoz.

Nastavení různých verzí aplikace pro A/B testování se liší podle konkrétního případu použití. Přípravu A/B testování si však mohou všichni vývojáři zjednodušit pomocí několika užitečných zásad.

V závislosti na počtu verzí aplikace, které máte (tento návod používá dvě), můžete uživatele rozdělit do experimentálních skupin. Experimentální skupiny v tomto návodu jsou základní trasa / a testovací trasu /test.

Chcete-li zajistit, aby uživatel zůstal ve skupině, kterou jste mu přiřadili, nastavíte a uložíte v prohlížeči cookie. Podle hodnoty této cookie se pak zobrazí odpovídající trasa.

Ve svém projektu můžete logiku A/B testování řešit pomocí Pages Functions. Pages Functions umožňují zpracovávat serverovou logiku přímo v rámci vašeho projektu Pages.

Začínáme:

1. Na svém lokálním počítači přejděte do adresáře projektu Pages.
2. Vytvořte /functions adresář. Logika serveru vaší aplikace bude umístěna v /functions adresář.

Pages Functions obsahuje pomocné funkce, které dokážou znovu využít části logiky spouštěné před route handlery nebo po nich. Říká se jim middleware. Podle tohoto návodu vám middleware umožní zachytávat požadavky na váš projekt Pages dříve, než dorazí na váš web.

Ve vašem /functions adresáři vytvořte _middleware.js .

Podle konvence pojmenování Functions _middleware.js soubor exportuje jednu asynchronní onRequest funkce, která přijímá request, env a next jako argument.

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];

Chcete-li nastavit cookie, vytvořte cookieName proměnnou a přiřaďte jí libovolnou hodnotu. Poté vytvořte newHomepagePathName proměnnou a přiřaďte jí /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];

Na základě cesty URL zkontrolujte, zda se hodnota cookie rovná new. Pokud je hodnota new, poté newHomepagePathName se obslouží.

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];

Pokud hodnota cookie chybí, musíte ji přiřadit. Vygenerujte procento (v rozsahu 0 až 99) pomocí: Math.floor(Math.random() * 100). Výchozí verze cookie má hodnotu current.

Pokud je vygenerované procento nižší než 50, přiřadíte verzi cookie k new. Na základě náhodně vygenerovaného procenta nastavíte cookie a odešlete assets. Po podmíněném bloku předejte požadavek na next(). Tím se požadavek předá do Pages. Výsledkem bude, že 50% uživatelů dostane /test domovská stránka.

env.ASSETS.fetch() funkce vám umožní přesměrovat uživatele na upravenou cestu definovanou pomocí url parametr. env je objekt, který obsahuje vaše proměnné prostředí a bindings. ASSETS je výchozí vazba funkce, která umožňuje komunikaci mezi vaší funkcí a prostředkem Pages pro poskytování aktiv. fetch() volání na zdroj Pages pro obsluhu statických souborů a vrátí soubor (/test domovské stránky) návštěvníkovi vašeho webu.

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];

Jakmile nastavíte functions/_middleware.js soubor ve vašem projektu, jste připraveni nasadit přes Pages. Odešlete změny projektu do GitHub/GitLab.

Jakmile nasadíte aplikaci, zkontrolujte middleware Function:

1. V dashboardu Cloudflare přejděte na Workers & Pages stránce.

   Přejděte na Workers & Pages ↗

2. Vyberte projekt Pages > Nastavení > Funkce > Konfigurace.