Feature flags ใน Web SDK

Pushwoosh.featureFlags มอบ feature flags ที่กำหนดค่าไว้สำหรับแอปพลิเคชันใน Control Panel ให้กับเว็บไซต์ของคุณ Pushwoosh จะประเมินกฎของ flag บนเซิร์ฟเวอร์สำหรับอุปกรณ์และผู้ใช้ปัจจุบัน แล้ว SDK จะส่งคืนผลลัพธ์ว่า flag เปิดอยู่สำหรับผู้เยี่ยมชมรายนี้หรือไม่ และใช้ค่าพร็อพเพอร์ตีใดบ้าง

ฟีเจอร์เบต้า

Feature flags อยู่ในช่วงเบต้าและใช้งานได้เฉพาะในแพ็กเกจที่รวมฟีเจอร์นี้ไว้เท่านั้น ในแพ็กเกจอื่น เซิร์ฟเวอร์จะไม่ส่งคืน flag ใดเลย ดังนั้นทุก flag จะใช้ค่าเริ่มต้นที่คุณส่งไว้ในโค้ด

ข้อกำหนดเบื้องต้น

• Web SDK 3.94.1 ขึ้นไป ที่โหลดจาก CDN ของ Pushwoosh ตามที่อธิบายไว้ในคู่มือ Web SDK 3.0 หรือ แพ็กเกจ npm web-push-notifications 3.95.0 ขึ้นไป
• มี flag อย่างน้อยหนึ่งรายการที่สร้างไว้ใน Audience → Feature Flags คุณต้องใช้ Key ของ flag นั้น รวมถึงคีย์และประเภทของพร็อพเพอร์ตี ใช้คีย์ให้ตรงตามที่แสดงไว้ทุกประการ รวมถึงตัวพิมพ์เล็กและพิมพ์ใหญ่ ตัวอย่างเช่น get('New_Checkout') จะไม่พบ flag ที่มีคีย์ new_checkout

อ่าน flag

อ่าน flag หลังจากที่ SDK พร้อมแล้ว ส่งค่าเริ่มต้นทุกครั้ง โดยค่านี้จะมีผลจนกว่า SDK จะได้รับ flag สำหรับหน้านั้น และมีผลทุกครั้งที่ flag ไม่มีอยู่ ถูกเก็บถาวร หรือแพ็กเกจไม่รวม feature flags

Pushwoosh.push(() => {
  const flags = Pushwoosh.featureFlags;

  const render = () => {
    const checkout = flags.get('new_checkout');
    if (checkout && checkout.enabled) {
      showNewCheckout({
        buttonColor: checkout.getString('button_color', 'blue'),
        maxItems: checkout.getNumber('max_items', 3),
      });
    } else {
      showOldCheckout();
    }
  };

  render();
  flags.addUpdateListener(render);
});

เมื่อใช้แพ็กเกจ npm ให้ใช้อินสแตนซ์ Pushwoosh ที่คุณสร้างไว้:

import { Pushwoosh } from 'web-push-notifications';

const pushwoosh = new Pushwoosh();
pushwoosh.push(['init', { applicationCode: 'XXXXX-XXXXX' /* ... */ }]);

pushwoosh.push(() => {
  const isNewCheckout = pushwoosh.featureFlags.isEnabled('new_checkout', false);
  // ...
});

SDK จะไม่ส่งคำขอ flag ใดๆ บนหน้าจนกว่าโค้ดของคุณจะเรียก get(), isEnabled(), refresh() หรือ addUpdateListener() เป็นครั้งแรก ดังนั้นหน้าที่ไม่ได้ใช้ flag จะไม่สร้างทราฟฟิกเพิ่มเติม

สิ่งที่ flag ส่งคืน

get(key) จะส่งคืนออบเจ็กต์ FeatureFlag หรือ null เมื่อ SDK ยังไม่มี flag สำหรับหน้านั้น หรือ flag ไม่อยู่ในคำตอบ flag ที่ถูกเก็บถาวรจะไม่อยู่ในคำตอบ ออบเจ็กต์มีฟิลด์ดังนี้:

ฟิลด์	ประเภท	คำอธิบาย
key	string	คีย์ของ flag
enabled	boolean	flag เปิดอยู่สำหรับผู้เยี่ยมชมรายนี้หรือไม่
ruleId	string	กฎที่ตัดสินผลลัพธ์ เช่น r_1a2b3c4d เป็น default เมื่อไม่มีกฎใดตรงกับผู้เยี่ยมชม และเป็นสตริงว่างเมื่อ flag ถูก kill

อ่านค่าพร็อพเพอร์ตีด้วย getter ที่ตรงกับประเภทของพร็อพเพอร์ตี getter แต่ละตัวจะส่งคืนค่าเริ่มต้นของคุณเมื่อไม่มีพร็อพเพอร์ตีนั้น หรือพร็อพเพอร์ตีมีค่าเป็นประเภทอื่น เมื่อ flag ปิดอยู่ พร็อพเพอร์ตีจะมีค่าเริ่มต้นที่ตั้งไว้ใน Control Panel

เมธอด	ส่งคืน
getString(property, defaultValue)	ค่าของพร็อพเพอร์ตีประเภท String
getNumber(property, defaultValue)	ค่าของพร็อพเพอร์ตีประเภท Number
getBool(property, defaultValue)	ค่าของพร็อพเพอร์ตีประเภท Boolean
getJson(property, defaultValue)	ค่าของพร็อพเพอร์ตีประเภท JSON ในรูปแบบค่า JSON ที่แยกวิเคราะห์แล้ว
getProperties()	สำเนาของค่าพร็อพเพอร์ตีทั้งหมดของ flag

isEnabled(key, defaultValue) เป็นทางลัดของ get(key)?.enabled ซึ่งจะส่งคืน defaultValue เมื่อไม่มี flag

ทำให้ flag เป็นปัจจุบันอยู่เสมอ

SDK จะจัดเก็บคำตอบล่าสุดไว้ใน IndexedDB ของเบราว์เซอร์นานสูงสุด 24 ชั่วโมง flag ที่จัดเก็บไว้จะใช้ได้เฉพาะกับ User ID ที่ใช้ขอ flag เหล่านั้นเท่านั้น SDK จะรีเฟรช flag ในกรณีต่อไปนี้:

• เมื่อใช้งานครั้งแรกบนหน้า หาก flag ที่จัดเก็บไว้มีอายุเกิน 15 นาทีหรือไม่มีอยู่
• ทุกชั่วโมงขณะที่หน้ายังเปิดอยู่
• หลังจากอุปกรณ์ลงทะเบียน หาก flag ถูกขอไว้ก่อนการลงทะเบียน
• ทันทีหลังจาก User ID เปลี่ยน flag ที่จัดเก็บไว้ของผู้ใช้ก่อนหน้าจะถูกทิ้ง ดังนั้นผู้ใช้ใหม่จะไม่เห็น flag เหล่านั้นเลย

หากต้องการตอบสนองต่อค่าใหม่ ให้ลงทะเบียน listener ซึ่งจะถูกเรียกหลังจากการรีเฟรชที่ทำให้ค่าของ flag ใดๆ เปลี่ยนไป:

const onFlagsChanged = () => render();
Pushwoosh.featureFlags.addUpdateListener(onFlagsChanged);
// later
Pushwoosh.featureFlags.removeUpdateListener(onFlagsChanged);

หากต้องการขอ flag ด้วยตัวเอง เช่น หลังจากการกระทำที่อาจทำให้ผู้เยี่ยมชมย้ายไปอยู่ใน Segment อื่น ให้เรียก refresh() ขณะที่ flag ที่จัดเก็บไว้ยังใช้ได้ เมธอดนี้จะส่งคำขอได้สูงสุดหนึ่งครั้งต่อ 5 นาที และจะ resolve ทันทีภายในช่วงเวลานั้น promise จะถูก reject เมื่อคำขอล้มเหลว และ flag ที่จัดเก็บไว้จะยังคงถูกใช้งานต่อไป

try {
  await Pushwoosh.featureFlags.refresh();
} catch (error) {
  // the stored flags, or your defaults, stay in effect
}
render();

หาก Pushwoosh ไม่สามารถจับคู่ Segment ของผู้เยี่ยมชมได้ทันเวลา ระบบจะส่งคืนคำตอบบางส่วน SDK จะใช้คำตอบนี้เฉพาะบนหน้าปัจจุบัน เฉพาะเมื่อไม่มี flag ที่จัดเก็บไว้ที่ยังใช้ได้ และจะไม่จัดเก็บคำตอบนี้เลย การรีเฟรชครั้งถัดไปจะนำคำตอบฉบับสมบูรณ์มาให้

เมื่อ flag ถูก kill ใน Control Panel ผู้เยี่ยมชมจะได้รับ flag นั้นในสถานะปิดพร้อมค่าพร็อพเพอร์ตีเริ่มต้นในการรีเฟรชครั้งถัดไป เมื่อ SDK ไม่สามารถเชื่อมต่อกับเซิร์ฟเวอร์ได้ ก็จะใช้ flag ที่จัดเก็บไว้ต่อไปจนกว่าจะมีอายุครบ 24 ชั่วโมง และหลังจากนั้นจะใช้ค่าเริ่มต้นของคุณ

บันทึก impression

impression จะแจ้ง Pushwoosh ว่าผู้เยี่ยมชมเข้าถึงโค้ดที่ flag ควบคุมจริง เพื่อให้คุณเปรียบเทียบผู้เยี่ยมชมที่ได้รับฟีเจอร์กับผู้ที่ไม่ได้รับได้ เรียก logImpression(key) ในขณะที่ผู้เยี่ยมชมเห็นฟีเจอร์หรือเวอร์ชันเก่าของฟีเจอร์ ทั้งในสาขาที่เปิดและสาขาที่ปิด เพราะผู้เยี่ยมชมที่ flag ปิดอยู่คือกลุ่มเปรียบเทียบของคุณ:

const checkout = Pushwoosh.featureFlags.get('new_checkout');
if (checkout) {
  Pushwoosh.featureFlags.logImpression('new_checkout');
}

SDK จะส่ง Event PW_FeatureFlagImpression พร้อมแอตทริบิวต์ต่อไปนี้:

แอตทริบิวต์	ประเภท	ค่า
flag_key	string	คีย์ของ flag
rule_id	string	กฎที่ตัดสินผลลัพธ์ เช่นเดียวกับใน ruleId
enabled	boolean	flag เปิดอยู่หรือไม่

คุณไม่จำเป็นต้องสร้าง Event ไว้ล่วงหน้า เพราะ Pushwoosh จะเพิ่ม PW_FeatureFlagImpression พร้อมแอตทริบิวต์เหล่านี้ลงใน Audience → Events เมื่อ impression แรกมาถึง SDK จะส่ง impression หนึ่งครั้งต่อ flag กฎ และสถานะบนหน้า และจะข้ามรายการซ้ำจากแท็บอื่นของเบราว์เซอร์เดียวกันเป็นเวลา 30 นาที logImpression() จะไม่ reject และจะไม่ส่งอะไรเลยเมื่อไม่มี flag สำหรับคีย์นั้น

Impression ยังช่วยให้นักการตลาดสร้างเซกเมนต์ของผู้เยี่ยมชมที่เข้าถึงฟีเจอร์ได้ด้วย โดยใช้สถานะ เห็นฟีเจอร์ (30 วัน) ของเงื่อนไข feature flag

ข้อมูลอ้างอิงเมธอด

Pushwoosh.featureFlags มีเมธอดดังนี้:

เมธอด	คำอธิบาย
get(key)	ส่งคืน FeatureFlag สำหรับคีย์ หรือ null อ่านเฉพาะ flag ที่จัดเก็บไว้และไม่รอเครือข่ายเลย
isEnabled(key, defaultValue)	ส่งคืนว่า flag เปิดอยู่หรือไม่ หรือ defaultValue เมื่อไม่มี flag
refresh()	ขอ flag โดยจำกัดไว้ที่หนึ่งครั้งต่อ 5 นาทีขณะที่ flag ที่จัดเก็บไว้ยังใช้ได้ ส่งคืน promise
addUpdateListener(listener)	เรียก listener หลังจากการรีเฟรชทุกครั้งที่ทำให้ค่าของ flag เปลี่ยนไป
removeUpdateListener(listener)	ลบ listener ที่เพิ่มไว้ด้วย addUpdateListener
logImpression(key)	ส่ง Event PW_FeatureFlagImpression สำหรับกฎและสถานะปัจจุบันของ flag ส่งคืน promise