หมุนเวียนครีเอทีฟโฆษณาด้วย 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) ที่กําหนดเองตามสถานะการลงทะเบียนของผู้ใช้หรือสถานะอื่นๆ ของผู้ใช้

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

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

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

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