H5 Gaming Interstitial

How to implement H5 gaming interstitial ads using Fuse

Overview

H5 gaming interstitials are full-screen ads that appear at natural transition points in HTML5 games, such as between game levels or after completing a challenge. These ads provide a non-disruptive way to monetize gaming content while maintaining a good user experience.

How it Works

The H5 interstitial format uses Google Publisher Tag’s GAME_MANUAL_INTERSTITIAL out-of-page format. Fuse provides a simple API to:

  1. Register and load an interstitial ad
  2. Receive a callback when the ad is ready
  3. Call displayH5Interstitial() to display the ad
  4. Receive a callback when the ad is closed

Configuration

Admin Panel Setup

In the Fuse admin panel, create a zone with the h5Interstitial attribute set to true. This tells Fuse to configure the zone as a gaming interstitial.

{
  "attributes": {
    "h5Interstitial": true
  }
}

API Reference

fusetag.registerH5Interstitial(zoneCode)

Registers and loads an H5 interstitial ad for the specified zone code.

Parameters:

  • zoneCode (string): The zone code configured in the Fuse admin panel

Example:

fusetag.que.push(function() {
  fusetag.registerH5Interstitial('my_test_h5_interstitial');
});

fusetag.onH5InterstitialReady(callback)

Sets a callback function to be called when the interstitial ad is ready to display.

Parameters:

  • callback (function): A callback function that receives the zone code as a parameter

Example:

fusetag.que.push(function() {
  fusetag.onH5InterstitialReady(function(zoneCode) {
    console.log('Ad is ready:', zoneCode);
    // Enable your "Next Level" button or similar UI
  });
});

fusetag.displayH5Interstitial()

Triggers the display of the interstitial ad. Call this after the interstitial is ready (for example, after onH5InterstitialReady fires) to make the H5 gaming interstitial visible.

Parameters:

  • None

Example:

fusetag.que.push(function() {
  fusetag.displayH5Interstitial();
});

fusetag.onH5InterstitialClosed(callback)

Sets a callback function to be called when the user closes the interstitial ad.

Parameters:

  • callback (function): A callback function that receives the zone code as a parameter

Example:

fusetag.que.push(function() {
  fusetag.onH5InterstitialClosed(function(zoneCode) {
    console.log('Ad was closed:', zoneCode);
    // Continue your game or advance to next level
  });
});

Implementation Example

Here’s a complete example of implementing an H5 gaming interstitial:

<!DOCTYPE html>
<html>
<head>
  <title>My Game</title>
  <script async src="https://cdn.fuseplatform.net/publift/tags/2/YOUR_ACCOUNT/fuse.js"></script>
</head>
<body>
  <div id="game-container">
    <h1>Level <span id="level">1</span></h1>
    <button id="next-level" onclick="showInterstitial()">Next Level</button>
  </div>

  <script>
    const fusetag = window.fusetag || (window.fusetag = { que: [] });
    let currentLevel = 1;
    let adReady = false;

    fusetag.que.push(function() {
      // Set up callbacks
      fusetag.onH5InterstitialReady(function(zoneCode) {
        console.log('H5: Interstitial ready:', zoneCode);
        adReady = true;
      });

      fusetag.onH5InterstitialClosed(function(zoneCode) {
        console.log('H5: Interstitial closed:', zoneCode);
        advanceLevel();
      });

      // Register the interstitial
      fusetag.registerH5Interstitial('test_h5_interstitial');
    });

    function showInterstitial() {
      if (!adReady) {
        console.log('H5: Ad not ready yet');
        return;
      }

      fusetag.que.push(function() {
        fusetag.displayH5Interstitial();
      });
    }

    function advanceLevel() {
      currentLevel++;
      document.getElementById('level').textContent = currentLevel;

      // Register a new interstitial for the next level
      adReady = false;
      fusetag.que.push(function() {
        fusetag.registerH5Interstitial('test_h5_interstitial');
      });
    }
  </script>
</body>
</html>

Live Example

Best Practices

  1. Timing: Show interstitials at natural break points in your game, such as between levels or after completing a challenge. Avoid interrupting active gameplay.

  2. Frequency: Don’t show interstitials too frequently. Google recommends limiting interstitial frequency to maintain a positive user experience.

  3. User Feedback: Provide visual feedback to users about when an ad is loading or will be shown.

  4. Error Handling: Always check if the ad is ready before attempting to display it. The ad may not load if there’s no available inventory or if there’s a network issue.

  5. Progressive Enhancement: Ensure your game works even if ads fail to load. Don’t make game progression dependent on ad display.

Troubleshooting

Ad doesn’t display:

  • Verify the zone is configured with h5Interstitial: true in the admin panel
  • Check that registerH5Interstitial was called before attempting to display
  • Ensure the zone code matches the configuration
  • Check browser console for errors

Callback not firing:

  • Ensure callbacks are registered before calling registerH5Interstitial
  • Verify all code is wrapped in fusetag.que.push()
  • Check for JavaScript errors that might prevent callback execution

Ad displays at wrong time:

  • For manual gaming interstitials, the ad displays when your code calls displayH5Interstitial()
  • Only call displayH5Interstitial() after the ready callback has fired and you have confirmed the ad is ready
  • If the ad appears at the wrong time, check where displayH5Interstitial() is invoked in your game flow

See Also