टास्क एकीकरण
आवश्यकताएँ
- Telegram mini app होना चाहिए
- पता होना चाहिए कि विज्ञापन कहाँ दिखाना है; यदि नहीं तो एकीकरण उदाहरण देखें
blockIdहोना चाहिए; यदि नहीं तो Get blockId अनुभाग देखें
1. blockId बनाएं
Block type Task के साथ blockId बनाएं। ब्लॉकID कैसे प्राप्त करें, इसके लिए Get blockId अनुभाग देखें।
चेतावनी
एक से अधिक Task प्रकार के ब्लॉक बनाना उचित कार्यक्षमता के लिए अनुमति नहीं है।
2. स्थापना
आपके पास AdsGram SDK को एकीकृत करने के दो विकल्प हैं।
स्क्रिप्ट डालें
sad.min.js स्क्रिप्ट को <head> टैग में रखें:
<script src="https://sad.adsgram.ai/js/sad.min.js"></script>npm से React और Vue के लिए इंस्टॉल करें।
अधिक जानकारी के लिए React और Vue पैकेज दस्तावेज़ देखें।
npm install @adsgram/reactnpm install @adsgram/vue3. <adsgram-task> वेब कंपोनेंट का उपयोग करें
Task को एकीकृत करने के लिए <adsgram-task> वेब कंपोनेंट का उपयोग करें।
<adsgram-task
data-block-id='your-block-id'
data-debug="true"
data-debug-console="false"
class="task"
></adsgram-task>आप यह वेब कंपोनेंट HTML, React, Vue या किसी अन्य फ्रेमवर्क में उपयोग कर सकते हैं।
your-block-id — यह आपको https://partner.adsgram.ai/ से मिलता है।
चेतावनी
'your-block-id' Task ads में 'task-xxx' प्रारूप में होना चाहिए, जहाँ xxx संख्याएँ हैं।
<adsgram-task> निम्नलिखित attributes स्वीकार करता है:
data-block-id— आपका block iddata-debug— टेस्ट ब्लॉक के लिए true सेट करेंdata-debug-console— डिफ़ॉल्ट true है; केवलdata-debug=trueहोने पर काम करता है।classयाclassName— स्टाइल के लिए क्लास नाम सेट करें।
4. Task को अपने ऐप डिज़ाइन में अनुकूलित करें
आप slot elements और CSS variables का उपयोग करके इसे अपने डिज़ाइन के अनुसार बदल सकते हैं।
Slots उपयोग
यह वेब कंपोनेंट तीन स्लॉट्स को सपोर्ट करता है:
- reward – task पूरा करने पर पुरस्कार दिखाता है
- button – पूरा करने के लिए बटन
- claim – पुरस्कार प्राप्त करने के बाद दिखाए जाने वाला बटन
- done – पुरस्कार प्राप्त करने के बाद दिखने वाला बटन
CSS पैरामीटर्स
कस्टमाइज़ेशन के लिए CSS variables:
--adsgram-task-font-size: /* टाइटल के लिए फॉन्ट साइज */
--adsgram-task-icon-size: /* आइकन का आकार */
--adsgram-task-icon-title-gap: /* आइकन और शीर्षक के बीच की दूरी */
--adsgram-task-icon-border-radius: /* आइकन का बॉर्डर रेडियस */5. events पर सब्सक्राइब करें
<adsgram-task> कस्टम events प्रदान करता है जिन्हें आप addEventListener के साथ सुन सकते हैं।
Events प्रकार:
| Event | Occurs |
|---|---|
reward | जब उपयोगकर्ता task पूरा करता है |
onError | जब लोड या रेंडर के दौरान त्रुटि होती है |
onBannerNotFound | जब कोई task दिखाने के लिए नहीं मिलता |
onTooLongSession | जब सत्र बहुत लंबा है, उपयोगकर्ता को ऐप पुनरारंभ करना चाहिए |
अधिक जानकारी
- बेहतर समझ के लिए कोड उदाहरण देखें。
- यदि एकीकरण में परेशानी हो, तो समस्या निवारण देखें。
- यदि आप TypeScript का उपयोग करते हैं, तो Typescript अनुभाग देखें。