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

ใช้ 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.

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

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

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

• ข้อเสนอ: ดูข้อเสนอแบบละเอียด
• การสนทนา: เข้าร่วมการสนทนาที่ดำเนินอยู่เพื่อถามคำถามและแชร์ข้อมูลเชิงลึก