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

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

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

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

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

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

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

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

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

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

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

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.

• Rotate ad creatives: Store data, such as creative ID and user interaction, to determine which creative users' see across different sites.
• Select ad creatives by frequency: Use view count data to determine which creative users' see across different sites.
• Run A/B testing: You can assign a user to an experiment group, then store that group in Shared Storage to be accessed cross-site.
• Customize experience for known customers: Share custom content and calls-to-action based on a user's registration status or other user states.

Engage and share feedback

Note that the Select URL API proposal is under active discussion and development and subject to change.

We're eager to hear your thoughts on the Select URL API.

• Proposal: Review the detailed proposal.
• Discussion: Join the ongoing discussion to ask questions and share your insights.