Integrasi Task
Persyaratan
- memiliki Telegram mini app
- mengetahui tempat menampilkan iklan, jika belum, lihat Contoh integrasi iklan
1. Membuat blockId
Buat blockId dengan Block type Task. Instruksi lengkap tentang cara mendapatkan blockId dapat Anda temukan di Bagian mendapatkan blockId.
PERINGATAN
Membuat lebih dari satu Block type Task tidak diizinkan agar fungsionalitas berjalan dengan benar.
2. Instalasi
Anda memiliki dua opsi untuk mengintegrasikan AdsGram SDK.
Menyisipkan skrip
Tempatkan skrip sad.min.js di dalam tag <head> menggunakan kode ini:
<script src="https://sad.adsgram.ai/js/sad.min.js"></script>Instalasi melalui npm untuk React dan Vue.
Informasi lebih lanjut tentang integrasi task dari paket dapat dilihat dalam dokumentasi untuk React dan Vue.
npm install @adsgram/reactnpm install @adsgram/vue3. Menggunakan komponen web <adsgram-task>
Untuk mengintegrasikan task, gunakan komponen web <adsgram-task>.
<adsgram-task
data-block-id='your-block-id'
data-debug="true"
data-debug-console="false"
class="task"
></adsgram-task>Anda dapat menggunakan komponen web ini dalam HTML, React, Vue, dan framework lainnya seperti elemen HTML native.
your-block-id — Anda dapatkan dari akun Anda di https://partner.adsgram.ai
Instruksi lengkap tentang cara mendapatkan blockId dapat Anda temukan di Bagian mendapatkan blockId
PERINGATAN
'your-block-id' dalam iklan task harus dalam format 'task-xxx', di mana xxx adalah angka.
<adsgram-task> dapat menerima atribut berikut:
data-block-id— block id Anda dari https://partner.adsgram.aidata-debug— atur ke true untuk mendapatkan task test dari server.data-debug-console— default adalah true. Hanya berfungsi jika parameterdata-debugbernilai true.
Jikatrue— log terperinci dengan awalanADSGRAM DEBUG LOGakan ditampilkan di konsol browser. Jikafalse— log tidak ditampilkan di konsol, bahkan dalam mode debug.classatauclassName— atur nama class untuk styling task.
4. Menyesuaikan task agar sesuai dengan desain aplikasi Anda
Untuk keperluan ini, Anda dapat menggunakan elemen slot dan variabel CSS.
Penggunaan Slot
Komponen web mendukung tiga slot yang dapat digayakan sesuka Anda menggunakan class:
- reward — menampilkan hadiah setelah menyelesaikan task.
- button — tombol untuk menyelesaikan task.
- claim — ditampilkan sebagai pengganti tombol setelah menyelesaikan task.
- done — ditampilkan sebagai pengganti tombol setelah menerima hadiah.
Parameter CSS untuk Kustomisasi
Komponen mendukung styling melalui variabel CSS:
--adsgram-task-font-size: /* Ukuran font judul */
--adsgram-task-icon-size: /* Ukuran ikon */
--adsgram-task-icon-title-gap: /* Jarak antara ikon dan judul */
--adsgram-task-icon-border-radius: /* Radius border ikon */
--adsgram-task-button-width: /* Lebar tombol untuk menyelesaikan task */Contoh penggunaan: 
5. Berlangganan event
<adsgram-task> memiliki event kustom, Anda dapat berlangganan event ini menggunakan addEventListener dengan cara yang sama seperti yang Anda lakukan untuk elemen HTML dasar.
Jenis event:
| Event | Terjadi |
|---|---|
reward | saat pengguna menyelesaikan task |
onError | saat pengguna mendapatkan error selama pemuatan atau rendering task |
onBannerNotFound | saat tidak ada task untuk ditampilkan |
onTooLongSession | saat sesi terlalu lama, pengguna perlu memulai ulang aplikasi untuk mendapatkan iklan |
Informasi Lebih Lanjut
- Lihat contoh kode untuk pemahaman yang lebih baik tentang cara mengimplementasikan dalam aplikasi Anda.
- Jika Anda mengalami masalah dengan integrasi, lihat Bagian troubleshooting
- Jika Anda menggunakan Typescript, lihat Bagian Typescript