یکپارچه‌سازی Task
الزامات
- داشتن Telegram mini app
- دانستن محل نمایش تبلیغ، اگر نمی‌دانید، به نمونه‌های یکپارچه‌سازی تبلیغ مراجعه کنید
۱. ایجاد blockId
blockId را با Block type Task ایجاد کنید. دستورالعمل دقیق نحوه دریافت blockId را می‌توانید در بخش دریافت blockId پیدا کنید.
هشدار
ایجاد بیش از یک Block type Task برای عملکرد صحیح مجاز نیست.
۲. نصب
دو گزینه برای یکپارچه‌سازی 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/vue۳. استفاده از کامپوننت وب <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 و سایر فریم‌ورک‌ها مانند یک عنصر HTML بومی استفاده کنید.
your-block-id — از حساب خود در https://partner.adsgram.ai دریافت می‌کنید
دستورالعمل دقیق نحوه دریافت blockId را می‌توانید در بخش دریافت blockId پیدا کنید
هشدار
'your-block-id' در تبلیغات task باید در قالب 'task-xxx' باشد که xxx اعداد هستند.
<adsgram-task> می‌تواند ویژگی‌های زیر را بپذیرد:
data-block-id— block id شما از https://partner.adsgram.aidata-debug— برای دریافت task تست از سرور روی true تنظیم کنید.data-debug-console— پیش‌فرض true است. فقط در صورتی کار می‌کند که پارامترdata-debugروی true باشد.
اگرtrueباشد — لاگ‌های دقیق با پیشوندADSGRAM DEBUG LOGدر کنسول مرورگر نمایش داده می‌شوند. اگرfalseباشد — لاگ‌ها حتی در حالت debug نیز در کنسول نمایش داده نمی‌شوند.classیاclassName— نام کلاس را برای استایل‌دهی task تنظیم کنید.
۴. سفارشی‌سازی task تا با طراحی اپلیکیشن شما مطابقت داشته باشد
برای این منظور می‌توانید از slot element ها و متغیرهای css استفاده کنید.
استفاده از Slots
کامپوننت وب از سه slot پشتیبانی می‌کند که می‌توان آن‌ها را با استفاده از کلاس‌ها به هر شکلی استایل‌دهی کرد:
- reward — پاداش تکمیل task را نمایش می‌دهد.
- button — دکمه تکمیل task.
- claim — پس از تکمیل task به جای دکمه نمایش داده می‌شود.
- done — پس از دریافت پاداش به جای دکمه نمایش داده می‌شود.
پارامترهای CSS برای سفارشی‌سازی
کامپوننت از استایل‌دهی از طریق متغیرهای CSS پشتیبانی می‌کند:
--adsgram-task-font-size: /* Font size of the title */
--adsgram-task-icon-size: /* Icon size */
--adsgram-task-icon-title-gap: /* Gap between the icon and the title */
--adsgram-task-icon-border-radius: /* Border radius of the icon */
--adsgram-task-button-width: /* Width of the button for completing the task */مثال استفاده: 
۵. عضویت در رویدادها
<adsgram-task> دارای رویدادهای سفارشی است، می‌توانید با استفاده از addEventListener مشابه عناصر HTML پایه در این رویدادها عضو شوید.
انواع رویدادها:
| رویداد | زمانی رخ می‌دهد |
|---|---|
reward | وقتی کاربر task را تکمیل می‌کند |
onError | وقتی کاربر در حین بارگذاری یا نمایش task با خطا مواجه می‌شود |
onBannerNotFound | وقتی taskای برای نمایش وجود ندارد |
onTooLongSession | وقتی جلسه خیلی طولانی است، کاربر باید اپلیکیشن را مجدداً راه‌اندازی کند تا تبلیغ دریافت کند |
اطلاعات بیشتر
- برای درک بهتر نحوه پیاده‌سازی در اپلیکیشن خود، نمونه‌های کد را ببینید.
- اگر در یکپارچه‌سازی مشکلی دارید، بخش Troubleshooting را بررسی کنید
- اگر از Typescript استفاده می‌کنید، بخش Typescript را بررسی کنید