সিলেক্ট ইউআরএল এপিআই দিয়ে বিজ্ঞাপন ক্রিয়েটিভ ঘোরান

কোনও ব্যবহারকারী বিভিন্ন সাইট জুড়ে কোন সৃজনশীল জিনিস দেখতে পান তা নির্ধারণ করতে শেয়ার্ড স্টোরেজের সুবিধা নিতে Select URL API ব্যবহার করুন।

একজন বিজ্ঞাপনদাতা বা কন্টেন্ট প্রযোজক একটি প্রচারণায় বিভিন্ন কন্টেন্ট রোটেশন কৌশল প্রয়োগ করতে এবং কার্যকারিতা বাড়ানোর জন্য কন্টেন্ট বা সৃজনশীলতা ঘোরাতে চাইতে পারেন। 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 নির্বাচন করুন।

এই ডকুমেন্টে কোড নমুনার লাইভ সংস্করণের জন্য আমাদের শেয়ার্ড স্টোরেজ লাইভ ডেমো ব্যবহার করে দেখুন।

কোড নমুনা সহ ডেমো

এই উদাহরণে:

• creative-rotation.js হল তৃতীয় পক্ষের স্ক্রিপ্ট যা ঘোরানো কন্টেন্টকে সংজ্ঞায়িত করে, সেই সাথে যেকোনো ডেটা যা পরবর্তী কন্টেন্ট নির্বাচন এবং প্রদর্শনের জন্য নির্ধারণ করে, যেমন এই উদাহরণে ওজন। প্রকাশক পৃষ্ঠা এই স্ক্রিপ্টটি কার্যকর করে। স্টোরেজে উপলব্ধ ডেটা এবং নির্বাচন করার জন্য URL গুলির তালিকার উপর ভিত্তি করে কোন কন্টেন্ট প্রদর্শন করা হবে তা নির্ধারণ করার জন্য এই স্ক্রিপ্টটি শেয়ার্ড স্টোরেজ ওয়ার্কলেটকে কল করে।

• creative-rotation-worklet.js হল তৃতীয় পক্ষের শেয়ার্ড স্টোরেজ ওয়ার্কলেট যা ঘূর্ণন কৌশলটি অনুসন্ধান করে, পরবর্তী কোন সামগ্রী প্রকাশ করতে হবে তা গণনা করে এবং সেই সামগ্রীটি ফেরত দেয়।

ডেমো কিভাবে কাজ করে

1. যখন কোনও ব্যবহারকারী প্রকাশক পৃষ্ঠায় যান, তখন পৃষ্ঠাটি তৃতীয় পক্ষের creative-rotation.js স্ক্রিপ্ট লোড করে। সৃজনশীল ঘূর্ণন স্ক্রিপ্টটি শেয়ার্ড স্টোরেজ ওয়ার্কলেট লোড এবং চালানোর জন্য দায়ী। স্ক্রিপ্টটি ওয়ার্কলেট কলে নির্বাচন করার জন্য URL গুলির একটি তালিকা সরবরাহ করে।
2. ওয়ার্কলেটে, যদি ভাগ করা স্টোরেজটি এখনও শুরু না করা হয়, তাহলে স্টোরেজটি প্রাথমিক সৃজনশীল ঘূর্ণন কৌশল এবং সৃজনশীল সূচক দিয়ে শুরু করা হয়। এই ডেমোতে ব্যবহৃত প্রাথমিক ঘূর্ণন কৌশলটি হল ক্রমিক কৌশল।
3. ওয়ার্কলেটটি শেয়ার্ড স্টোরেজ থেকে ঘূর্ণন মোড পড়ে এবং পরবর্তী বিজ্ঞাপনের সূচক ফেরত দেয়। সিক্যুয়েন্সিয়াল ঘূর্ণন মোডের ক্ষেত্রে, এটি পরবর্তী কলের জন্য ব্যবহৃত নতুন মানের সাথে শেয়ার্ড স্টোরেজে সৃজনশীল সূচক আপডেট করে। selectURL কল করার সময় ব্যবহৃত resolveToConfig মানের উপর ভিত্তি করে ওয়ার্কলেটটি একটি FencedFrameConfig বা অস্বচ্ছ URN অবজেক্ট ফেরত দেয়।
4. ক্রিয়েটিভ-রোটেশন স্ক্রিপ্ট নির্বাচিত বিজ্ঞাপনটিকে একটি ফেন্সড ফ্রেম বা একটি আইফ্রেমে প্রদর্শন করে। রিটার্ন প্রকার সম্পর্কে বিস্তারিত জানার জন্য রেন্ডার অ্যান অ্যাড ডকুমেন্ট দেখুন।
5. যখন একজন ব্যবহারকারী ঘূর্ণন মোড পরিবর্তন করে, তখন শেয়ার্ড স্টোরেজ ওয়ার্কলেট শেয়ার্ড স্টোরেজে সংরক্ষিত সৃজনশীল ঘূর্ণন মোড মান আপডেট করে।
6. প্রকাশক পৃষ্ঠাটি পুনরায় লোড করার সময়, ১-৪ ধাপ পুনরাবৃত্তি করা হয় যার ফলে নির্বাচিত ঘূর্ণন কৌশলের উপর ভিত্তি করে পরবর্তী বিজ্ঞাপনটি নির্বাচন করা সম্ভব হয়।

কোড নমুনা

creative-rotation.js এবং creative-rotation-worklet.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();

সৃজনশীল-ঘূর্ণন-ওয়ার্কলেট.জেএস

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 স্টোরেজ ব্যবহার করে Creatives Rotation অ্যাক্সেস করতে, https://shared-storage-demo.web.app/ এ যান। 'Creative Rotation' ডেমোটি বেছে নিন।

2. 'প্রকাশক A' হিসেবে ডেমোটি অন্বেষণ করতে বেছে নিন। আপনাকে https://shared-storage-demo-publisher-a.web.app/creative-rotation এ পুনঃনির্দেশিত করা হবে। Select URL API এর মাধ্যমে অ্যাক্সেস করা শেয়ার্ড স্টোরেজে সংরক্ষিত সৃজনশীল ঘূর্ণন ডেটার উপর ভিত্তি করে পৃষ্ঠাটি সংখ্যাযুক্ত সামগ্রী লোড করে। সৃজনশীল ঘূর্ণনের জন্য ডেমো মোডগুলি ক্রমিক, সমান বিতরণ এবং ওজনযুক্ত বিতরণ। ওয়ার্কলেটটি আইফ্রেমে প্রদর্শিত সামগ্রী নির্বাচন করার জন্য যুক্তি কার্যকর করে। নিম্নলিখিত চিত্রটি প্রকাশক পৃষ্ঠাটি দেখায়।

   
   

3. শেয়ার্ড স্টোরেজে কী সংরক্ষিত আছে তা দেখতে, Chrome DevTools-এ অ্যাপ্লিকেশন -> শেয়ার্ড স্টোরেজে যান। শেয়ার্ড স্টোরেজের জন্য দুটি এন্ট্রি তৈরি করা হয়েছে। https://shared-storage-demo-publisher-a.web.app অরিজিনের জন্য একটি খালি স্টোরেজ উপলব্ধ। এতে সেই অরিজিনের জন্য নির্দিষ্ট স্টোরেজ থাকবে এবং আমাদের ডেমোর জন্য এটি খালি থাকবে কারণ প্রকাশককে শেয়ার্ড স্টোরেজে লেখার প্রয়োজন নেই। মনে রাখবেন যে ডেমোর জন্য পরবর্তী সময়ে যখন আপনি সেই পৃষ্ঠাটি পরিদর্শন করবেন তখন প্রকাশক B-এর জন্য একই ধরণের স্টোরেজ তৈরি করা হবে।

   
   

4. https://shared-storage-demo-content-producer.web.app অরিজিনের জন্য আরেকটি শেয়ার্ড স্টোরেজ এন্ট্রি তৈরি করা হবে। এটি প্রকাশক পৃষ্ঠায় এমবেড করা তৃতীয়-পক্ষের আইফ্রেমের স্টোরেজ। এই স্টোরেজটি দুটি উপলব্ধ প্রকাশকের মধ্যে সৃজনশীল নির্বাচনের সমন্বয় সাধনের জন্য ডেটা ভাগ করে নেওয়ার জন্য ব্যবহার করা হবে। এই শেয়ার্ড স্টোরেজটি দুটি কী-মান জোড়া সংরক্ষণ করে দেখানো সৃজনশীল এবং ঘূর্ণন কৌশল সম্পর্কে তথ্য সংরক্ষণ করতে ব্যবহার করা হবে। ডেমোতে ব্যবহৃত প্রথম কী হল creative-rotation-index যার মান হল sequence mode-এ বর্তমান সৃজনশীল সূচক। দ্বিতীয় কী হল creative-rotation-mode যা ব্যবহৃত ঘূর্ণন কৌশল নির্দেশ করে।

   
   

5. সিকোয়েন্সিয়াল মোডে থাকাকালীন পৃষ্ঠাটি রিফ্রেশ করলে সিকোয়েন্স ১, ২, ৩, ১, …-এর পরবর্তী সৃজনশীলটি দেখাবে। সিকোয়েন্সিয়াল মোডে থাকাকালীন প্রদর্শিত সৃজনশীলের সূচক অনুসারে সৃজনশীল-ঘূর্ণন-সূচক কী-এর মান পরিবর্তিত হবে।

   
   

6. কন্ট্রোল বোতাম ব্যবহার করে সৃজনশীল ঘূর্ণন মোড পরিবর্তন করলে কী ক্রিয়েটিভ-রোটেশন-মোডের মান সংশ্লিষ্ট কৌশলে আপডেট হবে। এটি ওয়ার্কলেট কোড দ্বারা আইফ্রেমে দেখানো পরবর্তী সৃজনশীল নির্বাচন করতে ব্যবহার করা হবে। মনে রাখবেন যে সৃজনশীল-রোটেশন-ইনডেক্সের জন্য সংরক্ষিত মান ক্রমিক ছাড়া অন্য ঘূর্ণন মোডের জন্য পরিবর্তিত হয় না।

   
   

7. "প্রকাশক বি" এর পৃষ্ঠায় https://shared-storage-demo-publisher-b.web.app/creative-rotation এ যান। সিকোয়েন্সিয়াল মোডে "প্রকাশক এ" এর URL দেখার সময় প্রদর্শিত সৃজনশীলটি প্রদর্শিত ক্রমের পরবর্তী সৃজনশীল হওয়া উচিত। কন্টেন্ট প্রযোজকের জন্য শেয়ার্ড স্টোরেজ পরীক্ষা করে, আপনি দেখতে পাবেন যে "প্রকাশক এ" এবং "প্রকাশক বি" উভয়ই একই স্টোরেজ ভাগ করে এবং পরবর্তী সৃজনশীলটি দেখানোর জন্য এবং ব্যবহার করার জন্য ঘূর্ণন কৌশল নির্বাচন করার জন্য সেখানকার সেটিংস ব্যবহার করছে।

   
   

8. "প্রকাশক খ" এর শেয়ার্ড স্টোরেজ খালি, "প্রকাশক ক" এর শেয়ার্ড স্টোরেজের মতো।

   
   

   কেস ব্যবহার করুন

   সিলেক্ট ইউআরএল এপিআই-এর জন্য সমস্ত উপলব্ধ ব্যবহারের ক্ষেত্রে এই বিভাগে পাওয়া যাবে। আমরা প্রতিক্রিয়া পেতে এবং নতুন পরীক্ষার কেস আবিষ্কার করার সাথে সাথে আমরা উদাহরণ যোগ করা চালিয়ে যাব।

   • বিজ্ঞাপন ক্রিয়েটিভগুলি ঘোরান : সৃজনশীল আইডি এবং ব্যবহারকারীর ইন্টারঅ্যাকশনের মতো ডেটা সঞ্চয় করুন, বিভিন্ন সাইট জুড়ে কোন সৃজনশীল ব্যবহারকারীরা দেখেন তা নির্ধারণ করতে।
   • ফ্রিকোয়েন্সি অনুসারে বিজ্ঞাপন ক্রিয়েটিভ নির্বাচন করুন : বিভিন্ন সাইট জুড়ে কোন সৃজনশীল ব্যবহারকারীরা দেখছেন তা নির্ধারণ করতে ভিউ গণনা ডেটা ব্যবহার করুন।
   • A/B পরীক্ষা চালান : আপনি একটি ব্যবহারকারীকে একটি এক্সপেরিমেন্ট গ্রুপে বরাদ্দ করতে পারেন, তারপর ক্রস-সাইট অ্যাক্সেস করার জন্য শেয়ার্ড স্টোরেজে সেই গ্রুপটিকে সঞ্চয় করতে পারেন।
   • পরিচিত গ্রাহকদের জন্য অভিজ্ঞতা কাস্টমাইজ করুন : ব্যবহারকারীর নিবন্ধন স্থিতি বা অন্যান্য ব্যবহারকারীর অবস্থার উপর ভিত্তি করে কাস্টম সামগ্রী এবং কল-টু-অ্যাকশন শেয়ার করুন।

অংশগ্রহণ করুন এবং মতামত শেয়ার করুন

মনে রাখবেন যে Select URL API প্রস্তাবটি সক্রিয় আলোচনা এবং উন্নয়নাধীন এবং পরিবর্তন সাপেক্ষে।

আমরা Select URL API সম্পর্কে আপনার মতামত শুনতে আগ্রহী।

• প্রস্তাব : বিস্তারিত প্রস্তাবটি পর্যালোচনা করুন।
• আলোচনা : প্রশ্ন জিজ্ঞাসা করতে এবং আপনার অন্তর্দৃষ্টি ভাগ করে নিতে চলমান আলোচনায় যোগ দিন।