This page explains how to integrate a Teads inRead placement into your Flutter application.
- Implementation
- Ad Resizing
- Event Monitoring
- Brand Safety and web content URL
- Check list
- Additional Settings
Implementation
The article is using the landscape test PID 84242. This PID is meant to be used for testing purposes and shall not be released into production.
See this page for more test PIDs and creative formats.
Note
Create a
TeadsInReadAdView
instance class.TeadsInReadAdView _inReadAdView = TeadsInReadAdView();
Create a placement
You need to create a placement first using Teads.createInReadPlacement
, this placement is linked to your PID.
The same placement will be reused for loading ads
Important
Instance of
TeadsInReadAdPlacement
must be owned / retained in order to be able to request ads properly
class _InReadState extends State<InRead> {
TeadsInReadAdView _inReadAdView = TeadsInReadAdView();
TeadsInReadAdPlacement? _placement;
double _adViewHeight = 0;
@override
void initState() {
super.initState();
_initTeadsAd();
}
@override
void dispose() {
super.dispose();
// Release memory object on activity/controller dallocation
_inReadAdView.clean();
}
Future<void> _initTeadsAd() async {
TeadsAdPlacementSettings placementSettings = TeadsAdPlacementSettings();
await placementSettings.setUsPrivacy("consent");
await placementSettings.userConsent([SUBJECT_TO_GDPR], [CONSENT_STRING], tcfVersion: TCFVersion.v2, cmpSdkID: sdkId);
_placement = await Teads.createInReadPlacement(84242, placementSettings, this);
if (!mounted) return;
}
...
}
Your activity superclass
Ensure to extend your activity from FlutterFragmentActivity
and not from FlutterActivity
. The first one is better bound to Teads context lifecycle.
Load an Ad
From the placement previously created you requestAd
passing TeadsAdRequestSettings
void _requestAd() {
TeadsAdRequestSettings requestSettings = TeadsAdRequestSettings();
await requestSettings.pageUrl("https://example.com/article1");
await _placement?.requestAd(requestSettings);
}
Ad Resizing
Having the ad creative correctly rendered is crucial to ensure great user experience and good performance measurement.
Allowed by VPAID standard; ads can adopt flexible dimensions and ratio in place of pre-defined fixed sizes making necessary to be able to dynamically adapt the size and ratio of the ad view depending on the loaded creative.
Even though resize requests occur generally in the ad initialisation steps, it is necessary to be able to satisfy them all along the ad experience.
The Teads inApp SDK will notify you each resize request coming from the creative.
The mandatory delegate below will help you to adapt the size of the Ad container.
Use didUpdateRatio
in addition to didReceiveAd
to listen to resize updates all along the ad experience.
AdRatio
contains all information to calculate the corresponding height for the requested width. Use calculateHeight
to ease the calculation.
We encourage you testing different creative sizes from the test PIDs article.
@override
void didReceiveAd(TeadsInReadAd ad, TeadsAdRatio adRatio) {
_inReadAdView.bind(ad);
ad.setDelegate(this);
ad.setPlaybackDelegate(this);
_resizeAd(adRatio);
}
@override
void didUpdateRatio(TeadsInReadAd ad, TeadsAdRatio adRatio) {
_resizeAd(adRatio);
}
void _resizeAd(TeadsAdRatio adRatio) async {
double width = MediaQuery.of(context).size.width;
double height = await adRatio.calculateHeight(width);
setState(() {
_adViewHeight = height;
});
}
Event Monitoring
The Teads inApp SDK provides a set of listeners to let you monitor a large scope of events all along ad life cycle.
This helps tailor the ad experience in your app, e.g., closing the ad view in case of didCatchError
, resize the ad view in case of didUpdateRatio
.
mixin TeadsInReadAdPlacementDelegate {
// When the Teads inApp SDK has received an ad for you to display
void didReceiveAd(TeadsInReadAd ad, TeadsAdRatio adRatio);
// When an ad has updated its ratio, you need to update your container view
void didUpdateRatio(TeadsInReadAd ad, TeadsAdRatio adRatio);
// When Teads inApp SDK has failed to retrieve an ad
void didFailToReceiveAd(String reason);
}
The SDK provides a delegate to monitor events during the ad life cycle and help you customize the ad experience in your apps.
mixin TeadsAdDelegate {
// When the ad experience has experienced an issue
void didCatchError(TeadsAd ad, FlutterError error);
// When the ad has been closed
void didClose(TeadsAd ad);
// When an impression has occured
void didRecordImpression(TeadsAd ad);
// When an event click has been fired
void didRecordClick(TeadsAd ad);
// When the ad goes to fullscreen
void didExpandedToFullscreen(TeadsAd ad);
// When the ad collapse from fullscreen
void didCollapsedFromFullscreen(TeadsAd ad);
}
You can also monitor playback events thanks to the TeadsPlaybackDelegate
.
mixin TeadsPlaybackDelegate {
// When the ad has started playing audio
void adStartPlayingAudio(TeadsAd ad);
// When the ad has stopped playing audio
void adStopPlayingAudio(TeadsAd ad);
// When the ad has started playing
void didPlay(TeadsAd ad);
// When the ad has stopped playing
void didPause(TeadsAd ad);
// When the ad has complete
void didComplete(TeadsAd ad);
}
Brand Safety and web content URL
Having brand safe content will optimize fill rate since advertisers are less keen to have their brand associated with "bad" context (violence/adult etc.).
⚠️ Teads guarantees brand safe contents to advertiser by analysing the overall content of the loaded page. This is an important requirement for advertisers.
The Fill Rate of your app could be impacted if BrandSafety analysis is not enabled.
The categorization is done on the fly by a 3rd party partner, Grapeshot.
Brand safe analyze is limited to web content only.
This technical limitation is bypassed inApp using pageUrl
to provide the Web equivalent URL of the current article Grapeshot will perform analysis in.
TeadsAdRequestSettings requestSettings = TeadsAdRequestSettings();
await requestSettings.pageUrl("https://example.com/article1");
Check list
- ✅ Ensure Brand Safety is enabled.
- ✅ Ensure you comply with privacy legal requirements (GDPR/CCPA).
- ✅ Enable ad view resizing
- ✅ Enable slot monitoring for ad opportunities
- ✅ Clean the ad view when necessary
- ✅ Test different PIDs for multiple ad format and size testing
- ✅ Validate your integration with the validation tool to ensure key features are working
Additional Settings
Find the full available TeadsAdPlacementSettings
and TeadsAdRequestSettings
settings here:
More information on Privacy consent management settings can be found here.