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

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 TeadsAdView instance class.
And Three React States to store and handle the adId value, the height of the ad slot and a placement.

import TeadsAdView from 'react-native-teads-sdk-module'
{...}
 const [adId, setAdId] = React.useState<String>();
 const [height, setHeight] = React.useState<number>();
 const [placement, setPlacement] = React.useState<TeadsInReadAdPlacement | undefined>();

<TeadsAdView style={{ height: height, width: '100%' }} adId={adId}></TeadsAdView>

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
Please use the useEffect() to implement this part.

import Teads from "react-native-teads-sdk-module";
import TeadsAdPlacementSettings from "react-native-teads-sdk-module";

React.useEffect(() => {
  (async () => {
    await testAdPlacementSetting.enableDebug();
    //enableDebug function is used to get more visibility about the SDK logs
    //you could remove it in production
    const awaitedVal = await Teads.createInReadPlacement(
      84242,
      testAdPlacementSetting
    );
    setPlacement(awaitedVal);
  })();
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

Load an Ad

From the placement previously created you requestAd passing TeadsAdRequestSettings. You must retain your adId to call the specific view after.

import TeadsAdRequestSettings from "react-native-teads-sdk-module";

const [adId, setAdId] = React.useState<String>(); //already defined in the first step
var adRequestSettings = new TeadsAdRequestSettings();

const resultId = await placement?.requestAd(testAdRequestSettings);
setAdId(resultId);

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.

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.

AdRatio

You should create and own and TeadsAdRatio for the adView
And create a State value with height and use calculateHeight() function to optimize the height.
This function should be used after the requestAd() on the placement, and only if it returned an adId.

const [height, setHeight] = React.useState<number>(); //already defined in the step below
var testAdRatio = new TeadsAdRatio(Dimensions.get("window").width);

testAdRatio.calculateHeight(testAdRatio.width, resultId).then(setHeight);

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

In async function, or on componentDidMount() from React function, you can listen for the event(s). And each event are link to an adId to let you focus on specific ads.

For example you can listen to didRecordImpression with the code bellow :

import { NativeEventEmitter, NativeModules } from "react-native";

//Create the listener from the native module call RNHandlerEvents
const eventEmitter = new NativeEventEmitter(NativeModules.RNHandlerEvents);
// Subscribe to the event
eventEmitter.addListener("didRecordImpression", (event) => {
  //You can add here the function or code executed on the event
  //You can identidy from witch
  const { adId } = event;
  console.log("Id received in React on didRecordImpression:", adId);
});

The SDK provides diferent listener to monitor events during the ad life cycle and help you customize the ad experience in your apps.

List of Events you can listen to :

  • "didCatchError",
  • "didRecordImpression",
  • "didRecordClick",
  • "didExpandedToFullscreen",
  • "didCollapsedFromFullscreen",
  • "adStartPlayingAudio",
  • "adStopPlayingAudio",
  • "didPlay",
  • "didPause",
  • "didComplete",
  • "didFailToReceiveAd",
  • "adOpportunityTrackerView"

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.

var AdRequestSettings = new TeadsAdRequestSettings();
await testAdRequestSettings.pageUrl("www.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.