AdsGram

Türkçe

English
Русский
中文
Español
Português

Türkçe

English
Русский
中文
Español
Português

Görünüm

Kod Örnekleri ​

  • Rewarded formatı, kullanıcının reklamı sonuna kadar izlediğinde kullanıcıya ödül vermeniz gerektiği ve reklamın bir öğeye tıkladıktan sonra gibi beklenen olması gerektiği anlamına gelir.
    Reklam gösterme gereksinimleri hakkında daha fazla bilgi.
  • Interstitial formatı, kullanıcının reklamı sonundan önce atlayabileceği ve reklamın uygulamanın akışındaki doğal duraklamalar sırasında beklenen olması gerektiği anlamına gelir
    Reklam gösterme gereksinimleri hakkında daha fazla bilgi.

INFO

Aşağıda Rewarded formatı için kod örnekleri bulunmaktadır. Bu örnekler Interstitial formatı için de geçerlidir. Tek fark, AdController.show() promise'inin sonuna kadar izlenen reklamların yanı sıra kapatılan reklamlar için de çözülmesidir. Basit örneğe buradan ulaşabilirsiniz.

React ​

Script Ekleme ​

Bu scripti HTML'nizin <head> etiketi içine yerleştirin.

useAdsgram Hook Oluşturma ​

Projenizde useAdsgram özel hook dosyasını oluşturun.
Özel hooklar hakkında daha fazla bilgi React dokümantasyonunda bulunmaktadır.

javascript
import { useCallback, useEffect, useRef } from 'react';

export function useAdsgram({ blockId, onReward, onError }) {
  const AdControllerRef = useRef(undefined);

  useEffect(() => {
    AdControllerRef.current = window.Adsgram?.init({ blockId });
  }, [blockId]);

  return useCallback(async () => {
    if (AdControllerRef.current) {
      AdControllerRef.current
        .show()
        .then(() => {
          // kullanıcı reklamı sonuna kadar izler veya interstitial formatında kapatır
          onReward();
        })
        .catch((result) => {
          // kullanıcı reklam oynatma sırasında hata alır
          onError?.(result);
        });
    } else {
      onError?.({
        error: true,
        done: false,
        state: 'load',
        description: 'Adsgram script not loaded',
      });
    }
  }, [onError, onReward]);
}
typescript
import { useCallback, useEffect, useRef } from 'react';
/**
 * TypeScript bölümünü kontrol edin
 * ve adsgram tipleri için kendi yolunuzu kullanın
 */
import type { AdController, ShowPromiseResult } from 'path-to-adsgram-types';

export interface useAdsgramParams {
  blockId: string;
  onReward?: () => void;
  onError?: (result: ShowPromiseResult) => void;
}

export function useAdsgram({ blockId, onReward, onError }: useAdsgramParams): () => Promise<void> {
  const AdControllerRef = useRef<AdController | undefined>(undefined);

  useEffect(() => {
    AdControllerRef.current = window.Adsgram?.init({ blockId, debug: true, debugBannerType: 'FullscreenMedia' });
  }, [blockId]);

  return useCallback(async () => {
    if (AdControllerRef.current) {
      AdControllerRef.current
        .show()
        .then(() => {
          // kullanıcı reklamı sonuna kadar izler veya interstitial formatında kapatır
          onReward?.();
        })
        .catch((result: ShowPromiseResult) => {
          // kullanıcı reklam oynatma sırasında hata alır
          onError?.(result);
        });
    } else {
      onError?.({
        error: true,
        done: false,
        state: 'load',
        description: 'Adsgram script not loaded',
      });
    }
  }, [onError, onReward]);
}

Kullanım Örneği ​

Butona tıklandığında reklamın gösterileceği basit bir button bileşeni örneği.

jsx
import { useCallback, ReactElement } from 'react'
import { useAdsgram } from "./hooks/useAdsgram.ts";


export function ShowAdButton() {
  const onReward = useCallback(() => {
    alert('Reward');
  }, []);
  const onError = useCallback((result) => {
    alert(JSON.stringify(result, null, 4));
  }, []);

  /**
   * your-block-id girin
   */
  const showAd = useAdsgram({ blockId: "your-block-id", onReward, onError });

  return (
    <button onClick={showAd}>Show Ad</button>
  )
}
tsx
import { useCallback, ReactElement } from 'react'
import { useAdsgram } from "./hooks/useAdsgram.ts";
import { ShowPromiseResult } from "./types/adsgram";


export function ShowAdButton(): ReactElement {
  const onReward = useCallback(() => {
    alert('Reward');
  }, []);
  const onError = useCallback((result: ShowPromiseResult) => {
    alert(JSON.stringify(result, null, 4));
  }, []);

  /**
   * your-block-id girin
   */
  const showAd = useAdsgram({ blockId: "your-block-id", onReward, onError });

  return (
    <button onClick={showAd}>Show Ad</button>
  )
}

Unity ​

Unity için eklentimiz bulunmamaktadır.

.jslib dosyası oluşturun, hakkında daha fazla bilgiyi burada okuyabilirsiniz.

Unity'den js fonksiyonlarını bu bağlantıyı kullanarak çağırabilirsiniz.
Js'den unity fonksiyonlarını bu bağlantıyı kullanarak çağırabilirsiniz.

Vanilla js ​

Satır içi script ve reklam göstermek için buton içeren örnek.

html
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Test app</title>
        <script src="https://telegram.org/js/telegram-web-app.js"></script>
        <script src="https://sad.adsgram.ai/js/sad.min.js"></script>
    </head>
    <body>
        <button id="ad">Show ad</button>
        <script>
            // block id'nizi girin
            const AdController = window.Adsgram.init({ blockId: "your-block-id" });
            const button = document.getElementById('ad');
            button.addEventListener('click', () => {
                AdController.show().then((result) => {
                    // kullanıcı reklamı sonuna kadar izler veya interstitial formatında kapatır
                    // rewarded formatı için kullanıcıyı ödüllendirme kodunuz
                    alert('Reward');
                }).catch((result) => {
                    // kullanıcı reklam oynatma sırasında hata alır
                    // hiçbir şey yapmayın veya istediğinizi yapın
                    alert(JSON.stringify(result, null, 4));
                })
            })
        </script>
    </body>
</html>