Interstitial Ads

Interstitial ads are full-screen ads that cover the interface of the app. They’re typically displayed at natural transition points in the flow of the app.

Initialising an ad

Start by creating an instance of CIInterstitialAd with the following parameters. Create one instance per ad you intend to show.

Required

placementId: string: Unique ID for this Ad Placement provided by Content Ignite.

Optional

pageUrl: string: URL used for targeting, for example if the ad is displayed in a section of the app which has an equivalent URL on the web.
targeting: Record<string, string[]>: Pass custom key-value pairs to ad requests.
eventListener: CIInterstitialEventListener: Respond to load and dismiss events. See Handling ad events.

import { CIInterstitialAd } from '@content-ignite/mobile-sdk-react-native';

const ad = new CIInterstitialAd({
  placementId: '<PLACEMENT-ID>',
  pageUrl: 'https://example.com/sport',
  targeting: { segment: ['health', 'fitness'] },
});

Load the ad

When you are ready to load the ad, call load(). It resolves to true when an ad is ready and false if loading failed:

const loaded = await ad.load();
if (!loaded) {
  console.warn('Interstitial failed to load');
}

Show the ad

When you are ready to display the ad, such as after a transition in the app flow, call show(). Like load(), it resolves to a boolean: true once the ad has been shown and dismissed, or false immediately if no ad was loaded:

const shown = await ad.show(); // resolves to true once the ad is dismissed
if (!shown) {
  console.warn('No interstitial was ready to show');
}

To show another ad after one is dismissed, call load() again to prepare a fresh ad.

Handling ad events

To listen and respond to events from an Interstitial ad, pass a CIInterstitialEventListener when creating the ad. All callbacks are optional, so provide only the ones you need:

const ad = new CIInterstitialAd({
  placementId: '<PLACEMENT-ID>',
  pageUrl: 'https://example.com/sport',
  eventListener: {
    interstitialLoaded: () => console.log('Interstitial ad loaded.'),
    interstitialLoadFailed: () => console.warn('Interstitial ad failed to load.'),
    interstitialDismissed: () => console.log('Interstitial ad dismissed.'),
  },
});

The listener is complementary to the promises returned by load() and show() — use whichever style suits your app. The events map to the same signals:

Callback	Also surfaced by
`interstitialLoaded`	`load()` resolves `true`
`interstitialLoadFailed`	`load()` resolves `false`
`interstitialDismissed`	`show()` resolves `true`

Releasing the ad

Call destroy() to release the native ad, stop listening for events, and free resources — for example when the component that owns the ad unmounts:

import { useEffect, useRef } from 'react';
import { CIInterstitialAd } from '@content-ignite/mobile-sdk-react-native';

function InterstitialScreen() {
  const adRef = useRef<CIInterstitialAd | null>(null);

  useEffect(() => {
    return () => {
      adRef.current?.destroy();
    };
  }, []);

  const showAd = async () => {
    const ad = new CIInterstitialAd({
      placementId: '<PLACEMENT-ID>',
      pageUrl: 'https://example.com/sport',
      targeting: { segment: ['health', 'fitness'] },
    });
    adRef.current = ad;

    if (await ad.load()) {
      await ad.show(); // resolves once the ad is dismissed
    }
  };

  // ...render a button that calls showAd()
}

See the full example: Interstitial sample app.

Getting started

Android

iOS (SwiftUI)

iOS (UIKit)

React Native

Initialising an ad

Required

Optional

Load the ad

Show the ad

Handling ad events

Releasing the ad

​Initialising an ad

​Required

​Optional

​Load the ad

​Show the ad

​Handling ad events

​Releasing the ad

Initialising an ad

Required

Optional

Load the ad

Show the ad

Handling ad events

Releasing the ad