หมุนเวียนครีเอทีฟโฆษณาด้วย 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"

   
   

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

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

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

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

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

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

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