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

ใช้ 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);

กรณีการใช้งาน

กรณีการใช้งานทั้งหมดที่ใช้ได้กับ Select URL API จะอยู่ในส่วนนี้ เราจะเพิ่มตัวอย่างอย่างต่อเนื่องเมื่อได้รับความคิดเห็นและค้นพบกรณีทดสอบใหม่ๆ

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

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

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

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

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

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