App Open Ads
Integrate CloudX App Open ads in React Native apps
App Open ads are full-screen placements for app launch and foreground moments.
import { CloudXAppOpenAd } from 'cloudx-react-native';
const AD_UNIT_ID = 'app_open';
CloudXAppOpenAd.addAdLoadedEventListener((adInfo) => {
console.log('App Open loaded from', adInfo.networkName);
});
CloudXAppOpenAd.addAdLoadFailedEventListener((error) => {
console.log('App Open load failed:', error.code, error.message);
});
CloudXAppOpenAd.addAdDisplayedEventListener((adInfo) => {
console.log('App Open displayed');
});
CloudXAppOpenAd.addAdFailedToDisplayEventListener((error) => {
console.log('App Open display failed:', error.code, error.message);
});
CloudXAppOpenAd.addAdClickedEventListener((adInfo) => {
console.log('App Open clicked');
});
CloudXAppOpenAd.addAdHiddenEventListener(() => {
CloudXAppOpenAd.loadAd(AD_UNIT_ID);
});
CloudXAppOpenAd.addAdRevenuePaidListener((adInfo) => {
console.log('Revenue:', adInfo.revenue);
});
CloudXAppOpenAd.loadAd(AD_UNIT_ID);
const isReady = await CloudXAppOpenAd.isAdReady(AD_UNIT_ID);
if (isReady) {
CloudXAppOpenAd.showAd(AD_UNIT_ID);
// Or with optional placement and custom data:
// CloudXAppOpenAd.showAd(AD_UNIT_ID, 'app_foreground', 'custom_data');
}
CloudXAppOpenAd.destroyAd(AD_UNIT_ID);React Hook
import { useCloudXAppOpen } from 'cloudx-react-native';
function AppForegroundGate() {
const { isLoaded, isLoading, error, load, show, destroy } =
useCloudXAppOpen('app_open');
useEffect(() => {
load();
}, [load]);
useEffect(() => {
if (isLoaded) {
show('app_foreground');
}
}, [isLoaded, show]);
return null;
}Returns: { isLoaded, isLoading, error, load, show, destroy }
show()accepts optionalplacementandcustomDataparameters.- The hook automatically destroys the ad on unmount.