React Native 的横幅集成
使用 LevelPlay SDK 在 React 本地 app程序中实现横幅广告服务，包括设置、初始化和监听器配置。
阅读时间6 分钟最后更新于 2 天前
横幅是由系统启动的矩形广告服务，可以是静态广告，也可以是动画广告，并在实时 app 内容周围的指定区域提供。
注意
本文档与 SDK 8.4.0+ 相关。
先决条件
- 确保已将 LevelPlay React 原生 SDK 正确集成到 app 中。此处概述了集成。
- 确保使用 LevelPlay Initialization API 初始化 SDK。
- 在 LevelPlay 后台中找到 AdUnitID。
创建横幅广告对象并设置大小
横幅广告对象的创建应在接收 onInitSuccess 回调后完成。
import { LevelPlayBannerAdView、 LevelPlayAdSize, type LevelPlayBannerAdViewMethods、 type LevelPlayBannerAdViewListener，} 来自“Unity LevelPlay-mediation”const bannerAdViewRef = useRef<LevelPlayBannerAdViewMethods>(null);const adSize = LevelPlayAdSize.BANNER; // or await LevelPlayAdSize.createAdaptiveAdSize() for adaptiveconst listener = { /* LevelPlayBannerAdViewListener */ };const loadAd = useCallback(() => { bannerAdViewRef.current?.loadAd();}, []);return ( <LevelPlayBannerAdView ref={bannerAdViewRef} adUnitId="YOUR_AD_UNIT_ID" adSize={adSize} placementName="YOUR_PLACEMENT" listener={listener} style={ width: adSize.width, height: adSize.height }} />);
横幅大小
LevelPlayAdSize | 描述 | Dimensions in dp（Width X Height） |
|---|---|---|
| BANNER | 标准横幅 | 320 x 50 |
| 大型 | 大型横幅 | 320 x 90 |
| 中矩形 | 中等矩形 (MREC) | 300 x 250 |
| 自适应 | 自动渲染广告服务以调整移动端和平板电脑的大小和方向 | 设备宽度 X 建议高度 |
要创建广告大小，请遵循以下选项之一：
**适应屏幕宽度的自适应广告大小（推荐）：**此选项取代了“SMART”集成，因为它将根据设备类型返回横幅或 LEADERBOARD。支持自适应功能的网络（Google、Yandex）将根据其优化逻辑返回高度。
let adSize = await LevelPlayAdSize.createAdaptiveAdSize();
**使用固定宽度广告大小的自适应广告大小：**此选项允许您设置指定的宽度。支持自适应横幅功能的网络（Google、Yandex）将根据提供的宽度根据其优化逻辑返回高度。所有其他网络将根据提供的宽度返回回退大小（横幅或 LEADERBOARD）。
let adSize = await LevelPlayAdSize.createAdaptiveAdSize(400);
**指定的横幅大小：**此选项允许您专门设置横幅大小：横幅、大横幅、中等横幅。
let adSize = LevelPlayAdSize.MEDIUM_RECTANGLE;
广告位
我们支持在横幅广告中放置仅用于举报。应在 loadAd 之前设置广告位，以影响所有重新加载的广告服务。
设置横幅监听器
在代码中实现 LevelPlayBannerAdViewListener 以获取广告投放信息。
- 建议在加载横幅广告之前设置监听器。
- 每个横幅广告都应有自己的监听器实现。
- 回调在主线程上运行。
const 监听器：LevelPlayBannerAdViewListener = { onAdLoaded：（adInfo：LevelPlayAdInfo) => { // Invoked each time a banner was loaded.刷新时或手动加载。 }, onAdLoadFailed：（报错：LevelPlayAdError) => { // Invoked when the banner loading process has failed. // This callback will be sent both for manual load and refreshed banner failures. }, onAdDisplayed：（adInfo：LevelPlayAdInfo) => { // Notifies the screen is displayed. }, onAdDisplayFailed：（adInfo：LevelPlayAdInfo，报错：LevelPlayAdError) => { // Notifies the screen failed to display. }, onAdClicked：（adInfo：LevelPlayAdInfo) => { // Invoked when end user clicks on the banner ad. }, onAdExpanded：（adInfo：LevelPlayAdInfo) => { // Ad is opened on full screen }, onAdCollapsed：（adInfo：LevelPlayAdInfo) => { // Ad is restored to its original size }, onAdLeftApplication：（adInfo：LevelPlayAdInfo) => { // Invoked when the user left the app. },};
加载横幅广告
要加载横幅广告，请使用 loadAd。
// Load the banner adbannerAdViewRef.current?.loadAd();
暂停和恢复横幅刷新
如果在平台中定义了刷新值，则可以在代码中暂停横幅刷新。使用以下方法可停止横幅广告的自动刷新，或在暂停后重新启用。
注意
再次显示横幅时，它将完成从暂停时间到刷新的时间。
- pauseAutoRefresh – 暂停横幅广告的自动刷新。
- resumeAutoRefresh – 暂停横幅广告后恢复自动刷新。
// Pause refresh bannerAdViewRef.current?.pauseAutoRefresh(); // Resume refreshbannerAdViewRef.current?.resumeAutoRefresh();
销毁横幅广告
要销毁横幅，请调用 destroy 方法。
已销毁的横幅无法再次显示。要显示更多广告服务，请创建一个新的 LevelPlayBannerAdView 对象。
bannerAdViewRef.current?.destroy();
横幅广告服务的完整实现示例
以下是使用标准横幅大小创建和加载横幅广告的示例。
import { LevelPlayBannerAdView、 LevelPlayAdSize, type LevelPlayBannerAdViewMethods、 type LevelPlayBannerAdViewListener， type LevelPlayAdInfo、 type LevelPlayAdError、} 来自“Unity LevelPlay-mediation”// Start of some component ...const bannerAdViewRef = useRef<LevelPlayBannerAdViewMethods>(null);const adSize = LevelPlayAdSize.BANNERconst 监听器：LevelPlayBannerAdViewListener = { onAdLoaded：（adInfo：LevelPlayAdInfo) => { // Implement your logic here }, onAdLoadFailed：（报错：LevelPlayAdError) => { // Implement your logic here }, onAdDisplayed：（adInfo：LevelPlayAdInfo) => { // Implement your logic here }, onAdDisplayFailed：（adInfo：LevelPlayAdInfo，报错：LevelPlayAdError) => { // Implement your logic here }, onAdClicked：（adInfo：LevelPlayAdInfo) => { // Implement your logic here }, onAdExpanded：（adInfo：LevelPlayAdInfo) => { // Implement your logic here }, onAdCollapsed：（adInfo：LevelPlayAdInfo) => { // Implement your logic here }, onAdLeftApplication：（adInfo：LevelPlayAdInfo) => { // Implement your logic here },};return ( <LevelPlayBannerAdView ref={bannerAdViewRef} adUnitId={'YOUR_AD_UNIT_ID'} adSize={adSize} placementName={'YOUR_PLACEMENT'} listener={listener} onLayout={(_) => bannerAdViewRef.current?.loadAd()} style={width: adSize.width, height: adSize.height} // 获取实际横幅布局大小 />); // End of component ...
LevelPlay Mediation 演示应用程序
Integration Demo 应用程序演示如何在 app 中集成横幅广告单元 API。
验证您与我们的集成测试套件的集成。
后续步骤
请遵循我们的集成指南来集成其他聚合网络或配置其他广告格式：