Exemples de code
- Format Rewarded, ce qui signifie que vous devez donner une récompense à l'utilisateur lorsqu'il a regardé la publicité jusqu'au bout et la publicité doit être attendue, comme après un clic sur un élément.
Plus d'informations sur les conditions d'affichage des publicités. - Format Interstitial, ce qui signifie que l'utilisateur peut ignorer une publicité avant la fin et la publicité doit être attendue pendant les pauses naturelles dans le flux d'une application.
Plus d'informations sur les conditions d'affichage des publicités.
INFO
Ci-dessous se trouvent des exemples de code pour le format Rewarded. Ces exemples sont également pertinents pour le format Interstitial. La seule différence est que la promesse AdController.show() se résout pour les publicités qui ont été visionnées jusqu'au bout, ainsi que pour celles qui ont été fermées. Un exemple simple est disponible ici
React
Insérer le script
Insérez ce script dans la balise <head> de votre HTML.
Créer le hook useAdsgram
Créez un fichier dans votre projet avec le hook personnalisé useAdsgram.
Plus d'informations sur les hooks personnalisés dans la documentation 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]);
}Exemple d'utilisation
Exemple de composant bouton simple, lorsque l'on clique sur le bouton, la publicité sera affichée.
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
Nous n'avons pas de plugin pour Unity.
Créez un fichier .jslib, vous pouvez en savoir plus ici.
Vous pouvez appeler des fonctions js depuis Unity en utilisant ceci.
Vous pouvez appeler des fonctions Unity depuis js en utilisant ceci.
Vanilla js
Exemple avec script inline et bouton pour afficher la publicité.
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>