📘 תיעוד 234

שימוש ב-Pages Functions לבדיקות A/B

במדריך זה תלמדו כיצד להשתמש ב-Pages Functions לבדיקות A/B בפרויקטי Pages שלכם. בדיקת A/B היא מתודולוגיית מחקר של חוויית משתמש, שמיושמת כאשר משווים שתי גרסאות או יותר של דף אינטרנט או יישום. באמצעות בדיקות A/B אפשר להגיש למשתמשים שתי גרסאות או יותר של דף אינטרנט, ולחלק את התעבורה לאתר.

#סקירה

הגדרת גרסאות שונות של היישום לבדיקות A/B תהיה ייחודית למקרה השימוש הספציפי שלכם. לכל המפתחים, אפשר לפשט את הגדרת בדיקות A/B לכמה עקרונות מועילים.

בהתאם למספר גרסאות היישום שיש לכם (מדריך זה משתמש בשתיים), אפשר לשייך את המשתמשים לקבוצות ניסוי. קבוצות הניסוי במדריך זה הן הנתיב הבסיסי / ונתיב הבדיקה /test.

כדי לוודא שמשתמש נשאר בקבוצה שנתתם לו, תגדירו ותשמרו עוגייה בדפדפן, ובהתאם לערך העוגייה שהגדרתם יוגש הנתיב המתאים.

#הגדרת Pages Function

בפרויקט אפשר לטפל בלוגיקה של בדיקות A/B באמצעות Pages Functions. Pages Functions מאפשרות לטפל בלוגיקת שרת מתוך פרויקט Pages.

כדי להתחיל:

1. עברו אל ספריית פרויקט Pages במחשב המקומי.
2. צרו ספריית /functions. לוגיקת השרת של היישום תימצא בספריית /functions.

#הוספת לוגיקת middleware

ל-Pages Functions יש פונקציות עזר שיכולות לעשות שימוש חוזר במקטעי לוגיקה, שמופעלים לפני מטפלי נתיב, אחריהם, או לפניהם ואחריהם. אלה נקראים middleware. לפי מדריך זה, middleware יאפשר ליירט בקשות לפרויקט Pages לפני שהן מגיעות לאתר.

בספריית /functions, צרו קובץ _middleware.js.

הערה

כאשר יוצרים את הקובץ _middleware.js בבסיס תיקיית /functions, ה-middleware ירוץ עבור כל הנתיבים בפרויקט. למידע נוסף על ניתוב middleware.

לפי מוסכמת השמות של 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];

כדי להגדיר את העוגייה, צרו את המשתנה 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];

#הגדרת לוגיקה מותנית

על סמך ה-pathname של ה-URL, בדקו שערך העוגייה שווה ל-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];

אם ערך העוגייה אינו קיים, יהיה צורך להקצות אחד. צרו אחוז (מ-0 עד 99) באמצעות: Math.floor(Math.random() * 100). גרסת העוגייה שמוגדרת כברירת מחדל מקבלת את הערך current.

אם האחוז של המספר שנוצר נמוך מ-50, תקצו לגרסת העוגייה את הערך new. על סמך האחוז שנוצר באקראי, תגדירו את העוגייה ותגישו את הנכסים. אחרי בלוק התנאי, העבירו את הבקשה אל next(). פעולה זו תעביר את הבקשה אל Pages. התוצאה תהיה ש-50% מהמשתמשים יקבלו את דף הבית /test.

הפונקציה env.ASSETS.fetch() תאפשר לשלוח את המשתמש לנתיב ששונה, שמוגדר באמצעות הפרמטר url. env הוא האובייקט שמכיל את משתני הסביבה ואת ה-bindings. ASSETS הוא binding ברירת מחדל של Function, שמאפשר תקשורת בין ה-Function למשאב הגשת הנכסים של Pages. קריאות fetch() למשאב הגשת הנכסים של Pages מחזירות את הנכס (דף הבית /test) למבקר באתר.

Binding

Function הוא Worker שרץ בפרויקט Pages כדי להוסיף פונקציונליות דינמית. binding הוא האופן שבו ה-Function (Worker) מתקשר עם משאבים חיצוניים. binding הוא משתנה זמן ריצה, שסביבת הריצה של Workers מספקת לקוד.

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 = context.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];

#פריסה ל-Cloudflare Pages

אחרי שהגדרתם את הקובץ functions/_middleware.js בפרויקט, אפשר לפרוס עם Pages. דחפו את שינויי הפרויקט ל-GitHub/GitLab.

אחרי שפרסתם את היישום, סקרו את פונקציית ה-middleware:

1. בלוח הבקרה של Cloudflare, עברו אל הדף Workers & Pages. מעבר אל Workers & Pages ↗
2. בחרו את פרויקט Pages > Settings > Functions > Configuration.