कोड उदाहरण
- Rewarded प्रारूप में, जिसका अर्थ है कि उपयोगकर्ता को विज्ञापन अंत तक देखने पर पुरस्कार देना चाहिए और विज्ञापन को एक बटन पर क्लिक करने के बाद उम्मीद की जानी चाहिए।
अधिक जानकारी के लिए विज्ञापन आवश्यकताएँ देखें。 - Interstitial प्रारूप में, जिसका अर्थ है कि उपयोगकर्ता अंत से पहले विज्ञापन छोड़ सकता है और विज्ञापन को ऐप में प्राकृतिक विराम के दौरान दिखाना चाहिए।
अधिक जानकारी के लिए विज्ञापन आवश्यकताएँ देखें。
जानकारी
नीचे Rewarded प्रारूप के लिए कोड उदाहरण दिए गए हैं। ये उदाहरण Interstitial प्रारूप के लिए भी प्रासंगिक हैं। एकमात्र अंतर यह है कि AdController.show() प्रॉमिस उन विज्ञापनों के लिए भी resolve होता है जो पूरी तरह देखे गए हों और उन विज्ञापनों के लिए भी जो बंद किए गए हों। सरल उदाहरण आप यहाँ पा सकते हैं
React
स्क्रिप्ट जोड़ें
अपने HTML के <head> में यह स्क्रिप्ट जोड़ें।
useAdsgram हुक बनाएं
अपने प्रोजेक्ट में useAdsgram कस्टम हुक बनाएँ।
कस्टम हुक के बारे में अधिक जानकारी के लिए React documentation देखें।
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';
/**
* Typescript अनुभाग देखें
* 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 फ़ाइल बनाएं, आप इसके बारे में अधिक पढ़ सकते हैं यहाँ।
आप Unity से js फ़ंक्शंस को यहाँ उपयोग करके कॉल कर सकते हैं।
आप JS से Unity फ़ंक्शंस को यहाँ उपयोग करके कॉल कर सकते हैं।
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>