نمونه‌های کد
- قالب Rewarded، به این معنی که باید به کاربر پاداش بدهید وقتی تبلیغ را تا انتها مشاهده کرد و تبلیغ باید مورد انتظار باشد، مثلاً پس از کلیک روی یک عنصر.
اطلاعات بیشتر درباره الزامات نمایش تبلیغ. - قالب Interstitial، به این معنی که کاربر می‌تواند تبلیغ را قبل از انتها ببندد و تبلیغ باید در حین مکث‌های طبیعی در جریان اپلیکیشن مورد انتظار باشد.
اطلاعات بیشتر درباره الزامات نمایش تبلیغ.
اطلاعات
در زیر نمونه‌های کد برای قالب Rewarded آمده است. این نمونه‌ها برای قالب Interstitial نیز معتبر هستند. تنها تفاوت این است که promise مربوط به AdController.show() هم برای تبلیغاتی که تا انتها مشاهده شده‌اند و هم برای تبلیغاتی که بسته شده‌اند، resolve می‌شود. مثال ساده را می‌توانید اینجا پیدا کنید.
React
درج اسکریپت
این اسکریپت را داخل تگ <head> HTML خود قرار دهید.
ایجاد هوک useAdsgram
فایلی در پروژه خود با هوک سفارشی useAdsgram ایجاد کنید.
اطلاعات بیشتر درباره هوک‌های سفارشی در مستندات 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(() => {
// user watch ad till the end or close it in interstitial format
onReward();
})
.catch((result) => {
// user get error during playing ad
onError?.(result);
});
} else {
onError?.({
error: true,
done: false,
state: 'load',
description: 'Adsgram script not loaded',
});
}
}, [onError, onReward]);
}typescript
import { useCallback, useEffect, useRef } from 'react';
/**
* Check Typescript section
* and use your path to adsgram types
*/
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(() => {
// user watch ad till the end or close it in interstitial format
onReward?.();
})
.catch((result: ShowPromiseResult) => {
// user get error during playing ad
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));
}, []);
/**
* insert 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));
}, []);
/**
* insert your-block-id
*/
const showAd = useAdsgram({ blockId: "your-block-id", onReward, onError });
return (
<button onClick={showAd}>Show Ad</button>
)
}Unity
ما پلاگینی برای 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>
// insert your block id
const AdController = window.Adsgram.init({ blockId: "your-block-id" });
const button = document.getElementById('ad');
button.addEventListener('click', () => {
AdController.show().then((result) => {
// user watch ad till the end or close it in interstitial format
// your code to reward user for rewarded format
alert('Reward');
}).catch((result) => {
// user get error during playing ad
// do nothing or whatever you want
alert(JSON.stringify(result, null, 4));
})
})
</script>
</body>
</html>