Integrasi Reward dan Interstitial
Persyaratan
- memiliki Telegram mini app
- mengetahui tempat menampilkan iklan, jika belum, lihat Contoh integrasi iklan
- memiliki
blockId, jika belum, lihat Bagian mendapatkan blockId
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 dari paket dapat dilihat dalam dokumentasi untuk React dan Vue.
npm install @adsgram/reactnpm install @adsgram/vueInisialisasi AdsGram SDK
const AdController = window.Adsgram.init({ blockId: "your-block-id" });PENTING
Inisialisasi hanya diperlukan untuk format Reward dan Interstitial. Untuk format Task, inisialisasi tidak diperlukan.
Untuk contoh integrasi format Task, lihat Integrasi Task.
Informasi lebih lanjut tentang fungsi init dapat Anda temukan di Bagian Referensi API.
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
Menampilkan Banner
- Format Rewarded, yang berarti Anda harus memberikan hadiah kepada pengguna setelah menonton iklan hingga selesai.
Informasi lebih lanjut tentang persyaratan menampilkan iklan. - Format Interstitial, yang berarti pengguna dapat melewatkan iklan sebelum selesai.
Informasi lebih lanjut tentang persyaratan menampilkan iklan.
INFO
Di bawah ini adalah contoh kode untuk format Rewarded. Contoh-contoh ini juga relevan untuk format Interstitial. Satu-satunya perbedaan adalah bahwa promise AdController.show() diselesaikan untuk iklan yang telah ditonton hingga selesai, serta yang telah ditutup. Contoh sederhana dapat Anda temukan di sini
Dalam kebanyakan kasus, kode di bawah ini digunakan di dalam event handler klik.
Untuk contoh kode dengan vanilla js, React, Unity, lihat Bagian contoh kode.
AdController.show().then((result) => {
// pengguna menonton iklan hingga selesai atau menutupnya dalam format interstitial
// kode Anda untuk memberikan hadiah kepada pengguna dalam format rewarded
}).catch((result) => {
// pengguna mendapatkan error saat memutar iklan
// tidak melakukan apa-apa atau sesuaikan keinginan Anda
})AdController.show().then((result: ShowPromiseResult) => {
// pengguna menonton iklan hingga selesai atau menutupnya dalam format interstitial
// kode Anda untuk memberikan hadiah kepada pengguna dalam format rewarded
}).catch((result: ShowPromiseResult) => {
// pengguna mendapatkan error saat memutar iklan atau melewatkan iklan
// tidak melakukan apa-apa atau sesuaikan keinginan Anda
})result memiliki tipe sebagai berikut:
interface ShowPromiseResult {
done: boolean; // true jika pengguna menonton hingga selesai atau menutupnya dalam format interstitial, jika tidak false
description: string; // deskripsi event
state: 'load' | 'render' | 'playing' | 'destroy'; // status banner
error: boolean; // true jika event dipancarkan karena error, jika tidak false
}INFO
showPromise menjadi resolved jika pengguna menonton iklan hingga selesai atau menutupnya dalam format interstitial, jika tidak rejected.
TIPS
Rantai promise dengan finally jika Anda perlu menambahkan tindakan tambahan setelah iklan selesai diputar, dilewati, atau mendapatkan error.
Selamat, Anda baru saja menampilkan iklan pertama Anda menggunakan AdsGram!
Informasi Lebih Lanjut
- Contoh integrasi kode untuk React, Unity, vanilla js
- Jika Anda mengalami masalah dengan integrasi, lihat Bagian troubleshooting
- Referensi API AdController lanjutan dapat Anda temukan di Bagian Referensi API
- Jika Anda menggunakan Typescript, lihat Bagian Typescript