ปรับแต่งประสบการณ์ของผู้ใช้สำหรับลูกค้าที่รู้จัก

ใช้ Worklet Shared Storage เพื่อระบุลูกค้าที่รู้จัก

Shared Storage API เป็นข้อเสนอ Privacy Sandbox สำหรับพื้นที่เก็บข้อมูลข้ามเว็บไซต์อเนกประสงค์ที่รองรับ Use Case หลายรายการ ตัวอย่างหนึ่งคือการระบุลูกค้าที่รู้จัก ซึ่งพร้อมให้ทดสอบใน Chrome 104.0.5086.0 ขึ้นไป

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

ตั้งค่าลูกค้าที่รู้จัก

หากต้องการทดสอบการระบุลูกค้าที่รู้จักใน Shared Storage โปรดตรวจสอบว่าคุณใช้ Chrome 104.0.5086.0 ขึ้นไป เปิดใช้ Ad Privacy API ทั้งหมดในส่วน chrome://settings/adPrivacy

นอกจากนี้ คุณยังเปิดใช้พื้นที่เก็บข้อมูลที่ใช้ร่วมกันได้ด้วย Flag --enable-features=PrivacySandboxAdsAPIsOverride,OverridePrivacySandboxSettingsLocalTesting,SharedStorageAPI,FencedFrames ในบรรทัดคำสั่ง

ทดลองใช้ตัวอย่างโค้ด

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

ในตัวอย่างนี้

  • known-customer.js ฝังอยู่ในเฟรม สคริปต์นี้จะตั้งค่าตัวเลือกสำหรับปุ่มที่ควรแสดงในเว็บไซต์ ซึ่งได้แก่ "ลงทะเบียน" หรือ "ซื้อเลย"
  • known-customer-worklet.js คือเวิร์กเลตพื้นที่เก็บข้อมูลที่ใช้ร่วมกันซึ่งจะระบุว่าผู้ใช้เป็นที่รู้จักหรือไม่ หากรู้จักผู้ใช้ ระบบจะแสดงข้อมูล หากไม่รู้จักผู้ใช้ ระบบจะแสดงข้อมูลดังกล่าวเพื่อแสดงปุ่ม "ลงทะเบียน" และทําเครื่องหมายผู้ใช้ว่ารู้จักไว้ใช้ในอนาคต

known-customer.js

// The first URL for the "register" button is rendered for unknown users.
const BUTTON_URLS = [
  { url: `https://${advertiserUrl}/ads/register-button.html` },
  { url: `https://${advertiserUrl}/ads/buy-now-button.html` },
];

async function injectButton() {
  // Load the worklet module
  await window.sharedStorage.worklet.addModule('known-customer-worklet.js');

  // Set the initial status to unknown ('0' is unknown and '1' is known)
  window.sharedStorage.set('known-customer', 0, {
    ignoreIfPresent: true,
  });

  // Run the URL selection operation to choose the button based on the user status
  const fencedFrameConfig = await window.sharedStorage.selectURL('known-customer', BUTTON_URLS, {
    resolveToConfig: true
  });

  // Render the opaque URL into a fenced frame
  document.getElementById('button-slot').src = fencedFrameConfig;
}

injectButton();

known-customer-worklet.js

class SelectURLOperation {
  async run(urls) {
    const knownCustomer = await sharedStorage.get('known-customer');

    // '0' is unknown and '1' is known
    return parseInt(knownCustomer);
  }
}

register('known-customer', SelectURLOperation);

Use cases

All available use cases for Select URL API can be found in this section. We'll continue to add examples as we receive feedback and discover new test cases.

มีส่วนร่วมและแชร์ความคิดเห็น

โปรดทราบว่าข้อเสนอ Select URL API อยู่ระหว่างการพูดคุยและการพัฒนาอย่างต่อเนื่อง และอาจมีการเปลี่ยนแปลง

เราอยากฟังความคิดเห็นของคุณเกี่ยวกับ Select URL API

ติดตามข้อมูลอยู่เสมอ

  • รายชื่ออีเมล: สมัครรับอีเมลจากรายชื่ออีเมลของเราเพื่อรับข้อมูลอัปเดตและการประกาศล่าสุดเกี่ยวกับ Select URL และ Shared Storage API

หากต้องการความช่วยเหลือ