Task Entegrasyonu
Gereksinimler
- bir Telegram mini uygulamasına sahip olun
- nerede reklam göstereceğinizi bilin, bilmiyorsanız Reklam entegrasyon örneklerine bakın
1. blockId Oluşturun
Block type Task ile blockId oluşturun. blockId nasıl alınacağına dair detaylı talimatları blockId alma bölümünde bulabilirsiniz.
WARNING
Birden fazla Block type Task oluşturmak, düzgün çalışması için izin verilmez.
2. Kurulum
AdsGram SDK'sını entegre etmek için iki seçeneğiniz vardır.
Script Ekleme
sad.min.js scriptini <head> etiketi içine aşağıdaki kodla yerleştirin:
<script src="https://sad.adsgram.ai/js/sad.min.js"></script>React ve Vue için npm üzerinden kurulum.
Paketlerden task entegrasyonu hakkında daha fazla bilgi için React ve Vue dokümantasyonuna bakın.
npm install @adsgram/reactnpm install @adsgram/vue3. <adsgram-task> Web Bileşenini Kullanın
Task entegrasyonu için <adsgram-task> web bileşenini kullanın.
<adsgram-task
data-block-id='your-block-id'
data-debug="true"
data-debug-console="false"
class="task"
></adsgram-task>Bu web bileşenini html, react, vue ve diğer çerçevelerde yerel HTML elementi gibi kullanabilirsiniz.
your-block-id — https://partner.adsgram.ai adresindeki hesabınızdan alırsınız
blockId nasıl alınacağına dair detaylı talimatları blockId alma bölümünde bulabilirsiniz
WARNING
Task reklamlarında 'your-block-id' 'task-xxx' formatında olmalıdır, burada xxx rakamlardır.
<adsgram-task> aşağıdaki nitelikleri kabul edebilir:
data-block-id— https://partner.adsgram.ai adresinden block id'nizdata-debug— sunucudan test task almak için true olarak ayarlayın.data-debug-console— varsayılan olarak true. Yalnızcadata-debugparametresi true olduğunda çalışır.trueise —ADSGRAM DEBUG LOGönekli detaylı loglar tarayıcı konsoluna yazdırılır.falseise — loglar hata ayıklama modunda bile konsola yazdırılmaz.classveyaclassName— task stil ayarı için sınıf adı belirleyin.
4. Task Uygulamanızın Tasarımına Uygun Şekilde Özelleştirin
Bu amaçla slot elementlerini ve CSS değişkenlerini kullanabilirsiniz.
Slot Kullanımı
Web bileşeni, sınıflar kullanılarak istediğiniz şekilde stillendirilebilen üç slotu destekler:
- reward – görevi tamamlama ödülünü görüntüler.
- button – görevi tamamlama butonu.
- claim – görevi tamamladıktan sonra buton yerine görüntülenir.
- done – ödülü aldıktan sonra buton yerine görüntülenir.
Özelleştirme İçin CSS Parametreleri
Bileşen, CSS değişkenleri aracılığıyla stillendirmeyi destekler:
--adsgram-task-font-size: /* Başlık yazı boyutu */
--adsgram-task-icon-size: /* Simge boyutu */
--adsgram-task-icon-title-gap: /* Simge ile başlık arasındaki boşluk */
--adsgram-task-icon-border-radius: /* Simge kenar yuvarlaklığı */
--adsgram-task-button-width: /* Görevi tamamlama butonunun genişliği */Kullanım örneği: 
5. Olaylara Abone Olun
<adsgram-task> özel olaylara sahiptir, temel HTML elementleri için yaptığınız gibi addEventListener kullanarak bu olaylara abone olabilirsiniz.
Olay Türleri:
| Event | Ne Zaman Gerçekleşir |
|---|---|
reward | kullanıcı görevi tamamladığında |
onError | kullanıcı task yüklenirken veya render edilirken hata aldığında |
onBannerNotFound | gösterilecek task olmadığında |
onTooLongSession | oturum çok uzun olduğunda, reklam almak için uygulamanın yeniden başlatılması gerekir |
Daha Fazla Bilgi
- Uygulamanızda nasıl uygulayacağınızı daha iyi anlamak için kod örneklerine bakın.
- Entegrasyonla ilgili sorun yaşıyorsanız Sorun Giderme bölümüne bakın
- TypeScript kullanıyorsanız TypeScript bölümüne bakın