HTML5 बैनर को ad server के लिए कैसे तैयार करें

आपकी स्क्रीन पर बैनर बिल्कुल सही दिख सकता है और फिर भी ad server उसे अस्वीकार कर सकता है। ज़्यादातर वजह एक ही होती है: कोई तकनीकी विवरण जिसकी किसी ने जाँच नहीं की। यह गाइड क्रम से बताती है कि HTML5 बैनर अपलोड करने से पहले क्या जाँचना चाहिए।

शुरू करने से पहले

प्रकाशित करने वाले से (या लक्ष्य प्लेटफ़ॉर्म का दस्तावेज़ पढ़कर) तीन बातें पूछें: कौन से आकार स्वीकार होते हैं, हर फ़ाइल कितना वज़न रख सकती है, और क्या बाहरी संसाधनों की अनुमति है। ये तीन जवाब बाकी सब तय करते हैं, और हर प्लेटफ़ॉर्म के अपने होते हैं।

पैकेज: रूट में index.html वाला एक .zip

बैनर .zip फ़ाइल के रूप में दिया जाता है। उसके भीतर index.html रूट में होना चाहिए (किसी फ़ोल्डर के अंदर नहीं), और छवियाँ या फ़ॉन्ट जैसे संसाधन उसके साथ या उप-फ़ोल्डरों में हों। एक आम गलती है पूरे फ़ोल्डर को ज़िप करना, उसकी सामग्री को नहीं: ad server .zip खोलता है, रूट में index.html नहीं पाता और उसे अस्वीकार कर देता है।

अगर आपके कई आकार या भाषाएँ हैं, तो हर संयोजन एक अलग पीस है, जिसका अपना .zip होता है। BannerMotion इन्हें डिफ़ॉल्ट रूप से ऐसे पैक करता है («हर पीस के लिए एक .zip») और भाषाओं को फ़ोल्डरों में भी रख सकता है («हर आकार के लिए एक .zip»)।

घोषित आकार

बैनर <head> में एक meta टैग से बताता है कि वह कितना बड़ा है। प्लेटफ़ॉर्म इसे पढ़कर तय करता है कि उसे कैसे दिखाना है, और जाँचता है कि यह आपके खरीदे गए स्थान से मेल खाता है।

<meta name="ad.size" content="width=300,height=250">

टैग का आकार, बैनर के कंटेनर का आकार और खरीदा गया स्थान पिक्सेल-दर-पिक्सेल मेल खाने चाहिए। 300×600 के स्थान में 300×250 का बैनर उत्पादन की गलती है, प्लेटफ़ॉर्म की नहीं।

clickTag: गंतव्य लिंक

गंतव्य लिंक बैनर के भीतर सीधे नहीं लिखा जाता। बैनर एक वेरिएबल पढ़ता है जिसका नाम clickTag है, जिसे प्लेटफ़ॉर्म परिभाषित करता है, और किसी के क्लिक करने पर उसका उपयोग करता है। इस तरह ad server आपके पेज पर भेजने से पहले हर क्लिक गिन सकता है।

<script>
  var clickTag = "https://tu-sitio.com";
</script>

<div id="hit" role="link" tabindex="0"></div>
<script>
  document.getElementById("hit").onclick = function () {
    window.open(window.clickTag, "_blank");
  };
</script>

तीन विवरण जो अक्सर छूट जाते हैं: वेरिएबल को ठीक clickTag लिखा जाना चाहिए (अक्षरों का आकार मायने रखता है); फ़ाइल में लिखा पता परीक्षण के लिए है, क्योंकि कई प्लेटफ़ॉर्म विज्ञापन दिखाते समय उसे बदल देते हैं; और बैनर में केवल एक क्लिक क्रिया होनी चाहिए, जो पूरे पीस को कवर करे। कुछ प्लेटफ़ॉर्म अपनी लाइब्रेरी या अलग नाम का उपयोग करते हैं: उनकी गाइड देखें।

.zip का अधिकतम वज़न

हर प्लेटफ़ॉर्म .zip के लिए एक अधिकतम सीमा रखता है। हमेशा अंतिम .zip का वज़न मापें, बिना संपीड़ित फ़ोल्डर का नहीं, और थोड़ा हाशिया रखें: अस्वीकृति को ठीक करने से पहले कम करना आसान है। कुछ प्लेटफ़ॉर्म प्रारंभिक लोड और कुल लोड में भी फ़र्क करते हैं (जिसे polite load कहते हैं)।

BannerMotion हर पीस का वज़न निर्यात के समय मापता है और उसे आपकी सेट की गई सीमा से तुलना करता है; वह सीमा आपके प्लेटफ़ॉर्म की असली सीमा का विकल्प नहीं है। बैनरों में तीसरे पक्ष की लाइब्रेरी शामिल नहीं होतीं, जो वज़न कम रखने में मदद करता है। [PLACEHOLDER: प्रकाशित करने योग्य माप मिलने पर एक पीस का विशिष्ट वज़न।]

वज़न में क्या सबसे ज़्यादा जुड़ता है, बड़े से छोटे क्रम में: वीडियो, छवियाँ (खासकर retina स्क्रीन के लिए दोगुने रिज़ॉल्यूशन पर), बहुत सारी शैलियों वाले फ़ॉन्ट और लाइब्रेरी। कम करने के लिए: जहाँ संभव हो छवियों के बजाय टेक्स्ट और वेक्टर आकार (SVG) उपयोग करें, छोटे आइकन एक sprite में रखें, फ़ोटो संपीड़ित करें, और केवल वे फ़ॉन्ट-वज़न लोड करें जो आप इस्तेमाल करते हैं।

बाहरी संसाधन नहीं

बैनर को जो कुछ चाहिए, सब .zip के भीतर होना चाहिए: छवियाँ, फ़ॉन्ट और लाइब्रेरी। कई प्लेटफ़ॉर्म उन फ़ाइलों को ब्लॉक या दंडित करते हैं जो किसी दूसरे सर्वर से माँगी जाती हैं (CDN का फ़ॉन्ट, बाहर होस्ट की गई लाइब्रेरी), क्योंकि वे उपलब्धता या सुरक्षा की गारंटी नहीं दे सकते। BannerMotion में पैकेज स्वयं-निहित है: वह किसी दूसरे डोमेन से अनुरोध नहीं करता।

एनिमेशन, अवधि और दोहराव

प्लेटफ़ॉर्म अक्सर सीमित करते हैं कि एनिमेशन कितना चलता है और कितनी बार दोहराता है (अक्सर अधिकतम लगभग 30 सेकंड और कम संख्या में चक्र)। सटीक मान हर प्लेटफ़ॉर्म का अपना है। BannerMotion का निर्यातक अपने सामान्य प्रीसेट में अधिकतम 30 सेकंड की अवधि से शुरू करता है।

दो अच्छी आदतें जो किसी पर निर्भर नहीं: अंतिम फ़्रेम में संदेश और बटन पूरे हों (क्योंकि वह फ़्रेम स्क्रीन पर रुका रहता है), और गतियाँ कुछ अच्छे चुने हुए keyframes पर सहज easing वक्रों से बनें, न कि बहुत सारी झटकेदार गतियों से।

बैकअप छवि

कुछ प्लेटफ़ॉर्म एक बैकअप छवि (JPG, PNG या GIF) माँगते हैं, उसी आकार की, जो तब दिखती है जब ब्राउज़र HTML5 नहीं चला पाता। आम तौर पर एनिमेशन का अंतिम फ़्रेम इस्तेमाल होता है। पुष्टि करें कि आपका प्लेटफ़ॉर्म इसे माँगता है या नहीं, यह पैकेज के भीतर जाती है या अलग, और अधिकतम वज़न कितना है। BannerMotion में स्थिर बैकअप निर्यात स्क्रीन पर «जल्द आ रहा है» के रूप में दिखता है।

अपलोड से पहले परीक्षण

अपनी .zip को एक नए फ़ोल्डर में खोलें और index.html को ब्राउज़र में खोलें। जाँचें कि एनिमेशन पूरा चलता है, टेक्स्ट कटता नहीं, क्लिक वही पता खोलता है जिसकी आप उम्मीद करते हैं, और ब्राउज़र के कंसोल में कोई त्रुटि नहीं है। अभियान के सबसे छोटे और सबसे बड़े आकार पर दोहराएँ।

जिस बैनर का परीक्षण नहीं हो सकता, वह पूरा नहीं है।

समीक्षा सूची

• .zip के रूट में index.html है।
• ad.size टैग बैनर के आकार और खरीदे गए स्थान से मेल खाता है।
• क्लिक clickTag का उपयोग करता है और केवल एक क्लिक क्रिया है।
• .zip का वज़न प्लेटफ़ॉर्म की सीमा से कम है (BannerMotion आपके सेट किए गए सीमा के साथ चेतावनी देता है)।
• कोई बाहरी संसाधन नहीं: कुछ भी किसी दूसरे डोमेन से नहीं माँगा जाता।
• अवधि और दोहराव प्लेटफ़ॉर्म की अनुमति के भीतर हैं।
• अंतिम फ़्रेम में पूरा संदेश और बटन है।
• ब्राउज़र में परीक्षण किया गया, सबसे छोटे और सबसे बड़े आकार पर।

अपलोड करते समय: trafficking क्या है

बैनर अपलोड करना और उसे उसके अभियान, तारीखों और स्थानों से जोड़ना trafficking का काम है। जब पैकेज सही तैयार हो, तो यह कदम बस अपलोड करने, प्लेटफ़ॉर्म के प्रीव्यू में परखने और असाइन करने तक रह जाता है। प्रकाशित करने के बाद ad server की रिपोर्ट में पुष्टि करें कि क्लिक गिने जा रहे हैं।

BannerMotion हर पीस को घोषित आकार, शामिल clickTag और सत्यापित वज़न के साथ निर्यात करता है, और कुछ छूटने पर चेतावनी देता है। ad servers पर सीधे भेजना उत्पाद योजना में है: अभी आप पैकेज डाउनलोड करके हाथ से अपलोड करते हैं।