提示

Beta feature

SDK 广告集成案例

React 示例代码

激励广告

无需提前加载广告，直接一键弹出，用户点击广告后会触发回调函数，您可以在回调函数中处理广告点击后的逻辑，例如发放奖励或者道具。

import React, { useEffect, useState } from 'react'
import { TonAdPopupShow } from 'ton-ai-sdk'

const SingleAdPopupDemo = () => {
  const blockId = 'your_block_id'
  const showPopup = () => {
    TonAdPopupShow({
      blockId,
      onAdClick: (ad) => {
        // 广告被点击时触发
        console.log('Ad clicked:', ad)
        // 请在这里处理广告点击后的逻辑,例如发放奖励或者道具
        // sendReward()
      },
      onAdError: (error) => {
        // 广告加载失败时触发
        console.error('Ad error:', error)
      },
    })
  }

  return (
    <button
      onClick={() => {
        showPopup()
      }}
    >
      {'Click & Show Ad'}
    </button>
  )
}

原生广告

一次性获取多个广告，可以很好地融入到应用的内容中，做到广告即内容，对用户体验的干扰较低。

import React, { useEffect, useState } from 'react'
import { TonAdPopupShow, GetMultiTonAd } from 'ton-ai-sdk'

const MutliAdPopupDemo = () => {
  const blockId = 'your_block_id'
  const [ads, setAds] = useState([])
  const limit = 5

  // 弹出 Popup 广告
  const showAdPopup = (adTon) => {
    TonAdPopupShow({
      tonAd: adTon,
      onAdClick: (ad) => {
        // 广告被点击时触发
        console.log('Ad clicked:', ad)
        // 请在这里处理广告点击后的逻辑,例如发放奖励或者道具
        // sendReward()
      },
      onAdError: (error) => {
        // 广告加载失败时触发
        console.error('Ad error:', error)
      },
    })
  }

  useEffect(() => {
    // 获取多个广告
    const fetchAds = async () => {
      const { ads } = await GetMultiTonAd(blockId, limit)
      setAds(ads)
    }
    fetchAds()
  }, [])

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <span
        style={{
          fontSize: '18px',
          fontWeight: 'bold',
          marginBottom: '10px',
        }}
      >
        Ad List:
      </span>
      {/* 渲染多个广告的 UI Item */}
      {ads?.map((ad) => {
        return (
          <div
            key={ad.adId}
            onClick={() => showAdPopup(ad)}
            style={{
              padding: '10px',
              margin: '5px',
              border: '1px solid #ccc',
              borderRadius: '5px',
              cursor: 'pointer',
            }}
          >
            {ad.text}
          </div>
        )
      })}
    </div>
  )
}

Vue 示例代码

提示

Coming soon

Unity 示例代码

提示

Coming Soon

Vanilla js 示例代码

提示

Coming Soon