@ adsgram/ 反应
Adsgram SDK 的回放装订. 为广告任务和全屏横幅提供组件和钩子.
安装
npm install @adsgram/react
# or
yarn add @adsgram/react
# or
pnpm add @adsgram/react
构成部分
<AdsgramTask />
反应包装组件 <adsgram-task> 自定义元素。 用于 任务 广告格式.
道具
| Prop | 类型 | 说明 |
|---|---|---|
blockId | string | 唯一任务块 ID( 需要) |
debug | boolean | 启用调试模式( 可选) |
className | string | 可选 CSS 类名( 可选) |
onReward | EventHandler | 奖励事件召回( 可选) |
onError | EventHandler | 错误事件召回( 可选) |
onBannerNotFound | EventHandler | 无可用的横幅回调( 可选) |
onTooLongSession | EventHandler | 长会话回调( 可选) |
自定义
更多关于定制和槽使用的信息见 这里
示例
import { JSX } from "react";
import { AdsgramTask } from '@adsgram/react';
export function Task(): JSX.Element | null {
const handleReward = (event: CustomEvent<string>): void => {
console.log("User earned reward:", event.detail);
};
const handleError = (event: CustomEvent<string>): void => {
console.error("Task error:", event.detail);
};
return (
<AdsgramTask blockId="task-123" className={styles.task} onReward={handleReward} onError={handleError}>
<span slot="reward" className={styles.task__reward}>1000 coins</span>
<div slot="button" className={styles.task__button}>go</div>
<div slot="claim" className={styles.task__button_claim}>claim</div>
<div slot="done" className={styles.task__button_done}>done</div>
</AdsgramTask>
);
}
钩子
useAdsgram
管理全屏广告的回放钩. 用于 奖励 财务报告和审定财务报表 暂停 广告格式.
道具
| Prop | 类型 | 说明 |
|---|---|---|
blockId | string | 唯一区块ID( 需要) |
debug | boolean | 启用调试模式( 可选) |
debugBannerType | string | 在调试模式下强制横幅类型( 可选) |
onReward | (event: CustomEvent) => void | 处理器 reward 事件(可选) |
onError | (event: CustomEvent) => void | 处理器 error 事件(可选) |
回返
具有控制 Adsgram 广告方法的对象 :
show(): Promise<ShowPromiseResult>——展示广告并随结果解决.addEventListener(event: string, handler: (event: CustomEvent) => void): void——添加事件收听器.removeEventListener(event: string, handler: (event: CustomEvent) => void): void删除事件倾听器 .destroy(): void- 摧毁广告控制器.
示例
import { JSX } from "react";
import { useAdsgram } from '@adsgram/react';
export function AdButton(): JSX.Element {
const handleReward = (): void => {
// user watch ad till the end
// your code to reward user for rewarded format
}
const handleError = (): void => {
// user get error during playing ad
// do nothing or whatever you want
},
const { show } = useAdsgram({ blockId: '123', onReward: handleReward, onError: handleError });
return <button onClick={show}>Show Ad</button>;
}