Select URL API की मदद से विज्ञापन क्रिएटिव घुमाना

Select URL API का इस्तेमाल करके, Shared Storage का फ़ायदा पाएं. इससे यह तय किया जा सकता है कि उपयोगकर्ता को अलग-अलग साइटों पर कौनसी क्रिएटिव दिखेगी.

विज्ञापन देने वाला व्यक्ति या कंपनी या कॉन्टेंट बनाने वाला व्यक्ति या कंपनी, किसी कैंपेन में कॉन्टेंट रोटेशन की अलग-अलग रणनीतियां लागू कर सकती है. साथ ही, असरदार तरीके से विज्ञापन दिखाने के लिए, कॉन्टेंट या क्रिएटिव रोटेट कर सकती है. अलग-अलग साइटों पर, रोटेशन की अलग-अलग रणनीतियां चलाने के लिए, Select URL API का इस्तेमाल किया जा सकता है. जैसे, क्रम से रोटेशन और समान रूप से डिस्ट्रिब्यूट किया गया रोटेशन.

Select URL 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 एक थर्ड पार्टी स्क्रिप्ट है. यह स्क्रिप्ट, रोटेट किए जाने वाले कॉन्टेंट के साथ-साथ ऐसे डेटा को भी तय करती है जिससे यह तय होता है कि अगला कॉन्टेंट कौनसा होगा और उसे कैसे दिखाया जाएगा. जैसे, इस उदाहरण में वेट. पब्लिशर पेज पर यह स्क्रिप्ट काम करती है. यह स्क्रिप्ट, शेयर किए गए स्टोरेज वर्कलेट को कॉल करती है. इससे यह तय किया जाता है कि स्टोरेज में मौजूद डेटा और चुनने के लिए यूआरएल की सूची के आधार पर, कौनसा कॉन्टेंट दिखाना है.

• creative-rotation-worklet.js, तीसरे पक्ष का शेयर किया गया स्टोरेज वर्कलेट है. यह रोटेशन की रणनीति का पता लगाता है, यह हिसाब लगाता है कि अगला कॉन्टेंट कौन-सा पब्लिश करना है, और उस कॉन्टेंट को दिखाता है.

डेमो कैसे काम करता है

1. जब कोई उपयोगकर्ता पब्लिशर पेज पर जाता है, तो पेज, तीसरे पक्ष की creative-rotation.js स्क्रिप्ट लोड करता है. क्रिएटिव रोटेशन स्क्रिप्ट, शेयर किए गए स्टोरेज वर्कलेट को लोड करने और चलाने के लिए ज़िम्मेदार होती है. स्क्रिप्ट, वर्कलेट कॉल को चुनने के लिए यूआरएल की सूची उपलब्ध कराती है.
2. अगर वर्कलेट में Shared Storage को अब तक शुरू नहीं किया गया है, तो स्टोरेज को क्रिएटिव रोटेशन की शुरुआती रणनीति और क्रिएटिव इंडेक्स के साथ शुरू किया जाता है. इस डेमो में, रोटेशन की शुरुआती रणनीति के तौर पर सीक्वेंशियल रणनीति का इस्तेमाल किया गया है.
3. वर्कलेट, शेयर किए गए स्टोरेज से रोटेशन मोड को पढ़ता है और अगले विज्ञापन का इंडेक्स दिखाता है. सीक्वेंशियल रोटेशन मोड के मामले में, यह शेयर किए गए स्टोरेज में क्रिएटिव इंडेक्स को भी नई वैल्यू के साथ अपडेट करता है, ताकि अगले कॉल के लिए इसका इस्तेमाल किया जा सके. वर्कलेट, FencedFrameConfig या ओपेक यूआरएन ऑब्जेक्ट दिखाता है. यह इस बात पर निर्भर करता है कि selectURL को कॉल करते समय, resolveToConfig की कौनसी वैल्यू इस्तेमाल की गई थी.
4. क्रिएटिव रोटेशन स्क्रिप्ट, चुने गए विज्ञापन को फ़ेन्स्ड फ़्रेम या iframe में दिखाती है. विज्ञापन रेंडर करने से जुड़े दस्तावेज़ में, जवाब के टाइप के बारे में जानकारी दी गई है.
5. जब कोई उपयोगकर्ता रोटेशन मोड बदलता है, तो Shared Storage Worklet, Shared Storage में सेव किए गए क्रिएटिव रोटेशन मोड की वैल्यू को अपडेट करता है.
6. पब्लिशर पेज को फिर से लोड करने पर, पहले से चौथे चरण को दोहराया जाता है. इससे रोटेशन की चुनी गई रणनीति के आधार पर, दिखाए जाने वाले अगले विज्ञापन को चुना जा सकता है

कोड सैंपल

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 और Shared storage का इस्तेमाल करके, क्रिएटिव रोटेशन को ऐक्सेस करने के लिए, https://shared-storage-demo.web.app/ पर जाएं. 'क्रिएटिव रोटेशन' का डेमो चुनें.

2. 'पब्लिशर A' के तौर पर डेमो को एक्सप्लोर करने का विकल्प चुनें. आपको https://shared-storage-demo-publisher-a.web.app/creative-rotation पर रीडायरेक्ट किया जाएगा. यह पेज, शेयर किए गए स्टोरेज में सेव किए गए क्रिएटिव रोटेशन डेटा के आधार पर, नंबर वाला कॉन्टेंट लोड करता है. इस डेटा को Select URL API के ज़रिए ऐक्सेस किया जाता है. क्रिएटिव रोटेशन के डेमो मोड, क्रम में चलने वाला, बराबर डिस्ट्रिब्यूशन, और वज़न के हिसाब से डिस्ट्रिब्यूशन होते हैं. वर्कलेट, iframe में दिखने वाले कॉन्टेंट को चुनने के लिए लॉजिक को लागू करता है. नीचे दी गई इमेज में, पब्लिशर पेज दिखाया गया है.

   
   

3. Shared Storage में सेव किया गया डेटा देखने के लिए, Chrome DevTools में ऐप्लिकेशन -> Shared Storage पर जाएं. शेयर किए गए स्टोरेज के लिए दो एंट्री बनाई जाती हैं. https://shared-storage-demo-publisher-a.web.app ऑरिजिन के लिए, खाली स्टोरेज उपलब्ध है. इसमें उस ऑरिजिन के लिए स्टोरेज होगा. साथ ही, यह हमारे डेमो के लिए खाली रहेगा, क्योंकि पब्लिशर को शेयर किए गए स्टोरेज में लिखने की ज़रूरत नहीं है. ध्यान दें कि बाद में डेमो के लिए उस पेज पर जाने पर, पब्लिशर B के लिए भी ऐसा ही स्टोरेज बनाया जाएगा.

   
   

4. https://shared-storage-demo-content-producer.web.app ऑरिजिन के लिए, Shared Storage की एक और एंट्री बनाई जाएगी. यह कुकी, पब्लिशर के पेज पर एम्बेड किए गए तीसरे पक्ष के iframe का स्टोरेज है. इस स्टोरेज का इस्तेमाल, उपलब्ध दो पब्लिशर के बीच डेटा शेयर करने के लिए किया जाएगा, ताकि क्रिएटिव चुनने में तालमेल बिठाया जा सके. इस शेयर किए गए स्टोरेज का इस्तेमाल, दिखाए गए क्रिएटिव और रोटेशन की रणनीति के बारे में जानकारी सेव करने के लिए किया जाएगा. इसके लिए, दो की-वैल्यू पेयर सेव किए जाएंगे. डेमो में इस्तेमाल की गई पहली कुंजी creative-rotation-index है. इसकी वैल्यू, सीक्वेंशियल मोड में मौजूद क्रिएटिव इंडेक्स है. दूसरी कुंजी creative-rotation-mode है. इससे यह तय होता है कि रोटेशन की कौनसी रणनीति का इस्तेमाल किया जाएगा.

   
   

5. सीक्वेंशियल मोड में पेज को रीफ़्रेश करने पर, क्रम में अगला क्रिएटिव दिखेगा. जैसे, 1, 2, 3, 1, … सीक्वेंशियल मोड में, दिखाए गए क्रिएटिव के इंडेक्स के हिसाब से, key creative-rotation-index की वैल्यू बदल जाएगी.

   
   

6. कंट्रोल बटन का इस्तेमाल करके क्रिएटिव रोटेशन मोड बदलने से, key creative-rotation-mode की वैल्यू, उससे जुड़ी रणनीति के लिए अपडेट हो जाएगी. इसका इस्तेमाल वर्कलेट कोड करेगा, ताकि iframe में दिखाए जाने वाले अगले क्रिएटिव को चुना जा सके. ध्यान दें कि क्रिएटिव-रोटेशन-इंडेक्स के लिए सेव की गई वैल्यू, क्रम से रोटेशन मोड के अलावा अन्य रोटेशन मोड के लिए नहीं बदलती.

   
   

7. https://shared-storage-demo-publisher-b.web.app/creative-rotation पर जाकर, "Publisher B" के पेज पर जाएं. सीक्वेंशियल मोड में, "पब्लिशर A" के यूआरएल पर जाने पर, क्रम में अगला क्रिएटिव दिखना चाहिए. कॉन्टेंट बनाने वाली कंपनी के लिए शेयर किए गए स्टोरेज की जांच करने पर, आपको पता चलेगा कि "पब्लिशर A" और "पब्लिशर B", दोनों एक ही स्टोरेज शेयर करते हैं. साथ ही, वे उस स्टोरेज की सेटिंग का इस्तेमाल करके, यह तय करते हैं कि अगला क्रिएटिव कौन-सा दिखाना है और रोटेशन की कौनसी रणनीति इस्तेमाल करनी है.

   
   

8. "Publisher B" के लिए Shared Storage खाली है. यह "Publisher A" के Shared Storage जैसा ही है.

   
   

   उपयोग के उदाहरण

   Select URL API के इस्तेमाल के सभी उपलब्ध उदाहरण, इस सेक्शन में देखे जा सकते हैं. हमें सुझाव, राय, और शिकायत मिलने पर, हम नए उदाहरण जोड़ते रहेंगे. साथ ही, नए टेस्ट केस भी जोड़ते रहेंगे.

   • विज्ञापन क्रिएटिव को रोटेट करना: क्रिएटिव आईडी और उपयोगकर्ता इंटरैक्शन जैसे डेटा को सेव करें, ताकि यह पता लगाया जा सके कि उपयोगकर्ताओं को अलग-अलग साइटों पर कौनसा क्रिएटिव दिखता है.
   • फ़्रीक्वेंसी के हिसाब से विज्ञापन क्रिएटिव चुनना: व्यू की संख्या के डेटा का इस्तेमाल करके यह तय करें कि उपयोगकर्ताओं को अलग-अलग साइटों पर कौनसा क्रिएटिव दिखे.
   • A/B टेस्टिंग करना: किसी उपयोगकर्ता को एक्सपेरिमेंट ग्रुप में असाइन किया जा सकता है. इसके बाद, उस ग्रुप को Shared Storage में सेव किया जा सकता है, ताकि उसे अलग-अलग साइटों से ऐक्सेस किया जा सके.
   • पहचाने गए ग्राहकों के लिए अनुभव को पसंद के मुताबिक बनाना: उपयोगकर्ता के रजिस्ट्रेशन स्टेटस या अन्य स्थितियों के आधार पर, कस्टम कॉन्टेंट और कॉल-टू-ऐक्शन शेयर करें.

सुझाव/राय देना या शिकायत करना

ध्यान दें कि Select URL API के सुझाव पर अभी चर्चा चल रही है और इसे डेवलप किया जा रहा है. इसलिए, इसमें बदलाव हो सकता है.

हमें Select URL API के बारे में आपके सुझाव/राय का इंतज़ार है.

• प्रस्ताव: ज़्यादा जानकारी वाले प्रस्ताव की समीक्षा करें.
• चर्चा: सवाल पूछने और अपनी अहम जानकारी शेयर करने के लिए, जारी चर्चा में शामिल हों.