แบนเนอร์แบบปรับขนาดได้เป็นโฆษณาที่ปรับเปลี่ยนตามพื้นที่โฆษณารุ่นถัดไป ซึ่งเพิ่มประสิทธิภาพสูงสุดด้วยการเพิ่มประสิทธิภาพขนาดโฆษณาสำหรับอุปกรณ์แต่ละชนิด การปรับปรุงแบนเนอร์ที่มีขนาดคงที่ซึ่งรองรับความสูงคงที่เท่านั้น แบนเนอร์แบบปรับขนาดได้ช่วยให้นักพัฒนาซอฟต์แวร์ระบุความกว้างของโฆษณาและใช้เกณฑ์นี้เพื่อกำหนดขนาดโฆษณาที่เหมาะสมได้
หากต้องการเลือกขนาดโฆษณาที่ดีที่สุด แบนเนอร์แทรกในบรรทัดที่ปรับเปลี่ยนได้จะใช้ความสูงสูงสุดแทนความสูงคงที่ ซึ่งทำให้มีโอกาสปรับปรุงประสิทธิภาพ
กรณีที่ควรใช้แบนเนอร์แทรกในบรรทัดที่ปรับเปลี่ยนได้
แบนเนอร์แทรกในบรรทัดที่ปรับเปลี่ยนได้จะเป็นแบนเนอร์ที่มีขนาดใหญ่กว่าและสูงกว่าเมื่อเทียบกับแบนเนอร์แบบปรับขนาดได้ที่อยู่ด้านล่างสุด มีความสูงไม่เท่ากันและสูงเท่ากับหน้าจออุปกรณ์
มีไว้เพื่อวางในเนื้อหาที่เลื่อน เช่น
ข้อกำหนดเบื้องต้น
- ทำตามวิธีการในคู่มือเริ่มต้นใช้งานเกี่ยวกับวิธีนำเข้าปลั๊กอิน Mobile Ads Flutter
ก่อนเริ่มต้น
โปรดทราบประเด็นต่อไปนี้เมื่อใช้แบนเนอร์แบบปรับขนาดได้ในแอป
ตรวจสอบว่าคุณกำลังใช้ SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google เวอร์ชันล่าสุดอยู่ และอะแดปเตอร์สื่อกลางเวอร์ชันล่าสุด (หากใช้สื่อกลาง)
ขนาดของแบนเนอร์แทรกในบรรทัดที่ปรับเปลี่ยนได้ออกแบบมาเพื่อให้ทำงานได้ดีที่สุดเมื่อใช้ความกว้างเต็มขนาด ในกรณีส่วนใหญ่ ค่านี้จะเป็นความกว้างของหน้าจอ ของอุปกรณ์ที่มีการใช้งานอยู่ โปรดคำนึงถึงพื้นที่ปลอดภัยที่เกี่ยวข้อง
คุณอาจต้องอัปเดตหรือสร้างรายการโฆษณาใหม่เพื่อใช้งานร่วมกับขนาดที่ปรับได้ ดูข้อมูลเพิ่มเติม
วิธีดูขนาดโฆษณา
AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width)
AdSize.getLandscapeInlineAdaptiveBannerAdSize(int width)
AdSize.getPortraitInlineAdaptiveBannerAdSize(int width)
AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight)
เมื่อใช้ API แบนเนอร์แบบปรับขนาดได้แบบแทรกในบรรทัด SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google จะแสดงผล
AdSize
ตามความกว้างที่กำหนดและแฟล็กอินไลน์ ความสูงจะเป็น 0 หรือmaxHeight
ก็ได้ ขึ้นอยู่กับ API ที่คุณใช้ ระบบจะแสดงความสูงจริงของโฆษณาเมื่อแสดงผลโฆษณาแบนเนอร์แทรกในบรรทัดที่ปรับเปลี่ยนได้ออกแบบมาให้วางอยู่ในเนื้อหาที่เลื่อนได้ แบนเนอร์อาจมีความสูงเท่าหน้าจออุปกรณ์หรือถูกจำกัดโดยความสูงสูงสุด ทั้งนี้ขึ้นอยู่กับ API
การใช้งาน
ทำตามขั้นตอนด้านล่างเพื่อใช้งานแบนเนอร์แบบปรับขนาดได้แบบแทรกในบรรทัดที่ใช้งานง่าย
- ดูขนาดโฆษณาแบนเนอร์แบบปรับขนาดได้ในบรรทัด ขนาดที่คุณได้รับจะใช้ในการส่งคำขอแบนเนอร์แบบปรับขนาดได้ โปรดตรวจสอบว่าคุณได้ดำเนินการต่อไปนี้เพื่อรับขนาดโฆษณาแบบปรับขนาดได้
- ดูความกว้างของอุปกรณ์ที่ใช้งานเป็นพิกเซลอิสระตามความหนาแน่น หรือตั้งค่าความกว้างของคุณเองหากคุณไม่ต้องการใช้ความกว้างของหน้าจอแบบเต็ม
คุณใช้
MediaQuery.of(context)
เพื่อดูความกว้างของหน้าจอได้ - ใช้วิธีการแบบคงที่ที่เหมาะสมในคลาสขนาดโฆษณา เช่น
AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width)
เพื่อรับออบเจ็กต์AdSize
ที่ปรับเปลี่ยนได้แบบแทรกในบรรทัดสำหรับการวางแนวปัจจุบัน - หากต้องการจำกัดความสูงของแบนเนอร์ ให้ใช้เมธอดแบบคงที่
AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight)
- ดูความกว้างของอุปกรณ์ที่ใช้งานเป็นพิกเซลอิสระตามความหนาแน่น หรือตั้งค่าความกว้างของคุณเองหากคุณไม่ต้องการใช้ความกว้างของหน้าจอแบบเต็ม
คุณใช้
- สร้างออบเจ็กต์
AdManagerBannerAd
โดยใช้รหัสหน่วยโฆษณา ขนาดโฆษณาแบบปรับขนาดได้ และออบเจ็กต์คำขอโฆษณา - โหลดโฆษณา
- ในโค้ดเรียกกลับ
onAdLoaded
ให้ใช้AdManagerBannerAd.getPlatformAdSize()
เพื่อดูขนาดโฆษณาแพลตฟอร์มที่อัปเดตและอัปเดตความสูงของคอนเทนเนอร์AdWidget
ตัวอย่างโค้ด
ต่อไปนี้คือตัวอย่างวิดเจ็ตที่โหลดแบนเนอร์แบบปรับขนาดได้แบบแทรกในบรรทัดเพื่อให้พอดีกับความกว้างของหน้าจอโดยพิจารณาองค์ประกอบประกอบ
import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
/// This example demonstrates inline adaptive banner ads.
///
/// Loads and shows an inline adaptive banner ad in a scrolling view,
/// and reloads the ad when the orientation changes.
class InlineAdaptiveExample extends StatefulWidget {
@override
_InlineAdaptiveExampleState createState() => _InlineAdaptiveExampleState();
}
class _InlineAdaptiveExampleState extends State<InlineAdaptiveExample> {
static const _insets = 16.0;
AdManagerBannerAd? _inlineAdaptiveAd;
bool _isLoaded = false;
AdSize? _adSize;
late Orientation _currentOrientation;
double get _adWidth => MediaQuery.of(context).size.width - (2 * _insets);
@override
void didChangeDependencies() {
super.didChangeDependencies();
_currentOrientation = MediaQuery.of(context).orientation;
_loadAd();
}
void _loadAd() async {
await _inlineAdaptiveAd?.dispose();
setState(() {
_inlineAdaptiveAd = null;
_isLoaded = false;
});
// Get an inline adaptive size for the current orientation.
AdSize size = AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(
_adWidth.truncate());
_inlineAdaptiveAd = AdManagerBannerAd(
// TODO: replace with your own ad unit.
adUnitId: '<your-ad-unit>',
size: size,
request: AdManagerAdRequest(),
listener: AdManagerBannerAdListener(
onAdLoaded: (Ad ad) async {
print('Inline adaptive banner loaded: ${ad.responseInfo}');
// After the ad is loaded, get the platform ad size and use it to
// update the height of the container. This is necessary because the
// height can change after the ad is loaded.
AdManagerBannerAd bannerAd = (ad as AdManagerBannerAd);
final AdSize? size = await bannerAd.getPlatformAdSize();
if (size == null) {
print('Error: getPlatformAdSize() returned null for $bannerAd');
return;
}
setState(() {
_inlineAdaptiveAd = bannerAd;
_isLoaded = true;
_adSize = size;
});
},
onAdFailedToLoad: (Ad ad, LoadAdError error) {
print('Inline adaptive banner failedToLoad: $error');
ad.dispose();
},
),
);
await _inlineAdaptiveAd!.load();
}
/// Gets a widget containing the ad, if one is loaded.
///
/// Returns an empty container if no ad is loaded, or the orientation
/// has changed. Also loads a new ad if the orientation changes.
Widget _getAdWidget() {
return OrientationBuilder(
builder: (context, orientation) {
if (_currentOrientation == orientation &&
_inlineAdaptiveAd != null &&
_isLoaded &&
_adSize != null) {
return Align(
child: Container(
width: _adWidth,
height: _adSize!.height.toDouble(),
child: AdWidget(
ad: _inlineAdaptiveAd!,
),
));
}
// Reload the ad if the orientation changes.
if (_currentOrientation != orientation) {
_currentOrientation = orientation;
_loadAd();
}
return Container();
},
);
}
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: Text('Inline adaptive banner example'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: _insets),
child: ListView.separated(
itemCount: 20,
separatorBuilder: (BuildContext context, int index) {
return Container(
height: 40,
);
},
itemBuilder: (BuildContext context, int index) {
if (index == 10) {
return _getAdWidget();
}
return Text(
'Placeholder text',
style: TextStyle(fontSize: 24),
);
},
),
),
));
@override
void dispose() {
super.dispose();
_inlineAdaptiveAd?.dispose();
}
}