Skip to main content

showFullScreenAd

Shows the full-screen ad that was pre-loaded by loadFullScreenAd. Call this only after receiving the loaded event from loadFullScreenAd. This is a separate full-screen ad namespace from GoogleAdMob.

Signature​

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

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

declare const showFullScreenAd: ((args: {
  onEvent: (data: ShowFullScreenAdEvent) => void;
  onError: (error: Error) => void;
  options?: ShowFullScreenAdOptions;
}) => () => void) & {
  isSupported: () => boolean;
};

interface ShowFullScreenAdOptions {
  adGroupId: string;
}

type ShowFullScreenAdEvent =
  | { type: 'requested' }
  | { type: 'clicked' }
  | { type: 'dismissed' }
  | { type: 'failedToShow' }
  | { type: 'impression' }
  | { type: 'show' }
  | { type: 'userEarnedReward'; data: { unitType: string; unitAmount: number } };

Parameters​

NameTypeRequiredDescription
args.onEvent(data: ShowFullScreenAdEvent) => void✓Event handler. Receives requested, clicked, dismissed, impression, show, failedToShow, and userEarnedReward events.
args.onError(error: Error) => void✓Called when showing the ad fails.
args.optionsShowFullScreenAdOptions—Ad options.
args.options.adGroupIdstring—The same ad group unit ID used with loadFullScreenAd.

Returns​

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

Permission​

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

Examples​

Minimal​

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

showFullScreenAd({
  onEvent: (event) => {
    console.log('Ad event', event.type);
  },
  onError: (error) => {
    console.error('Ad show failed', error);
  },
});

Realistic — handle reward on dismissal​

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

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

function RewardAdSection() {
  const [adReady, setAdReady] = useState(false);
  const [earned, setEarned] = useState(false);

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

    const cleanup = loadFullScreenAd({
      options: { adGroupId: AD_GROUP_ID },
      onEvent: (event) => {
        if (event.type === 'loaded') setAdReady(true);
      },
      onError: console.error,
    });

    return cleanup;
  }, []);

  const handleShow = useCallback(() => {
    if (!showFullScreenAd.isSupported()) return;

    showFullScreenAd({
      options: { adGroupId: AD_GROUP_ID },
      onEvent: (event) => {
        switch (event.type) {
          case 'userEarnedReward':
            setEarned(true);
            console.log('Reward earned', event.data);
            break;
          case 'dismissed':
            if (earned) console.log('Grant reward to user');
            break;
        }
      },
      onError: console.error,
    });
  }, [earned]);

  return (
    <button type="button" onClick={handleShow} disabled={!adReady}>
      Watch rewarded 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​