---
metadata:
  - name: generator
    content: Diplodoc Platform v5.50.6
alternate:
  - https://ads.yandex.com/helpcenter/en/dev/react-native/adaptive-sticky-banner.md
  - https://ads.yandex.com/helpcenter/ru/dev/react-native/adaptive-sticky-banner.md
  - https://ads.yandex.com/helpcenter/zh/dev/react-native/adaptive-sticky-banner.md
---
> **Documentation Index:** Fetch the complete configuration index at https://ads.yandex.com/helpcenter/zh/llms.txt

# 自适应粘性横幅

<!-- source: zh/dev/_includes/adaptive-sticky-banner.md -->
自适应固定横幅广告是一种小型广告，会自动更新，并显示在应用屏幕的顶部或底部。它不会遮挡主要内容，常用于游戏应用中。
<!-- endsource: zh/dev/_includes/adaptive-sticky-banner.md -->

<!-- source: zh/dev/_includes/adaptive-sticky-banner.md -->
自适应固定横幅广告会针对每台设备优化广告尺寸，从而实现最佳效果。借助这种广告类型，开发者可设置广告允许的最大宽度，系统将自动确定最佳广告尺寸。
<!-- endsource: zh/dev/_includes/adaptive-sticky-banner.md -->

{% cut "外观" %}

<img src="https://yastatic.net/s3/doc-binary/src/docs/support/mobile-ads/zh/monetization/_images/banner-sticky-zh-ex.png" width="200">

{% endcut %}

本指南介绍了将自适应粘性横幅集成到 React Native 应用的过程。
除了代码示例和说明之外，它还包含特定格式的建议以及指向其他资源的链接。

## 前提条件 {#pre}

<!-- source: zh/dev/_includes/pre-react-native.md -->
1. 按照 [快速入门](https://ads.yandex.com/helpcenter/zh/dev/react-native/quick-start.md) 中描述的 Yandex Mobile Ads React Native 插件集成步骤进行操作。
2. 确保您拥有 [最新版本的 Yandex Mobile Ads React Native 插件](https://ads.yandex.com/helpcenter/zh/dev/platforms.md)。如果您正在使用聚合，请更新到最新的 [单一构建版本](https://ads.yandex.com/helpcenter/zh/dev/platforms.md)。
<!-- endsource: zh/dev/_includes/pre-react-native.md -->

## 实施 {#implement}

集成自适应粘性横幅的关键步骤：

* 获取横幅尺寸。
* 使用 `AdRequest` 对象设置加载广告的参数。
* 通过设置所需的属性和回调函数来处理广告生命周期内的事件，从而展示广告。

## 自适应粘性横幅集成的特点 {#features}

1. 我们强烈建议不要在 `onAdFailedToLoad` 回调中收到错误时尝试加载新广告。如确需从 `onAdFailedToLoad` 中加载广告，请限制重试次数，以避免在网络连接受限情况下不断出现失败的广告请求。

2. 为确保自适应粘性横幅广告正常运行，请[将应用布局设为自适应](https://reactnative.dev/docs/flexbox)。否则，您的广告可能无法正确呈现。

3. 自适应粘性横幅在充分利用可用宽度时效果最佳。通常情况下，这将是设备屏幕的全宽。请确保考虑应用设置的填充参数和安全显示区域。

4. 要获取广告尺寸，请使用 `BannerAdSize.stickySize(width)` 方法，该方法接受广告容器的可用宽度作为参数。

5. 通过 `BannerAdSize.stickySize(width)` 方法计算的 `BannerAdSize` 对象中的广告宽度和高度值在同一设备上是一致的。在特定设备上测试应用布局时，可以确保该设备的广告尺寸保持不变。

6. 自适应粘性横幅的高度不得超过屏幕高度的 15%，且不得小于 50 dp。

## 获取横幅尺寸

要获取广告尺寸，请使用 `BannerAdSize.stickySize(width)` 方法，该方法接受广告容器的可用宽度和可接受的最大广告高度作为参数。请确保考虑应用设置的填充参数和安全显示区域：

```ts
let adSize = await BannerAdSize.stickySize(Dimensions.get('window').width);
```

## 创建 AdRequest

您可以通过 `AdRequest` 类对象扩展广告请求参数。您可以提供有关用户兴趣、页面上下文、位置和其他附加数据的信息。在广告请求中添加额外的上下文信息可以极大地提高广告质量。请参阅[广告定位](https://ads.yandex.com/helpcenter/zh/dev/react-native/target.md)版块了解更多信息。

## 广告展示

加载广告需要使用通过 `BannerAdSize.stickySize(width)` 方法计算的大小，以及您在 Yandex Advertising Network 界面 (adUnitId) 中获取的版位 ID。

要启用广告加载或加载失败的通知，并跟踪自适应粘性横幅的生命周期事件，请为 `BannerView` 组件设置回调函数。

您还可以通过将 `BannerView` 组件的 `adRequest` 属性传递给 `AdRequest` 类对象来扩展请求参数。

以下示例展示了如何设置自适应内联横幅属性以及用于处理其生命周期事件的回调函数。加载后，横幅将自动显示：

```ts
const createBanner = async () => {
    let adSize = await BannerAdSize.stickySize(Dimensions.get('window').width);

    let adRequest = new AdRequest({
        adUnitId: 'R-M-XXXXXX-Y', // for debug you can use 'demo-banner-yandex'
        age: '20',
        contextQuery: 'context-query',
        contextTags: ['context-tag'],
        gender: Gender.Male,
        location: new Location(55.734202, 37.588063)
    });

    return (
        <BannerView
            size={adSize}
            adUnitId={'R-M-XXXXXX-Y'} // 或者 'demo-banner-yandex'
            adRequest={adRequest}
            onAdLoaded={() => console.log('Did load')}
            onAdFailedToLoad={(event: any) => console.log(`Did fail to load with error: ${JSON.stringify(event.nativeEvent)}`)}
            onAdClicked={() => console.log('Did click')}
            onLeftApplication={() => console.log('Did leave application')}
            onReturnToApplication={() => console.log('Did return to application')}
            onAdImpression={(event: any) => console.log(`Did track impression: ${JSON.stringify(event.nativeEvent.impressionData)}`)}
            onAdClose={() => console.log('Did close')}
        />
    );
}
```

## 测试自适应粘性横幅集成 {#test}

{% list tabs %}

- Android

   <!-- source: zh/dev/_includes/test-android-sticky-banner.md -->
   ### 使用演示广告单元进行广告测试 {#demo-blocks}

   使用测试广告来检查您的自适应固定横幅广告集成和应用本身。为了确保每次广告请求都能返回测试广告，您可以使用一个特殊的演示广告版位 ID。

   演示广告单元 ID：`demo-banner-yandex`.

   {% note warning %}

   在应用商店发布应用前，请务必将演示广告版位 ID 替换为您在 Yandex Advertising Network 接口中获取的真实 ID。

   {% endnote %}

   有关所有可用演示广告版位 ID 的列表，请参阅[用于测试的演示广告单元](https://ads.yandex.com/helpcenter/zh/dev/android/demo-blocks.md)。

   ### 测试广告集成 {#test-int}

   您可以使用 SDK 的内置分析工具检查自适应固定横幅广告是否已正确集成。日志中将显示包含测试结果的详细报告。

   要查看报告，请在 Android 应用调试工具 [Logcat](https://developer.android.com/studio/command-line/logcat) 中搜索关键词“YandexAds”。

   ```bash
   adb logcat -v brief '*:S YandexAds'
   ```

   如果集成成功，将返回以下消息：
   ```bash
   adb logcat -v brief '*:S YandexAds'
   mobileads$ adb logcat -v brief '*:S YandexAds'
   I/YandexAds(13719): [Integration] Ad type banner was integrated successfully
   ```

   如果存在任何横幅广告集成问题，您将收到详细的问题报告和故障排除建议。
   <!-- endsource: zh/dev/_includes/test-android-sticky-banner.md -->

- iOS

   ### 使用演示广告单元进行广告测试

   <!-- source: zh/dev/_includes/test-ios-inline-banner.md -->
   我们建议使用测试广告来测试您的广告集成和应用本身。

   为了保证为每个广告请求返回测试广告，我们创建了一个特殊的演示广告版位 ID。用它来检查您的广告集成。

   演示广告单元 ID：`demo-banner-yandex`.

   {% note warning %}

   在商店中发布您的应用程序之前，确保将演示版位 ID 替换为您在 Yandex Advertising Network 界面中获得的真实 ID。

   {% endnote %}

   您可以在 [用于测试的演示广告单元](https://ads.yandex.com/helpcenter/zh/dev/ios/demo-blocks.md) 部分找到可用的演示广告版位 ID 列表。
   <!-- endsource: zh/dev/_includes/test-ios-inline-banner.md -->

   ### 测试广告集成

   <!-- source: zh/dev/_includes/test-integration-ios.md -->
   您可以使用本机控制台工具测试广告集成。

   要查看详细日志，请调用 `YMAMobileAds` 类的 `enableLogging` 方法。

   ```swift
   YMAMobileAds.enableLogging()
   ```

   要查看 SDK 日志，请前往控制台工具并设置 `Subsystem = com.mobile.ads.ads.sdk`。您还可以按类别和错误级别过滤日志。

   如果您在集成广告时遇到问题，您将获得有关问题的详细报告以及如何解决这些问题的建议。

   <img src= "https://yastatic.net/s3/doc-binary/src/dev/mobile-ads/common/integration-ios-2.png">
   <!-- endsource: zh/dev/_includes/test-integration-ios.md -->

{% endlist %}

## 其他资源 {#resources}

* <!-- source: zh/dev/_includes/github-pubdev-links.md -->
  [GitHub](https://github.com/yandexmobile/yandex-ads-react-native-plugin) 链接。
  <!-- endsource: zh/dev/_includes/github-pubdev-links.md -->