Skip to main content

GoogleAdMob.showAppsInTossAdMob

Shows the Google AdMob full-screen ad that was pre-loaded by loadAppsInTossAdMob. Only call this after receiving the loaded event from loadAppsInTossAdMob.

Signature​

showAppsInTossAdMob is exposed as a member of the GoogleAdMob namespace object.

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

declare const GoogleAdMob: {
  showAppsInTossAdMob: ((args: {
    onEvent: (data: ShowAdMobEvent) => void;
    onError: (error: Error) => void;
    options?: ShowAdMobOptions;
  }) => () => void) & {
    isSupported: () => boolean;
  };
};

interface ShowAdMobOptions {
  adGroupId: string;
}

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

Parameters​

NameTypeRequiredDescription
args.onEvent(data: ShowAdMobEvent) => 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.optionsShowAdMobOptions—Ad options.
args.options.adGroupIdstring—The same ad group unit ID used with loadAppsInTossAdMob.

Returns​

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

Permission​

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

Examples​

Minimal​

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

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

Realistic — navigate after ad is dismissed​

import { GoogleAdMob } from '@apps-in-toss/web-framework';
import { useCallback } from 'react';
import { useNavigate } from 'react-router-dom';

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

function RewardPage() {
  const navigate = useNavigate();

  const handleShowAd = useCallback(() => {
    if (!GoogleAdMob.showAppsInTossAdMob.isSupported()) return;

    GoogleAdMob.showAppsInTossAdMob({
      options: { adGroupId: AD_GROUP_ID },
      onEvent: (event) => {
        switch (event.type) {
          case 'dismissed':
            navigate('/reward-result');
            break;
          case 'userEarnedReward':
            console.log('Reward earned', event.data);
            break;
          case 'failedToShow':
            console.warn('Ad failed to show');
            break;
        }
      },
      onError: (error) => {
        console.error('Ad show error', error);
      },
    });
  }, [navigate]);

  return (
    <button type="button" onClick={handleShowAd}>
      Watch rewarded ad
    </button>
  );
}

Try it live​

Open the Ads page in sdk-example to try the GoogleAdMob workflow live.

Open in sdk-example

External references​