IMA DAI SDK, कम से कम HbbTV वीडियो प्लेयर ऐप्लिकेशन में इंटिग्रेशन के साथ काम करता है. IMA DAI SDK, Google Ad Manager को ब्रॉडकास्ट कॉन्टेंट स्ट्रीम के साथ ब्रॉडबैंड विज्ञापन स्ट्रीम की मांग करने की सुविधा देता है. इस गाइड में, ब्रॉडकास्ट स्ट्रीम के विज्ञापन इवेंट डेटा के आधार पर, विज्ञापन मेनिफ़ेस्ट लोड करने के बारे में बताया गया है.
इंटिग्रेशन का पूरा सैंपल देखने या उसे फ़ॉलो करने के लिए, IMA HTML5 डीएआई SDK टूल के साथ HbbTV लीनियर सैंपल ऐप्लिकेशन डाउनलोड करें. पुराने टीवी डिवाइसों के साथ काम करने के लिए, यह गाइड और GitHub पर मौजूद सैंपल ऐप्लिकेशन, ES5 JavaScript में है.
HbbTV के अलावा दूसरे प्लैटफ़ॉर्म के साथ इंटिग्रेट करने के बारे में जानकारी पाने के लिए, इंटरैक्टिव मीडिया विज्ञापन SDK टूल देखें.
ज़रूरी शर्तें
इस गाइड को जारी रखने से पहले, पक्का करें कि आपके पास ये चीज़ें हों:
- IMA DAI का इस्तेमाल करने के लिए, आपके पास Ad Manager 360 Advanced खाता होना चाहिए. अगर आपके पास Ad Manager खाता है, तो ज़्यादा जानकारी के लिए अपने खाता मैनेजर से संपर्क करें. Ad Manager के लिए साइन अप करने के बारे में जानने के लिए, Ad Manager के सहायता केंद्र पर जाएं.
- मीडिया चलाने के लिए, ब्रॉडकास्ट ऑब्जेक्ट के साथ इंटरैक्ट करने वाला HbbTV ऐप्लिकेशन. ज़्यादा जानकारी के लिए, HbbTV Broadcast AV ऑब्जेक्ट देखें.
- dash.js का ऐसा वर्शन जो प्रीलोड करने की सुविधा देता हो. हमारा सुझाव है कि आप 4.6.0 या इसके बाद के वर्शन का इस्तेमाल करें.
- ऐप्लिकेशन को होस्ट करने के लिए वेब सर्वर.
- डीवीबी ब्रॉडकास्ट स्ट्रीम वाला टेस्टिंग एनवायरमेंट. टेस्टिंग एनवायरमेंट सेट अप करने के बारे में ज़्यादा जानकारी के लिए, HbbTV ऐप्लिकेशन चलाना लेख पढ़ें.
- ब्रॉडकास्ट स्ट्रीम: कस्टम ऐप्लिकेशन की जानकारी वाली टेबल (एआईटी) का डेटा शामिल करने वाली ब्रॉडकास्ट स्ट्रीम तैयार करें. आपको टीवी पर ब्रॉडकास्ट स्ट्रीम पाने के लिए, उसे ट्रांसमिट करने का तरीका भी चाहिए. ब्रॉडकास्ट स्ट्रीम को ट्रांसमिट करने के लिए, डीवीबी मॉड्यूलेटर या अन्य तरीकों का इस्तेमाल किया जा सकता है.
- वेब सर्वर: HbbTV ऐप्लिकेशन को ऐसे वेब सर्वर पर होस्ट करें जिसे टीवी से ऐक्सेस किया जा सकता हो.
- पॉड सेविंग मेनिफ़ेस्ट टाइप वाला लाइव स्ट्रीम इवेंट. इवेंट बनाने के लिए, डीआई के लिए लाइव स्ट्रीम सेट अप करना लेख पढ़ें.
काम करने वाली ब्रॉडकास्ट स्ट्रीम बनाना
आपका HbbTV ऐप्लिकेशन, आपकी ब्रॉडकास्ट स्ट्रीम में HbbTV स्ट्रीम इवेंट सुनने के लिए broadcastContainer.addStreamEventListener() का इस्तेमाल करता है. विज्ञापनों को सही तरीके से लोड करने और चलाने के लिए,
आपको इन इवेंट टाइप के साथ अपनी ब्रॉडकास्ट स्ट्रीम को सेट अप करना होगा. ऐसा करके,
उससे जुड़ी JSON स्ट्रिंग पेलोड को शामिल किया जा सकता है:
AD_BREAK_EVENT_ANNOUNCE-{"type":"adBreakAnnounce", "pod_id":1,"duration":90, "offset":10}AD_BREAK_EVENT_START-{"type":"adBreakStart"}AD_BREAK_EVENT_END-{"type":"adBreakEnd"}
इन इवेंट के लिए, streamEvent.type के साथ JSON स्ट्रिंग पेलोड शामिल करें. विज्ञापन को पहले से लोड करने की सुविधा इस्तेमाल करने के लिए, AD_BREAK_EVENT_ANNOUNCE इवेंट में streamEvent.duration और streamEvent.offset शामिल होने चाहिए. ज़्यादा जानकारी के लिए, HbbTV के स्ट्रीम इवेंट सुनें देखें.
ब्रॉडकास्ट स्ट्रीम को सेट अप करने के लिए, मल्टीप्लेक्स MPEG ट्रांसपोर्ट स्ट्रीम का उदाहरण देखें.
उदाहरण के तौर पर दी गई स्ट्रीम का इस्तेमाल करने के लिए, आपको अपने स्ट्रीम सेटअप के लिए, ऐप्लिकेशन की जानकारी वाली टेबल का यूआरएल अपडेट करना होगा.
लाइव स्ट्रीम इवेंट दिखाने वाला पॉड बनाना
अपने HbbTV ऐप्लिकेशन पर विज्ञापन दिखाने के लिए, आपको लाइव स्ट्रीम इवेंट दिखाने वाला पॉड चाहिए. इवेंट सेट अप करने के बारे में जानकारी के लिए, डीएआई के लिए लाइव स्ट्रीम सेट अप करना देखें. सेट अप की गई स्ट्रीम को ऐक्सेस करने के लिए, ऐप्लिकेशन में ये वैरिएबल होने चाहिए:
NETWORK_CODE: विज्ञापनों का अनुरोध करने के लिए Ad Manager नेटवर्क कोड.CUSTOM_ASSET_KEY: डीएआई के लिए लाइव स्ट्रीम सेट अप करने की प्रोसेस के दौरान जनरेट की गई, Ad Manager की कस्टम ऐसेट की कुंजी.
ऐप्लिकेशन फ़ाइल संरचना बनाएं
इस गाइड में, IMA HbbTV के सैंपल ऐप्लिकेशन की फ़ाइल से मिलती-जुलती फ़ाइल का इस्तेमाल किया गया है. इस गाइड को समझने के लिए, इन फ़ाइलों को बनाएं:
index.html: आपके ऐप्लिकेशन के लिए एचटीएमएल इंडेक्स.Style.css: आपके ऐप्लिकेशन के लिए सीएसएस स्टाइल.application.js: मुख्य JS एंट्री पॉइंट. वीडियो चलाने की स्थिति और विज्ञापन के लिए ब्रेक मैनेज करता है.video_player.js: विज्ञापन चलाने के लिए इस्तेमाल किए जाने वाले dash.js प्लेयर को मैनेज करता है.ads_manager.js: IMA सेटअप, स्ट्रीम अनुरोध, और इवेंट मैनेज करता है.
ads_manager.js, IMA डीएआई SDK टूल को सेट अप करता है. ये कॉम्पोनेंट, IMA डीएआई SDK टूल को लागू करते हैं:
PodStreamRequest: यह एक ऑब्जेक्ट है, जो Google के विज्ञापन सर्वर को स्ट्रीम का अनुरोध करता है.StreamManager: एक ऐसा ऑब्जेक्ट जो डाइनैमिक विज्ञापन इंसर्शन की स्ट्रीम और डीएआई बैकएंड के साथ इंटरैक्शन को मैनेज करता है. स्ट्रीम मैनेजर, ट्रैकिंग पिंग को भी मैनेज करता है. साथ ही, स्ट्रीम और विज्ञापन इवेंट को पब्लिशर को फ़ॉरवर्ड करता है.
अपने टेस्टिंग एनवायरमेंट को सेट अप करने के बारे में ज़्यादा जानकारी के लिए, HbbTV ऐप्लिकेशन चलाने से जुड़ी यह गाइड देखें.
IMA डीएआई SDK टूल और DASH.js लोड करना
ब्रॉडकास्ट विज्ञापन स्ट्रीम चलाने के लिए, अपने ऐप्लिकेशन में IMA DAI SDK टूल और dash.js लोड करें. application.js टैग से पहले, index.html में स्क्रिप्ट टैग का इस्तेमाल करके dash.js और IMA फ़्रेमवर्क जोड़ें.
<script src="https://cdn.jsdelivr.net/npm/dashjs@latest/dist/dash.all.min.js"></script> <script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
इसके बाद, dash.js प्लेयर को शुरू करने और कंट्रोल करने के लिए, वीडियो प्लेयर की एक रैपर क्लास बनाएं.