Manual Zone Display

In some situations, you may wish to run an auction for a zone but manually display at a later time. For example, to display an ad manually for a game after the user has spent 5 minutes playing

Examples

• Manually displayed zones

Implementation

Displaying a Zone Manually

To display a zone manually, first ensure that the zone is set to manual display in your Fuse configuration. Then, after the zone has been activated and an ad has been loaded, you can call the displayZone API method with the zone’s ID.

First the zone must be known to fuse (by being discovered on the page and activated). This is done by either including the div with data-fuse attributes in the initial page load, or by dynamically adding it to the page and calling fusetag.registerZone('zone-id').

// create the zone div dynamically
const zoneDiv = document.createElement('div');
zoneDiv.id = 'zone-id';
zoneDiv.setAttribute('data-fuse', 'manual-zone-code');
document.body.appendChild(zoneDiv);

fusetag.registerZone('zone-id');

<div id="zone-id" data-fuse="manual-zone-code"></div>

To display the zone, call the displayZone method with the zone’s ID:

fusetag.displayZone('zone-id');

Display the Zone after a specific event

You can also display the zone after a specific event, such as a timer or user interaction. For example, to display the zone after 1 minute:

// Register the zone first, this will run the auction but not display the ad yet
fusetag.registerZone('zone-id');

setTimeout(() => {
  // auction has been run, now display the ad
  fusetag.displayZone('zone-id');
}, 1 * 60 * 1000); // 1 minute

Displaying the Zone after an Auction with bids received

The prebid auctionEnd event can be used to display the zone only after bids have been received. This ensures that the ad is displayed only when there are bids available.

// Set up listener for auction end event
window.fusePbjs.onEvent('auctionEnd', function(auctionEndData) {
  const zoneBids = auctionEndData.bidsReceived.filter(bid => bid.adUnitCode.includes('zone-id'));
  if (zoneBids.length > 0) {
    // Bids received for the zone, display the ad
    fusetag.displayZone('zone-id');
  } else {
    // No bids received for the zone, handle accordingly e.g. show fallback ad or do nothing
    console.log('No bids received for zone-id');
  }
});

// Register the zone to start the auction
fusetag.registerZone('zone-id');

Troubleshooting

When I call the displayZone API, I get an ‘Unknown Zone’ error

The displayZone API accepts only the id attribute of the Zone Div. Do not pass the slot identifier or other alternatives.