หมุนเวียนครีเอทีฟโฆษณาด้วย Select URL API

ใช้ Select URL API เพื่อใช้ประโยชน์จากพื้นที่เก็บข้อมูลส่วนกลางเพื่อกําหนดว่าผู้ใช้จะเห็นครีเอทีฟโฆษณาใดในเว็บไซต์ต่างๆ

ผู้ลงโฆษณาหรือผู้ผลิตเนื้อหาอาจต้องการใช้กลยุทธ์การหมุนเวียนเนื้อหาที่แตกต่างกันกับแคมเปญ และเปลี่ยนเนื้อหาหรือครีเอทีฟโฆษณาเพื่อเพิ่มประสิทธิภาพ คุณสามารถใช้ Select URL API เพื่อเรียกใช้กลยุทธ์การหมุนเวียนที่แตกต่างกันในเว็บไซต์ต่างๆ เช่น การหมุนเวียนตามลําดับและการหมุนเวียนแบบกระจายอย่างสม่ำเสมอ

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับ API พื้นฐานและวิธีการทํางานของการเลือกได้ที่ดูเอกสารประกอบของ Select URL API

ลองใช้การหมุนเวียนครีเอทีฟโฆษณา

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

• ใน chrome://settings/content/siteData ให้เลือก Allow sites to save data on your device หรือ Delete data sites have saved to your device when you close all windows
• เลือก Site-suggested ads ใน chrome://settings/adPrivacy/sites

ลองใช้การสาธิต Shared Storage แบบเรียลไทม์เพื่อดูตัวอย่างโค้ดในเอกสารนี้ในเวอร์ชันที่ใช้จริง

การสาธิตพร้อมตัวอย่างโค้ด

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

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

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

วิธีการทํางานของเดโม

1. เมื่อผู้ใช้เข้าชมหน้าผู้เผยแพร่โฆษณา หน้าเว็บจะโหลดสคริปต์ creative-rotation.js ของบุคคลที่สาม สคริปต์การหมุนเวียนครีเอทีฟโฆษณามีหน้าที่รับผิดชอบในการโหลดและเรียกใช้เวิร์กเลตพื้นที่เก็บข้อมูลที่ใช้ร่วมกัน สคริปต์จะระบุรายการ URL ให้เลือกให้กับการเรียกใช้ชิ้นงาน
2. ในชิ้นงาน หากยังไม่ได้เริ่มต้น Shared Storage ระบบจะเริ่มต้นพื้นที่เก็บข้อมูลด้วยกลยุทธ์การหมุนเวียนครีเอทีฟโฆษณาเริ่มต้นและดัชนีครีเอทีฟโฆษณา กลยุทธ์การหมุนเวียนเริ่มต้นที่ใช้ในเดโมนี้คือกลยุทธ์ตามลําดับ
3. Worklet จะอ่านโหมดการหมุนเวียนจากพื้นที่เก็บข้อมูลที่แชร์และแสดงผลลัพธ์ของดัชนีโฆษณาถัดไป ในกรณีที่ใช้โหมดการหมุนตามลำดับ ระบบจะอัปเดตดัชนีครีเอทีฟโฆษณาในพื้นที่เก็บข้อมูลที่ใช้ร่วมกันด้วยค่าใหม่ที่จะใช้สำหรับการเรียกใช้ครั้งถัดไป นอกจากนี้ เวิร์กเลตจะแสดงผลออบเจ็กต์ FencedFrameConfig หรือ URN แบบทึบตามค่า resolveToConfig ที่ใช้เมื่อเรียกใช้ selectURL
4. สคริปต์การหมุนเวียนครีเอทีฟโฆษณาจะแสดงโฆษณาที่เลือกในเฟรมที่มีรั้วล้อมหรือ iFrame ดูรายละเอียดเกี่ยวกับประเภทผลลัพธ์ได้ที่แสดงผลเอกสารโฆษณา
5. เมื่อผู้ใช้เปลี่ยนโหมดการหมุน เวิร์กเลตพื้นที่เก็บข้อมูลที่ใช้ร่วมกันจะอัปเดตค่าโหมดการหมุนครีเอทีฟโฆษณาที่จัดเก็บไว้ในพื้นที่เก็บข้อมูลที่ใช้ร่วมกัน
6. เมื่อโหลดหน้าผู้เผยแพร่โฆษณาซ้ำ ระบบจะทําขั้นตอนที่ 1-4 ซ้ำเพื่อให้เลือกโฆษณาถัดไปที่จะแสดงตามกลยุทธ์การหมุนเวียนที่เลือก

ตัวอย่างโค้ด

ต่อไปนี้คือตัวอย่างโค้ดสําหรับ creative-rotation.js และ creative-rotation-worklet.js

creative-rotation.js

const contentProducerUrl = 'https://your-server.example';

// Ad config with the URL of the ad, a probability weight for rotation, and the clickthrough rate.
const DEMO_AD_CONFIG = [
  {
    url: `${contentProducerUrl}/ads/ad-1.html`,
    weight: 0.7,
  },
  {
    url: `${contentProducerUrl}/ads/ad-2.html`,
    weight: 0.2,
  },
  {
    url: `${contentProducerUrl}/ads/ad-3.html`,
    weight: 0.1,
  },
];

async function setRotationMode(rotationMode) {
  // Load the worklet module
  const creativeRotationWorklet = await window.sharedStorage.createWorklet(
    `${contentProducerUrl}/url-selection/creative-rotation-worklet.js`,
    { dataOrigin: 'script-origin' }
  );

  await creativeRotationWorklet.run('set-rotation-mode', {
    data: { rotationMode }
  });
  console.log(`creative rotation mode set to ${rotationMode}`);
}

async function injectAd() {
  // Load the worklet module
  const creativeRotationWorklet = await window.sharedStorage.createWorklet(
    `${contentProducerUrl}/url-selection/creative-rotation-worklet.js`,
    { dataOrigin: 'script-origin' }
  );

  const urls = DEMO_AD_CONFIG.map(({ url }) => ({ url }));

  // Resolve the selectURL call to a fenced frame config only when it exists on the page
  const resolveToConfig = typeof window.FencedFrameConfig !== 'undefined';

  // Run the URL selection operation to determine the next ad that should be rendered
  const selectedUrl = await creativeRotationWorklet.selectURL('creative-rotation', urls, {
    data: DEMO_AD_CONFIG,
    resolveToConfig
  });

  const adSlot = document.getElementById('ad-slot');

  if (resolveToConfig && selectedUrl instanceof FencedFrameConfig) {
    adSlot.config = selectedUrl;
  } else {
    adSlot.src = selectedUrl;
  }
}

injectAd();

creative-rotation-worklet.js

class SelectURLOperation {
  async run(urls, data) {
    // Initially set the storage to sequential mode for the demo
    await SelectURLOperation.seedStorage();

    // Read the rotation mode from Shared Storage
    const rotationMode = await sharedStorage.get('creative-rotation-mode');

    // Generate a random number to be used for rotation
    const randomNumber = Math.random();

    let index;

    switch (rotationMode) {
      /**
       * Sequential rotation
       * - Rotates the creatives in order
       * - Example: A -> B -> C -> A ...
       */
      case 'sequential':
        const currentIndex = await sharedStorage.get('creative-rotation-index');
        index = parseInt(currentIndex, 10);
        const nextIndex = (index + 1) % urls.length;

        console.log(`index = ${index} / next index = ${nextIndex}`);

        await sharedStorage.set('creative-rotation-index', nextIndex.toString());
        break;

      /**
       * Evenly-distributed rotation
       * - Rotates the creatives with equal probability
       * - Example: A=33% / B=33% / C=33%
       */
      case 'even-distribution':
        index = Math.floor(randomNumber * urls.length);
        break;

      /**
       * Weighted rotation
       * - Rotates the creatives with weighted probability
       * - Example: A=70% / B=20% / C=10%
       */
      case 'weighted-distribution':
        console.log('data = ', JSON.stringify(data));
        // Find the first URL where the cumnulative sum of the weights
        // exceed the random number. The array is sorted by the weight
        // in descending order.
        let weightSum = 0;
        const { url } = data
          .sort((a, b) => b.weight - a.weight)
          .find(({ weight }) => {
            weightSum += weight;
            return weightSum > randomNumber;
          });

        index = urls.indexOf(url);
        break;

      default:
        index = 0;
    }

    console.log(JSON.stringify({ index, randomNumber, rotationMode }));
    return index;
  }

  // Set the mode to sequential and set the starting index to 0.
  static async seedStorage() {
    await sharedStorage.set('creative-rotation-mode', 'sequential', {
      ignoreIfPresent: true,
    });

    await sharedStorage.set('creative-rotation-index', 0, {
      ignoreIfPresent: true,
    });
  }
}

class SetRotationModeOperation {
  async run({ rotationMode }) {
    await sharedStorage.set('creative-rotation-mode', rotationMode);
  }
}

// Register the operation as 'creative-rotation'
register('creative-rotation', SelectURLOperation);
register('set-rotation-mode', SetRotationModeOperation);

คำแนะนำแบบทีละขั้นตอนพร้อมภาพหน้าจอ

1. หากต้องการเข้าถึงการหมุนเวียนครีเอทีฟโฆษณาโดยใช้ Select URL API และพื้นที่เก็บข้อมูลที่ใช้ร่วมกัน ให้ไปที่ https://shared-storage-demo.web.app/ เลือกการสาธิต "การหมุนเวียนครีเอทีฟโฆษณา"

2. เลือกดูการสาธิตในฐานะ "ผู้เผยแพร่โฆษณา ก" ระบบจะเปลี่ยนเส้นทางคุณไปยัง https://shared-storage-demo-publisher-a.web.app/creative-rotation หน้าเว็บจะโหลดเนื้อหาที่มีหมายเลขตามข้อมูลการหมุนเวียนครีเอทีฟโฆษณาที่บันทึกไว้ในพื้นที่เก็บข้อมูลที่ใช้ร่วมกัน ซึ่งเข้าถึงได้ผ่าน Select URL API โหมดเดโมสําหรับการหมุนเวียนครีเอทีฟโฆษณา ได้แก่ การหมุนเวียนตามลําดับ การกระจายแบบสม่ำเสมอ และการกระจายแบบถ่วงน้ำหนัก เวิร์กเลตจะเรียกใช้ตรรกะเพื่อเลือกเนื้อหาที่ปรากฏใน iframe รูปภาพต่อไปนี้แสดงหน้าผู้เผยแพร่โฆษณา

   
   

3. หากต้องการดูสิ่งที่จัดเก็บไว้ใน Shared Storage ให้ไปที่แอปพลิเคชัน -> Shared Storage ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome ระบบจะสร้างรายการ 2 รายการสำหรับพื้นที่เก็บข้อมูลที่ใช้ร่วมกัน พื้นที่เก็บข้อมูลว่างพร้อมใช้งานสำหรับต้นทาง https://shared-storage-demo-publisher-a.web.app ข้อมูลนี้จะมีพื้นที่เก็บข้อมูลที่เจาะจงสำหรับต้นทางนั้นๆ และจะยังคงว่างเปล่าสำหรับข้อมูลเดโมของเรา เนื่องจากผู้เผยแพร่โฆษณาไม่จำเป็นต้องเขียนลงในพื้นที่เก็บข้อมูลที่ใช้ร่วมกัน โปรดทราบว่าระบบจะสร้างพื้นที่เก็บข้อมูลที่คล้ายกันสําหรับผู้เผยแพร่โฆษณา ข เมื่อคุณเข้าชมหน้านั้นในภายหลังเพื่อดูการสาธิต

   
   

4. ระบบจะสร้างรายการ Shared Storage รายการอื่นสำหรับต้นทาง https://shared-storage-demo-content-producer.web.app นี่คือพื้นที่เก็บข้อมูลของ iframe ของบุคคลที่สามที่ฝังอยู่ในหน้าผู้เผยแพร่โฆษณา ระบบจะใช้พื้นที่เก็บข้อมูลนี้เพื่อแชร์ข้อมูลระหว่างผู้เผยแพร่โฆษณา 2 รายที่มีให้ใช้งานเพื่อประสานการเลือกครีเอทีฟโฆษณา ระบบจะใช้พื้นที่เก็บข้อมูลที่ใช้ร่วมกันนี้เพื่อบันทึกข้อมูลเกี่ยวกับครีเอทีฟโฆษณาที่แสดงและกลยุทธ์การหมุนเวียนโดยบันทึกคู่คีย์-ค่า 2 รายการ คีย์แรกที่ใช้ในเดโมคือ creative-rotation-index ซึ่งมีค่าเป็นดัชนีครีเอทีฟโฆษณาปัจจุบันในโหมดตามลําดับ คีย์ที่ 2 คือ creative-rotation-mode ซึ่งกำหนดกลยุทธ์การหมุนเวียนที่ใช้

   
   

5. การรีเฟรชหน้าเว็บขณะอยู่ในโหมดตามลําดับจะส่งผลให้ระบบแสดงครีเอทีฟโฆษณาถัดไปตามลําดับ 1, 2, 3, 1, … ค่าสําหรับคีย์ creative-rotation-index จะเปลี่ยนแปลงตามดัชนีของครีเอทีฟโฆษณาที่แสดงขณะอยู่ในโหมดตามลําดับ

   
   

6. การเปลี่ยนโหมดการหมุนครีเอทีฟโฆษณาโดยใช้ปุ่มควบคุมจะอัปเดตค่าสําหรับคีย์ creative-rotation-mode ลงในกลยุทธ์ที่เกี่ยวข้อง โค้ดชิ้นงานจะใช้ข้อมูลนี้เพื่อเลือกครีเอทีฟโฆษณารายการถัดไปที่จะแสดงใน iframe โปรดทราบว่าค่าที่บันทึกไว้สําหรับ creative-rotation-index จะไม่เปลี่ยนแปลงสําหรับโหมดการหมุนอื่นที่ไม่ใช่แบบตามลําดับ

   
   

7. ไปที่หน้าสําหรับ "ผู้เผยแพร่โฆษณา ข" ที่ https://shared-storage-demo-publisher-b.web.app/creative-rotation ในโหมดตามลําดับ ครีเอทีฟโฆษณาที่แสดงควรเป็นครีเอทีฟโฆษณาถัดไปในลําดับที่แสดงเมื่อเข้าชม URL สําหรับ "ผู้เผยแพร่โฆษณา ก" เมื่อตรวจสอบพื้นที่เก็บข้อมูลที่ใช้ร่วมกันสำหรับผู้ผลิตเนื้อหา คุณจะเห็นทั้ง "ผู้เผยแพร่โฆษณา ก" และ "ผู้เผยแพร่โฆษณา ข" ใช้พื้นที่เก็บข้อมูลเดียวกันและใช้การตั้งค่าในนั้นเพื่อเลือกครีเอทีฟโฆษณาที่จะแสดงถัดไปและกลยุทธ์การหมุนเวียนที่จะใช้

   
   

8. พื้นที่เก็บข้อมูลที่ใช้ร่วมกันของ "ผู้เผยแพร่โฆษณา ข" ว่างเปล่า คล้ายกับพื้นที่เก็บข้อมูลที่ใช้ร่วมกันของ "ผู้เผยแพร่โฆษณา ก"

   
   

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

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

   • หมุนเวียนครีเอทีฟโฆษณา: จัดเก็บข้อมูล เช่น รหัสครีเอทีฟโฆษณาและการโต้ตอบของผู้ใช้ เพื่อระบุครีเอทีฟโฆษณาที่ผู้ใช้เห็นในเว็บไซต์ต่างๆ
   • เลือกครีเอทีฟโฆษณาตามความถี่: ใช้ข้อมูลจํานวนการดูเพื่อกําหนดครีเอทีฟโฆษณาที่ผู้ใช้เห็นในเว็บไซต์ต่างๆ
   • เรียกใช้การทดสอบ A/B: คุณสามารถกําหนดผู้ใช้ให้อยู่ในกลุ่มทดสอบ จากนั้นจัดเก็บกลุ่มนั้นไว้ในพื้นที่เก็บข้อมูลส่วนกลางเพื่อให้เข้าถึงได้ข้ามเว็บไซต์
   • ปรับแต่งประสบการณ์การใช้งานสำหรับลูกค้าที่รู้จัก: แชร์เนื้อหาและคำกระตุ้นให้ดำเนินการ (Call-To-Action) ที่กําหนดเองตามสถานะการลงทะเบียนของผู้ใช้หรือสถานะอื่นๆ ของผู้ใช้

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.

Stay Informed

• Mailing List: Subscribe to our mailing list for the latest updates and announcements related to the Select URL and Shared Storage APIs.

Need Help?

• Developer Support: Connect with other developers and get answers to your questions in the Privacy Sandbox Developer Support repository.