خلاقیت های تبلیغاتی را با انتخاب URL API بچرخانید

از API انتخاب URL برای بهره‌گیری از فضای ذخیره‌سازی مشترک استفاده کنید تا مشخص شود کاربر چه محتوای خلاقانه‌ای را در سایت‌ها می‌بیند.

یک تبلیغ‌کننده یا تولیدکننده محتوا ممکن است بخواهد استراتژی‌های مختلف چرخش محتوا را در یک کمپین اعمال کند و محتوا یا خلاقیت‌ها را برای افزایش اثربخشی بچرخاند. API Select URL می‌تواند برای اجرای استراتژی‌های مختلف چرخش، مانند چرخش متوالی و چرخش با توزیع یکنواخت، در سایت‌های مختلف استفاده شود.

با استفاده از Select URL API برای چرخش خلاقانه، می‌توانید داده‌هایی مانند شناسه خلاقانه، تعداد بازدیدها و تعامل کاربر را ذخیره کنید تا مشخص شود کدام کاربران خلاقانه در سایت‌های مختلف محتوا را مشاهده می‌کنند.

برای اطلاعات بیشتر در مورد API اصلی و نحوه عملکرد انتخاب، مستندات Select URL API را بررسی کنید .

چرخش خلاقانه را امتحان کنید

برای آزمایش چرخش خلاقانه، مطمئن شوید که Select URL API و Shared Storage فعال هستند:

• در chrome://settings/content/siteData ، Delete data sites have saved to your device when you close all windows Allow sites to save data on your device یا «حذف داده‌های ذخیره شده سایت‌ها در دستگاه شما» را انتخاب کنید.
• در chrome://settings/adPrivacy/sites ، گزینه Site-suggested ads را انتخاب کنید.

برای مشاهده‌ی نسخه‌ی زنده‌ی نمونه‌های کد موجود در این سند ، نسخه‌ی آزمایشی Shared Storage ما را امتحان کنید.

نسخه نمایشی به همراه نمونه کد

در این مثال:

• creative-rotation.js اسکریپت شخص ثالثی است که محتوای مورد نظر برای چرخش را به همراه هر داده‌ای که محتوای بعدی برای انتخاب و نمایش را تعیین می‌کند، مانند وزن‌ها در این مثال، تعریف می‌کند. صفحه ناشر این اسکریپت را اجرا می‌کند. این اسکریپت، worklet ذخیره‌سازی مشترک را فراخوانی می‌کند تا بر اساس داده‌های موجود در ذخیره‌سازی و لیست URLهایی که باید از بین آنها انتخاب شوند، تعیین کند که کدام محتوا نمایش داده شود.

• creative-rotation-worklet.js یک worklet ذخیره‌سازی اشتراکی شخص ثالث است که استراتژی چرخش را جستجو می‌کند، محاسبه می‌کند که چه محتوایی را باید در مرحله بعد منتشر کند و آن بخش از محتوا را برمی‌گرداند.

نحوه کار نسخه آزمایشی

1. وقتی کاربری از صفحه ناشر بازدید می‌کند، صفحه اسکریپت creative-rotation.js شخص ثالث را بارگذاری می‌کند. اسکریپت creative rotation مسئول بارگذاری و اجرای worklet ذخیره‌سازی مشترک است. این اسکریپت، فراخوانی worklet را با لیستی از URLها برای انتخاب فراهم می‌کند.
2. در این کاربرگ، اگر فضای ذخیره‌سازی مشترک هنوز مقداردهی اولیه نشده باشد، فضای ذخیره‌سازی با استراتژی چرخش خلاق اولیه و شاخص خلاق مقداردهی اولیه می‌شود. استراتژی چرخش اولیه مورد استفاده در این نسخه آزمایشی، استراتژی متوالی است.
3. این Worklet حالت چرخش را از حافظه مشترک می‌خواند و اندیس تبلیغ بعدی را برمی‌گرداند. در حالت چرخش متوالی، اندیس خلاق را در حافظه مشترک نیز با مقدار جدیدی که برای فراخوانی بعدی استفاده می‌شود، به‌روزرسانی می‌کند. این Worklet بر اساس مقدار resolveToConfig که هنگام فراخوانی selectURL استفاده می‌شود، یک شیء FencedFrameConfig یا شیء URN مات برمی‌گرداند.
4. اسکریپت چرخش خلاق، تبلیغ انتخاب شده را در یک قاب محصور (Fenced Frame) یا یک iframe نمایش می‌دهد. برای جزئیات بیشتر در مورد انواع بازگشت، به سند رندر یک تبلیغ (render an ad) مراجعه کنید.
5. وقتی کاربری حالت چرخش را تغییر می‌دهد، worklet فضای ذخیره‌سازی مشترک، مقدار حالت چرخش خلاق ذخیره شده در فضای ذخیره‌سازی مشترک را به‌روزرسانی می‌کند.
6. هنگام بارگذاری مجدد صفحه ناشر، مراحل ۱ تا ۴ تکرار می‌شوند تا انتخاب تبلیغ بعدی بر اساس استراتژی چرخش انتخاب شده امکان‌پذیر شود.

نمونه‌های کد

در ادامه نمونه‌های کد مربوط به creative-rotation.js و creative-rotation-worklet.js آمده است.

چرخش خلاق.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 و Shared storage، به آدرس https://shared-storage-demo.web.app/ بروید. نسخه نمایشی «چرخش خلاقانه» را انتخاب کنید.

2. برای بررسی نسخه آزمایشی، گزینه «ناشر A» را انتخاب کنید. به آدرس https://shared-storage-demo-publisher-a.web.app/creative-rotation هدایت خواهید شد. صفحه، محتوای شماره‌گذاری شده را بر اساس داده‌های چرخش خلاق ذخیره شده در Shared Storage که از طریق Select URL API قابل دسترسی هستند، بارگذاری می‌کند. حالت‌های آزمایشی برای چرخش خلاق، توزیع متوالی، توزیع یکنواخت و توزیع وزنی هستند. این برگه کار، منطق انتخاب محتوایی که در iframe ظاهر می‌شود را اجرا می‌کند. تصویر زیر صفحه ناشر را نشان می‌دهد.

   
   

3. برای مشاهده آنچه در Shared Storage ذخیره شده است، در Chrome DevTools به Application -> Shared Storage بروید. دو ورودی برای shared storage ایجاد شده است. یک فضای ذخیره‌سازی خالی برای مبدا https://shared-storage-demo-publisher-a.web.app در دسترس است. این شامل فضای ذخیره‌سازی مخصوص آن مبدا خواهد بود و برای نسخه آزمایشی ما خالی باقی خواهد ماند زیرا ناشر نیازی به نوشتن در فضای ذخیره‌سازی مشترک ندارد. توجه داشته باشید که وقتی بعداً برای نسخه آزمایشی به آن صفحه مراجعه کنید، یک فضای ذخیره‌سازی مشابه برای ناشر B ایجاد خواهد شد.

   
   

4. یک ورودی Shared Storage دیگر برای مبدا https://shared-storage-demo-content-producer.web.app ایجاد خواهد شد. این محل ذخیره‌سازی iframe شخص ثالث تعبیه شده در صفحه ناشر است. این محل ذخیره‌سازی برای اشتراک‌گذاری داده‌ها بین دو ناشر موجود جهت هماهنگی انتخاب خلاقانه استفاده خواهد شد. این محل ذخیره‌سازی مشترک برای ذخیره اطلاعات مربوط به استراتژی خلاقانه و چرخش نمایش داده شده با ذخیره دو جفت کلید-مقدار استفاده خواهد شد. اولین کلید مورد استفاده در نسخه آزمایشی creative-rotation-index است که مقدار آن شاخص خلاق فعلی در حالت ترتیبی است. کلید دوم creative-rotation-mode است که استراتژی چرخش مورد استفاده را تعیین می‌کند.

   
   

5. رفرش کردن صفحه در حالت ترتیبی منجر به نمایش خلاقه بعدی در توالی ۱، ۲، ۳، ۱، … می‌شود. مقدار کلید creative-rotation-index با توجه به شاخص خلاقه نشان داده شده در حالت ترتیبی تغییر خواهد کرد.

   
   

6. تغییر حالت چرخش خلاق با استفاده از دکمه‌های کنترل، مقدار کلید creative-rotation-mode را در استراتژی مربوطه به‌روزرسانی می‌کند. این مقدار توسط کد worklet برای انتخاب خلاق بعدی که باید در iframe نمایش داده شود، استفاده خواهد شد. توجه داشته باشید که مقدار ذخیره شده برای creative-rotation-index برای حالت‌های چرخش غیر از ترتیبی تغییر نمی‌کند.

   
   

7. به صفحه مربوط به "ناشر B" در آدرس https://shared-storage-demo-publisher-b.web.app/creative-rotation بروید. در حالت ترتیبی، محتوای نمایش داده شده باید محتوای بعدی در ترتیبی باشد که هنگام بازدید از URL مربوط به "ناشر A" نشان داده می‌شود. با بررسی فضای ذخیره‌سازی مشترک برای تولیدکننده محتوا، متوجه خواهید شد که هر دو "ناشر A" و "ناشر B" فضای ذخیره‌سازی یکسانی را به اشتراک می‌گذارند و از تنظیمات آنجا برای انتخاب محتوای بعدی برای نمایش و استراتژی چرخش مورد استفاده استفاده می‌کنند.

   
   

8. فضای ذخیره‌سازی مشترک برای «ناشر ب» خالی است، مشابه فضای ذخیره‌سازی مشترک «ناشر الف».

   
   

   موارد استفاده کنید

   همه موارد استفاده موجود برای Select URL API را می‌توانید در این بخش پیدا کنید. با دریافت بازخورد و کشف موارد آزمایشی جدید، به افزودن نمونه‌ها ادامه خواهیم داد.

   • چرخاندن خلاقیت‌های تبلیغاتی : داده‌هایی مانند شناسه خلاق و تعامل کاربر را ذخیره کنید تا مشخص کنید کاربران خلاق کدام یک را در سایت‌های مختلف می‌بینند.
   • انتخاب خلاقیت های تبلیغاتی بر اساس فراوانی : از داده های تعداد بازدید برای تعیین اینکه کاربران خلاق در سایت های مختلف می بینند استفاده کنید.
   • اجرای تست A/B : می‌توانید کاربر را به یک گروه آزمایشی اختصاص دهید، سپس آن گروه را در فضای ذخیره‌سازی مشترک ذخیره کنید تا از طریق سایت به آن دسترسی داشته باشید.
   • سفارشی کردن تجربه برای مشتریان شناخته شده : محتوای سفارشی و فراخوان برای اقدام را بر اساس وضعیت ثبت نام کاربر یا سایر وضعیت های کاربر به اشتراک بگذارید.

مشارکت کنید و بازخورد خود را به اشتراک بگذارید

توجه داشته باشید که پیشنهاد Select URL API در حال بحث و توسعه فعال است و ممکن است تغییر کند.

مشتاقانه منتظر شنیدن نظرات شما در مورد Select URL API هستیم.

• پیشنهاد : بررسی جزئیات پیشنهاد .
• بحث : برای پرسیدن سوال و به اشتراک گذاشتن بینش‌هایتان، به بحث جاری بپیوندید.