विज्ञापन रेंडर करना

जब Protected Audience की नीलामी में किसी विज्ञापन के उम्मीदवार को दिखाया जाता है, तब उसे एक ओपेक URN के तौर पर दिखाया जा सकता है. इसे iframe में विज्ञापन को रेंडर करने के लिए इस्तेमाल किया जाता है. इसके अलावा, ऐसे FencedFrameConfig को भी दिखाया जा सकता है जिसका इस्तेमाल विज्ञापन को फ़ेंस किए गए फ़्रेम में दिखाने के लिए किया जाता है.

इस गाइड में बताया गया है कि फ़ेंस्ड फ़्रेम क्या है और इसकी ज़रूरत क्यों है. इसके अलावा, यहां बताए गए दोनों तरीकों से विज्ञापन को रेंडर करने का तरीका भी बताया गया है. फ़ेंस किए गए फ़्रेम के बारे में ज़्यादा जानने के लिए, इस गाइड में या प्रपोज़ल में ज़्यादा जानकारी पाएं.

फ़ेंस किए गए फ़्रेम क्या हैं?

फ़ेंस्ड फ़्रेम (<fencedframe>), एम्बेड किए गए कॉन्टेंट के लिए एक एचटीएमएल एलिमेंट है. यह iframe की तरह ही होता है. iframe से उलट, फ़ेंस्ड फ़्रेम, अपने एम्बेड करने के कॉन्टेक्स्ट के साथ कम्यूनिकेशन पर पाबंदी लगाता है. इससे फ़्रेम, क्रॉस-साइट डेटा को ऐक्सेस कर पाता है, लेकिन उसे एम्बेड करने वाले कॉन्टेक्स्ट के साथ शेयर नहीं करता. इसी तरह, एम्बेड करने के कॉन्टेक्स्ट में पहले पक्ष (ग्राहक) का कोई भी डेटा, फ़ेंस किए गए फ़्रेम के साथ शेयर नहीं किया जा सकता.

उदाहरण के लिए, मान लें कि news.example (एम्बेड करने वाला कॉन्टेक्स्ट), shoes.example के विज्ञापन को फ़ेंस किए गए फ़्रेम में एम्बेड करता है. news.example, shoes.example विज्ञापन के डेटा को और shoes.example को news.example से पहले पक्ष (ग्राहक) का डेटा नहीं दिखा सकता.

फ़ेंस किए गए फ़्रेम कैसे काम करते हैं?

फ़ेंस किए गए फ़्रेम, नेविगेशन के लिए FencedFrameConfig ऑब्जेक्ट का इस्तेमाल करते हैं. इस ऑब्जेक्ट को, सुरक्षित ऑडियंस की नीलामी से लौटाया जा सकता है. इसके बाद, कॉन्फ़िगरेशन ऑब्जेक्ट को फ़ेंस किए गए फ़्रेम एलिमेंट पर config एट्रिब्यूट के तौर पर सेट किया जाता है. यह iframe से अलग है, जहां src एट्रिब्यूट में कोई यूआरएल या ओपेक यूआरएन असाइन किया जाता है. FencedFrameConfig ऑब्जेक्ट में, रीड-ओनली url प्रॉपर्टी है. हालांकि, मौजूदा इस्तेमाल के उदाहरणों में इंटरनल रिसॉर्स का असल यूआरएल छिपाना ज़रूरी है. इसलिए, यह प्रॉपर्टी पढ़ने पर, स्ट्रिंग की ओपेक वैल्यू दिखाती है.

फ़ेंस्ड फ़्रेम, अपने एम्बेडर से कम्यूनिकेट करने के लिए postMessage का इस्तेमाल नहीं कर सकता. हालांकि, फ़ेंस्ड फ़्रेम में postMessage के साथ iframe का इस्तेमाल किया जा सकता है.

फ़ेंस किए गए फ़्रेम को दूसरे तरीकों से पब्लिशर के डिवाइस से अलग कर दिया जाएगा. पब्लिशर के पास फ़ेंस किए गए फ़्रेम के अंदर मौजूद डीओएम का ऐक्सेस नहीं होगा. साथ ही, फ़ेंस किए गए फ़्रेम से पब्लिशर के डीओएम को ऐक्सेस नहीं किया जा सकता. इसके अलावा, फ़्रेम वाले फ़्रेम में name जैसे एट्रिब्यूट उपलब्ध नहीं होते, जिन्हें पब्लिशर किसी भी वैल्यू पर सेट कर सकता है और देख सकता है.

फ़ेंस किए गए फ़्रेम, टॉप लेवल ब्राउज़िंग कॉन्टेक्स्ट की तरह काम करते हैं, जैसे कि ब्राउज़र टैब. हालांकि, इस्तेमाल के कुछ उदाहरणों (जैसे कि opaque-ads) में फ़ेंस किए गए फ़्रेम में क्रॉस-साइट डेटा (जैसे, Protected Audience API इंटरेस्ट ग्रुप) हो सकता है, लेकिन फ़्रेम, सेगमेंट से बाहर रखे गए स्टोरेज या कुकी को ऐक्सेस नहीं कर सकता. opaque-ads के फ़ेंस किए गए फ़्रेम से, यूनीक और नॉन्स आधारित कुकी और स्टोरेज पार्टीशन को ऐक्सेस किया जा सकता है.

फ़ेंस किए गए फ़्रेम की विशेषताओं के बारे में, एक्सप्लेनेशंस में ज़्यादा जानकारी दी गई है.

विज्ञापन को फ़ेंस किए गए फ़्रेम में रेंडर करना

सुरक्षित ऑडियंस नीलामी से FencedFrameConfig मिलता है, बशर्ते AuctionConfigresolveToConfig पैरामीटर को सही पर सेट किया गया हो:

const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true
});

कॉन्फ़िगरेशन हासिल करने के बाद, आपके पास इसे फ़ेंस किए गए फ़्रेम के config एट्रिब्यूट को असाइन करने का विकल्प होता है. इससे फ़्रेम को, कॉन्फ़िगरेशन से दिखाए गए संसाधन पर नेविगेट किया जा सकता है. Chrome के पुराने वर्शन, resolveToConfig प्रॉपर्टी के साथ काम नहीं करते. इसलिए, नेविगेट करने से पहले आपको इस बात की पुष्टि करनी होगी कि प्रॉमिस प्रॉमिस FencedFrameConfig से पूरी हो गई:

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
  const frame = document.createElement('fencedframe');
  frame.config = frameConfig;
}

किसी विज्ञापन को iframe में रेंडर करना

अगर AuctionConfig साफ़ तौर पर resolveToConfig को सेट नहीं करता है या गलत पर सेट है, तो runAdAuction() ओपेक यूआरएन दिखाता है. विज्ञापन को रेंडर करने के लिए, इस यूआरएन को iframe के src के तौर पर सेट किया जा सकता है.