دمج Task
المتطلبات
- وجود تطبيق مصغر Telegram
- معرفة مكان عرض الإعلان، إذا لم تكن تعرف، فراجع أمثلة دمج الإعلانات
1. إنشاء blockId
أنشئ blockId بنوع الكتلة Task. تعليمات مفصلة حول كيفية الحصول على blockId يمكنك العثور عليها في قسم الحصول على blockId.
تحذير
إنشاء أكثر من كتلة واحدة بنوع Task غير مسموح به للتشغيل الصحيح.
2. التثبيت
لديك خياران لدمج AdsGram SDK.
إدراج السكريبت
ضع السكريبت sad.min.js في وسم <head> باستخدام هذا الكود:
<script src="https://sad.adsgram.ai/js/sad.min.js"></script>التثبيت عبر npm لـ React و Vue.
مزيد من المعلومات حول دمج task من الحزم في وثائق React و Vue.
npm install @adsgram/reactnpm install @adsgram/vue3. استخدام مكون الويب <adsgram-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 وأي أطر عمل أخرى مثل عنصر HTML أصلي.
your-block-id — تحصل عليه من حسابك على https://partner.adsgram.ai
تعليمات مفصلة حول كيفية الحصول على blockId يمكنك العثور عليها في قسم الحصول على blockId
تحذير
يجب أن يكون 'your-block-id' في إعلانات task بالصيغة 'task-xxx'، حيث xxx هي أرقام.
يمكن أن يقبل <adsgram-task> السمات التالية:
data-block-id— معرّف الكتلة الخاص بك من https://partner.adsgram.aidata-debug— عيّن إلى true للحصول على مهمة اختبار من الخادم.data-debug-console— الافتراضي هو true. يعمل فقط إذا كان المعلمةdata-debugصحيحة.
إذا كانتtrue— سيتم إخراج السجلات التفصيلية بالبادئةADSGRAM DEBUG LOGإلى وحدة تحكم المتصفح. إذا كانتfalse— لا يتم إخراج السجلات إلى وحدة التحكم، حتى في وضع التصحيح.classأوclassName— تعيين اسم الفئة لتنسيق المهمة.
4. تخصيص المهمة لتناسب تصميم تطبيقك
لهذا الغرض يمكنك استخدام عناصر slot ومتغيرات css.
استخدام Slots
يدعم مكون الويب ثلاثة slots يمكن تنسيقها بأي طريقة تريدها باستخدام الفئات:
- reward – يعرض المكافأة مقابل إكمال المهمة.
- button – الزر لإكمال المهمة.
- claim – يُعرض بدلاً من الزر بعد إكمال المهمة.
- done – يُعرض بدلاً من الزر بعد استلام المكافأة.
معلمات CSS للتخصيص
يدعم المكون التنسيق عبر متغيرات CSS:
--adsgram-task-font-size: /* حجم خط العنوان */
--adsgram-task-icon-size: /* حجم الأيقونة */
--adsgram-task-icon-title-gap: /* الفجوة بين الأيقونة والعنوان */
--adsgram-task-icon-border-radius: /* نصف قطر حدود الأيقونة */
--adsgram-task-button-width: /* عرض الزر لإكمال المهمة */مثال على الاستخدام: 
5. الاشتراك في الأحداث
يحتوي <adsgram-task> على أحداث مخصصة، يمكنك الاشتراك في هذا الحدث باستخدام addEventListener بنفس الطريقة التي تفعلها لعناصر HTML الأساسية.
أنواع الأحداث:
| الحدث | يحدث |
|---|---|
reward | عندما يُكمل المستخدم المهمة |
onError | عندما يحصل المستخدم على خطأ أثناء تحميل أو عرض المهمة |
onBannerNotFound | عندما لا توجد مهمة للعرض |
onTooLongSession | عندما تكون الجلسة طويلة جداً، يحتاج المستخدم إلى إعادة تشغيل التطبيق للحصول على الإعلانات |
مزيد من المعلومات
- راجع أمثلة الكود لفهم أفضل لكيفية التنفيذ في تطبيقك.
- إذا واجهت مشاكل في الدمج تحقق من قسم استكشاف الأخطاء
- إذا كنت تستخدم Typescript تحقق من قسم Typescript