InRead - Classic integration

This page explains how to integrate a Teads inRead placement into your Flutter application.

• Implementation
• Ad Resizing
• Event monitoring
• Brand Safety and 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;
    }
  ...
}

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.