Skip to main content

loadFullScreenAd

Pre-loads a full-screen ad. After receiving the loaded event, call showFullScreenAd to display it to the user. This is a separate full-screen ad namespace from GoogleAdMob.

Signature​

loadFullScreenAd is exported directly from @apps-in-toss/web-framework.

import { loadFullScreenAd } from '@apps-in-toss/web-framework';

declare const loadFullScreenAd: ((args: {
  onEvent: (data: LoadFullScreenAdEvent) => void;
  onError: (error: Error) => void;
  options?: LoadFullScreenAdOptions;
}) => () => void) & {
  isSupported: () => boolean;
};

interface LoadFullScreenAdOptions {
  adGroupId: string;
}

interface LoadFullScreenAdEvent {
  type: 'loaded';
}

Parameters​

NameTypeRequiredDescription
args.onEvent(data: LoadFullScreenAdEvent) => void✓Event handler. type: 'loaded' means the ad is ready to show.
args.onError(error: Error) => void✓Called when the ad fails to load.
args.optionsLoadFullScreenAdOptions—Ad options including adGroupId.
args.options.adGroupIdstring—Ad group unit ID issued from the console.

Returns​

  • () => void — cleanup function. Call it to unsubscribe from events.

Permission​

No permission required — loadFullScreenAd is not bound to a PermissionName. For the typical permission flow used by other namespaces, see Guides — Permissions pattern.

Examples​

Minimal​

import { loadFullScreenAd } from '@apps-in-toss/web-framework';

const cleanup = loadFullScreenAd({
  onEvent: (event) => {
    if (event.type === 'loaded') {
      console.log('Full-screen ad loaded');
    }
  },
  onError: (error) => {
    console.error('Full-screen ad failed to load', error);
  },
});

// Unsubscribe when done
cleanup();

Realistic — load on view entry, enable button when ready​

import { loadFullScreenAd, showFullScreenAd } from '@apps-in-toss/web-framework';
import { useEffect, useState } from 'react';

const AD_GROUP_ID = 'ad-group-id-here';

function FullScreenAdSection() {
  const [adReady, setAdReady] = useState(false);

  useEffect(() => {
    if (!loadFullScreenAd.isSupported()) return;

    const cleanup = loadFullScreenAd({
      options: { adGroupId: AD_GROUP_ID },
      onEvent: (event) => {
        if (event.type === 'loaded') {
          setAdReady(true);
        }
      },
      onError: (error) => {
        console.error('Full-screen ad failed to load', error);
      },
    });

    return cleanup;
  }, []);

  const handleShow = () => {
    showFullScreenAd({
      options: { adGroupId: AD_GROUP_ID },
      onEvent: (event) => console.log('Ad event', event),
      onError: console.error,
    });
  };

  return (
    <button type="button" onClick={handleShow} disabled={!adReady}>
      Show full-screen ad
    </button>
  );
}

Try it live​

Open the Ads page in sdk-example to try full-screen ad APIs live.

Open in sdk-example

External references​