AdsGram

العربية

English
Русский
中文
Español
Português
Türkçe
فارسی
Français
Українська
Bahasa Indonesia
हिंदी

العربية

English
Русский
中文
Español
Português
Türkçe
فارسی
Français
Українська
Bahasa Indonesia
हिंदी

المظهر

أمثلة على الكود ​

  • صيغة Rewarded، والتي تعني أنه يجب عليك منح المستخدم مكافأة عندما يشاهد الإعلان حتى النهاية ويجب أن يكون الإعلان متوقعاً مثل بعد النقر على عنصر.
    مزيد من المعلومات حول متطلبات عرض الإعلان.
  • صيغة Interstitial، والتي تعني أنه يمكن للمستخدم تخطي إعلان قبل النهاية ويجب أن يكون الإعلان متوقعاً أثناء التوقفات الطبيعية في تدفق التطبيق
    مزيد من المعلومات حول متطلبات عرض الإعلان.

معلومات

أدناه أمثلة على الكود لصيغة Rewarded. هذه الأمثلة تنطبق أيضاً على صيغة Interstitial. الفرق الوحيد هو أن وعد AdController.show() يتم حله للإعلانات التي تمت مشاهدتها حتى النهاية وتلك التي تم إغلاقها. المثال البسيط يمكنك العثور عليه هنا

React ​

إدراج السكريبت ​

أدرج هذا السكريبت داخل وسم <head> في HTML الخاص بك.

إنشاء useAdsgram hook ​

أنشئ ملفاً داخل مشروعك مع custom hook useAdsgram.
مزيد من المعلومات حول custom hooks في وثائق React.

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(() => {
          // شاهد المستخدم الإعلان حتى النهاية أو أغلقه في صيغة interstitial
          onReward();
        })
        .catch((result) => {
          // حصل المستخدم على خطأ أثناء تشغيل الإعلان
          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
 * واستخدم المسار الخاص بك لأنواع adsgram
 */
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(() => {
          // شاهد المستخدم الإعلان حتى النهاية أو أغلقه في صيغة interstitial
          onReward?.();
        })
        .catch((result: ShowPromiseResult) => {
          // حصل المستخدم على خطأ أثناء تشغيل الإعلان
          onError?.(result);
        });
    } else {
      onError?.({
        error: true,
        done: false,
        state: 'load',
        description: 'Adsgram script not loaded',
      });
    }
  }, [onError, onReward]);
}

مثال على الاستخدام ​

مثال على مكون زر بسيط، عند النقر على الزر سيتم عرض الإعلان.

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
   */
  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
   */
  const showAd = useAdsgram({ blockId: "your-block-id", onReward, onError });

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

Unity ​

لا نملك plugin لـ unity.

أنشئ ملف .jslib، يمكنك قراءة المزيد عنه هنا.

يمكنك استدعاء دوال js من unity باستخدام هذا.
يمكنك استدعاء دوال unity من js باستخدام هذا.

Vanilla js ​

مثال مع سكريبت مدمج وزر لعرض الإعلان.

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 الخاص بك
            const AdController = window.Adsgram.init({ blockId: "your-block-id" });
            const button = document.getElementById('ad');
            button.addEventListener('click', () => {
                AdController.show().then((result) => {
                    // شاهد المستخدم الإعلان حتى النهاية أو أغلقه في صيغة interstitial
                    // الكود الخاص بك لمكافأة المستخدم في صيغة rewarded
                    alert('Reward');
                }).catch((result) => {
                    // حصل المستخدم على خطأ أثناء تشغيل الإعلان
                    // لا تفعل شيئاً أو افعل ما تريد
                    alert(JSON.stringify(result, null, 4));
                })
            })
        </script>
    </body>
</html>