เลือกครีเอทีฟโฆษณาตามความถี่

เรียกใช้ Worklet Shared Storage เพื่อเลือก URL และแสดงผลใน Fenced Frame

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

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

ทดสอบการเลือกครีเอทีฟโฆษณาตามความถี่

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

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

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

หากต้องการเลือกและสร้าง URL ที่ไม่โปร่งใส ให้ลงทะเบียนโมดูล Worklet เพื่ออ่านข้อมูลที่แชร์ ในพื้นที่เก็บข้อมูลที่แชร์ คลาส Worklet จะรับรายการ URL สูงสุด 8 รายการ แล้ว ส่งคืนดัชนีของ URL ที่เลือก

เมื่อไคลเอ็นต์เรียกใช้ sharedStorage.selectURL() เวิร์กเล็ตจะ ดำเนินการและแสดงผล URL ที่ทึบแสงเพื่อแสดงผลในเฟรมที่จำกัด

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

จากนั้น Worklet ของพื้นที่เก็บข้อมูลที่ใช้ร่วมกันจะอ่านค่าในพื้นที่เก็บข้อมูลที่ใช้ร่วมกัน และเพิ่มตัวนับเมื่อมีการดูเพิ่มเติมแต่ละครั้ง หากจำนวนยังไม่ถึงขีดจำกัดที่กำหนดไว้ล่วงหน้า ระบบจะแสดงเนื้อหาที่คุณต้องการแสดง (ดัชนี 1) หากไม่เป็นเช่นนั้น ระบบจะแสดง URL เริ่มต้น (ดัชนี 0)

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

• creative-selection-by-frequencyjs โหลดผ่าน iframe ของผู้ผลิตเนื้อหาหรือผู้ลงโฆษณา และมีหน้าที่ โหลด Worklet ของพื้นที่เก็บข้อมูลที่ใช้ร่วมกัน และแสดงผลแหล่งที่มาแบบทึบที่ส่งคืน ใน Fenced Frame
• creative-selection-by-frequency-worklet.js คือ Worklet ของพื้นที่เก็บข้อมูลที่ใช้ร่วมกันซึ่งอ่าน จำนวนความถี่เพื่อกำหนด URL ที่จะแสดงสำหรับเนื้อหาหรือครีเอทีฟโฆษณา

creative-selection-by-frequency.js

// The first URL is the default content or ad to be rendered when the frequency limits reached.
const CONTENT_URLS = [
  { url: `https://${contentProducerUrl}/default-content.html` },
  { url: `https://${contentProducerUrl}/example-content.html` },
];

async function injectAd() {
  // Load the worklet module.
  await window.sharedStorage.worklet.addModule('creative-selection-by-frequency-worklet.js');

  // Set the initial frequency count
  window.sharedStorage.set('frequency-count', 0, {
    ignoreIfPresent: true,
  });

  // Run the URL selection operation to choose an ad based on the frequency count in shared storage.
  const fencedFrameConfig = await window.sharedStorage.selectURL('creative-selection-by-frequency', CONTENT_URLS, {
    resolveToConfig: true
  });

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

injectAd();

creative-selection-by-frequency-worklet.js

const FREQUENCY_LIMIT = 5;

class CreativeSelectionByFrequencyOperation {
  async run(urls, data) {
    // Read the current frequency limit in shared storage
    const count = parseInt(await sharedStorage.get('frequency-count'));

    // Check if the frequency limit has been reached.
    if (count === FREQUENCY_LIMIT) {
      console.log('Frequency limit has been reached, and the default content will be rendered.');
      return 0;
    }

    // Set the new frequency count in shared storage
    await sharedStorage.set('frequency-count', count + 1);
    return 1;
  }
}

// Register the operation as 'creative-selection-by-frequency'.
register('creative-selection-by-frequency', CreativeSelectionByFrequencyOperation);

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.