自适应横幅广告
自适应横幅广告的类型
Yandex Mobile Ads SDK 提供两种类型的自适应横幅广告：
|
横幅广告 |
描述 |
使用场景 |
|
粘性横幅广告 |
固定在屏幕边缘并显示在其他元素之上的横幅广告。此类横幅广告不受屏幕滚动影响。 |
如果您希望横幅广告保持“固定效果”，即保持位置不变，即使用户滚动浏览屏幕也始终显示在内容上方。 |
|
内嵌横幅广告 |
嵌入应用中（例如，嵌入内容或列表中）的横幅广告，如同用户界面元素一样呈现。 |
横幅广告应成为页面内容的一部分，例如出现在动态消息中、帖子之间或作为列表项显示。 |
所有类型的横幅广告都会每隔 60 秒自动更新一次广告创意。
提示
要设置自定义自动更新周期，请联系您的专属经理。
从代码角度来看，这些横幅广告仅在尺寸设置方式上有所不同。例如：
粘性横幅广告
内嵌横幅广告
BannerAdSize.StickySize(width: number)
BannerAdSize.InlineSize(width: number, maxHeight: number)
|
实体 |
描述 |
|
|
横幅广告高度：
所有横幅广告尺寸必须以 dp 为单位指定。 |
|
|
用于：
|
自适应横幅广告创建示例
import React, { useEffect, useState } from 'react';
import { ActivityIndicator, Alert, Dimensions, StyleSheet, Text, View } from 'react-native';
import { AdRequest, AdTheme, BannerAdSize, BannerView, Gender, Location } from 'yandex-mobile-ads';
const BANNER_AD_UNIT_ID = 'demo-banner-yandex';
export default function BannerAd() {
const [adLoaded, setAdLoaded] = useState(false);
const [adSize, setAdSize] = useState<BannerAdSize | null>(null);
const [error, setError] = useState<Error | string | null>(null);
const [screenWidth, setScreenWidth] = useState(Dimensions.get('window').width);
useEffect(() => {
const subscription = Dimensions.addEventListener('change', ({ window }) => {
setScreenWidth(window.width);
});
return () => subscription?.remove();
}, []);
useEffect(() => {
console.log('🔍 Creating banner size for width:', screenWidth);
BannerAdSize.stickySize(screenWidth)
.then((size) => {
console.log('✅ Banner size created:', size);
setAdSize(size);
})
.catch((err) => {
console.error('❌ Failed to create banner size:', err);
setError(err);
});
return () => {};
}, [screenWidth]);
const adRequest = new AdRequest({
age: '20',
contextQuery: 'context-query',
contextTags: ['context-tag'],
gender: Gender.Male,
location: new Location(55.734202, 37.588063),
adTheme: AdTheme.Light,
parameters: new Map<string, string>([
['param1', 'value1'],
['param2', 'value2']
]),
});
if (error) {
return (
<View style={styles.container}>
<Text style={styles.title}>Banner Ad</Text>
<Text style={styles.errorText}>
❌ Error: {error instanceof Error ? error.message : String(error)}
</Text>
<Text style={styles.hintText}>
Make sure you are NOT using Expo Go!{'\n'}
Run: <Text style={styles.codeText}>npx expo run:ios</Text>
</Text>
</View>
);
}
if (!adSize) {
return (
<View style={styles.container}>
<Text style={styles.title}>Banner Ad</Text>
<ActivityIndicator size="large" color="#007AFF" />
<Text style={styles.status}>⏳ Preparing banner...</Text>
</View>
);
}
return (
<View style={styles.container}>
<Text style={styles.title}>Banner Ad</Text>
<Text style={styles.status}>
{adLoaded ? '✅ Ad Loaded' : '⏳ Loading...'}
</Text>
<View style={[styles.adContainer, { width: adSize.width, height: adSize.height }]}>
<BannerView
adUnitId={BANNER_AD_UNIT_ID}
adRequest={adRequest}
size={adSize}
onAdLoaded={() => {
setAdLoaded(true);
console.log('✅ Banner ad loaded');
}}
onAdFailedToLoad={(error: any) => {
console.error('❌ Banner ad failed:', error);
Alert.alert('Ad Failed', error?.message || 'Unknown error');
}}
onAdClicked={() => console.log('👆 Banner clicked')}
onAdImpression={(data: any) => console.log('👁️ Impression:', data)}
/>
</View>
<Text style={styles.sizeInfo}>
Size: {adSize.width}x{adSize.height} dp
</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f5f5f5',
padding: 20,
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20,
},
status: {
fontSize: 16,
marginBottom: 20,
color: '#666',
},
adContainer: {
backgroundColor: '#fff',
borderRadius: 10,
overflow: 'hidden',
marginVertical: 20,
},
sizeInfo: {
fontSize: 12,
color: '#999',
marginTop: 10,
},
errorText: {
fontSize: 14,
color: '#f00',
textAlign: 'center',
padding: 20,
},
hintText: {
fontSize: 12,
color: '#666',
textAlign: 'center',
marginTop: 10,
},
codeText: {
fontFamily: 'monospace',
backgroundColor: '#e0e0e0',
padding: 4,
},
});
检查集成
您可以使用我们的演示项目测试广告格式的效果。