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

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

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

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

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

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

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

• ใน 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
• ใน chrome://settings/adPrivacy/sites ให้เลือก Site-suggested ads

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

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

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

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

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

วิธีการทำงานของการสาธิต

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

   
   

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

   
   

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. การเปลี่ยนโหมดการหมุนเวียนครีเอทีฟโฆษณาโดยใช้ปุ่มควบคุมจะอัปเดตค่าสำหรับ key creative-rotation-mode เป็นกลยุทธ์ที่เกี่ยวข้อง โค้ด Worklet จะใช้ค่านี้เพื่อเลือกครีเอทีฟโฆษณาถัดไปที่จะแสดงใน iframe โปรดทราบว่าค่าที่บันทึกไว้สำหรับ creative-rotation-index จะไม่เปลี่ยนแปลงสำหรับโหมดการหมุนเวียนอื่นๆ นอกเหนือจากโหมดตามลำดับ

   
   

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

   
   

8. Shared Storage สำหรับ "ผู้เผยแพร่โฆษณา B" จะว่างเปล่าเช่นเดียวกับ Shared Storage ของ "ผู้เผยแพร่โฆษณา A"

   
   

   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.