Contoh kode
- Format Rewarded, yang berarti Anda harus memberikan hadiah kepada pengguna setelah menonton iklan hingga selesai dan iklan diharapkan seperti setelah mengklik elemen.
Informasi lebih lanjut tentang persyaratan menampilkan iklan. - Format Interstitial, yang berarti pengguna dapat melewatkan iklan sebelum selesai dan iklan diharapkan selama jeda alami dalam alur aplikasi
Informasi lebih lanjut tentang persyaratan menampilkan iklan.
INFO
Di bawah ini adalah contoh kode untuk format Rewarded. Contoh-contoh ini juga relevan untuk format Interstitial. Satu-satunya perbedaan adalah bahwa promise AdController.show() diselesaikan untuk iklan yang telah ditonton hingga selesai, serta yang telah ditutup. Contoh sederhana dapat Anda temukan di sini
React
Menyisipkan skrip
Sisipkan skrip ini di dalam tag <head> HTML Anda.
Membuat hook useAdsgram
Buat file di dalam proyek Anda dengan hook kustom useAdsgram.
Informasi lebih lanjut tentang hook kustom dalam dokumentasi 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(() => {
// pengguna menonton iklan hingga selesai atau menutupnya dalam format interstitial
onReward();
})
.catch((result) => {
// pengguna mendapatkan error saat memutar iklan
onError?.(result);
});
} else {
onError?.({
error: true,
done: false,
state: 'load',
description: 'Skrip Adsgram tidak dimuat',
});
}
}, [onError, onReward]);
}typescript
import { useCallback, useEffect, useRef } from 'react';
/**
* Lihat Bagian Typescript
* dan gunakan path ke tipe adsgram Anda
*/
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(() => {
// pengguna menonton iklan hingga selesai atau menutupnya dalam format interstitial
onReward?.();
})
.catch((result: ShowPromiseResult) => {
// pengguna mendapatkan error saat memutar iklan
onError?.(result);
});
} else {
onError?.({
error: true,
done: false,
state: 'load',
description: 'Skrip Adsgram tidak dimuat',
});
}
}, [onError, onReward]);
}Contoh penggunaan
Contoh komponen tombol sederhana, saat tombol diklik iklan akan ditampilkan.
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));
}, []);
/**
* sisipkan your-block-id Anda
*/
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));
}, []);
/**
* sisipkan your-block-id Anda
*/
const showAd = useAdsgram({ blockId: "your-block-id", onReward, onError });
return (
<button onClick={showAd}>Show Ad</button>
)
}Unity
Kami belum memiliki plugin untuk Unity.
Buat file .jslib, Anda dapat membaca lebih lanjut tentang hal itu di sini.
Anda dapat memanggil fungsi js dari unity menggunakan ini.
Anda dapat memanggil fungsi unity dari js menggunakan ini.
Vanilla js
Contoh dengan skrip inline dan tombol untuk menampilkan iklan.
html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Aplikasi Test</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">Tampilkan iklan</button>
<script>
// sisipkan block id Anda
const AdController = window.Adsgram.init({ blockId: "your-block-id" });
const button = document.getElementById('ad');
button.addEventListener('click', () => {
AdController.show().then((result) => {
// pengguna menonton iklan hingga selesai atau menutupnya dalam format interstitial
// kode Anda untuk memberikan hadiah kepada pengguna dalam format rewarded
alert('Reward');
}).catch((result) => {
// pengguna mendapatkan error saat memutar iklan
// tidak melakukan apa-apa atau sesuaikan keinginan Anda
alert(JSON.stringify(result, null, 4));
})
})
</script>
</body>
</html>